如何使用 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 项目。