如何使用 docker 在本地部署 vite 项目

如何使用 docker 在本地部署 vite 项目

  1. 创建 Dockerfile 文件
  2. 创建.dockerignore 文件
  3. 构建镜像
  4. 运行容器

1. 创建 Dockerfile 文件

# 使用官方的 Node 镜像作为基础镜像
FROM node:16.15.1

# 设置工作目录
WORKDIR /usr/src/app

# 将本地的 Vite 项目文件复制到工作目录
COPY . .

# 安装依赖
RUN npm install

# 执行 Vite 构建命令,生成 dist 目录
RUN npm run build

# 使用 Nginx 镜像作为运行时镜像
FROM nginx:latest

# 将 Vite 项目的 dist 目录复制到 Nginx 的默认静态文件目录
COPY --from=0 /usr/src/app/dist /usr/share/nginx/html

# 暴露容器的 80 端口
EXPOSE 80

# Nginx 会在容器启动时自动运行,无需手动设置 CMD

2. 创建 .dockerignore 文件

node_modules
dist

3. 构建镜像

docker build -t vite-app .

4. 运行容器

docker run -d -p 8080:80 vite-app

5. 访问

直接访问 http://localhost:8080 即可看到效果

注意

  1. 不能直接复制本地的 nodemodels 文件夹到容器中,因为容器中的 node 环境和本地的 node 环境不一样,所以需要重新安装依赖,且 docker 镜像中使用的是 linux 系统,所以安装的依赖也是 linux 版本的,如果本地是 windows 系统,那么就不能直接复制本地的 node_modules 文件夹到容器中,因为 windows 和 linux 的 node_modules 文件夹是不一样的,所以需要重新安装依赖。
  2. 文中的 80 端口是容器内部的端口,8080 端口是容器外部的端口,所以访问的时候需要使用 8080 端口,而不是 80 端口。
  3. 文中的 COPY --from=0 /usr/src/app/dist /usr/share/nginx/html 命令是将第一个 FROM 的容器中的 /usr/src/app/dist 目录复制到第二个 FROM 的容器中的 /usr/share/nginx/html 目录,这样就可以将 vite 项目的 dist 目录复制到 nginx 的默认静态文件目录中,从而可以通过访问 nginx 的默认静态文件目录来访问 vite 项目。

你可能感兴趣的:(docker,容器,运维)