如何使用 docker 在本地部署 vite 项目
- 创建 Dockerfile 文件
- 创建.dockerignore 文件
- 构建镜像
- 运行容器
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 即可看到效果
注意
- 不能直接复制本地的 nodemodels 文件夹到容器中，因为容器中的 node 环境和本地的 node 环境不一样，所以需要重新安装依赖，且 docker 镜像中使用的是 linux 系统，所以安装的依赖也是 linux 版本的，如果本地是 windows 系统，那么就不能直接复制本地的 node_modules 文件夹到容器中，因为 windows 和 linux 的 node_modules 文件夹是不一样的，所以需要重新安装依赖。
- 文中的 80 端口是容器内部的端口，8080 端口是容器外部的端口，所以访问的时候需要使用 8080 端口，而不是 80 端口。
- 文中的
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 项目。
)
)
