Web 部署

2024年06月24日

柏拉文

越努力，越幸运

一、认识

---

项目结构如下

my-vue-app/
├── Dockerfile
├── public/
├── src/
├── .dockerignore
|── nginx.conf
├── package.json
└── vue.config.js

Docker 部署 Vue.js Web 应用，使用多阶段构建，分别构建和运行应用程序。

阶段一、构建阶段 使用 Node.js 官方镜像安装依赖并构建 Vue.js 应用。

1. 使用 Node.js 镜像作为构建阶段的基础镜像

2. 设置工作目录为 /app

3. 将 package.json 和 package-lock.json 复制到 /app 目录

4. 安装项目依赖

5. 将项目文件复制到 /app 目录

6. 运行 npm run build 构建 Vue.js 应用

阶段二、运行阶段 使用 Nginx 官方镜像作为基础镜像，将构建的文件复制到 Nginx 静态文件目录。

1. 使用 Nginx 镜像作为运行阶段的基础镜像

2. 将构建阶段生成的 dist 目录下的文件复制到 Nginx 静态文件目录

3. 将自定义的 nginx.conf 配置文件复制到 Nginx 配置文件目录

4. 暴露 80 端口并启动 Nginx 服务

5. 使用 nginx -g "daemon off;" 命令启动 Nginx 服务

二、操作

---

2.1 Dockerfile

FROM node:latest as nodeBuilder
WORKDIR /app
COPY package*.json /app 
RUN npm install 
COPY . /app
RUN npm run build 

FROM nginx:latest
COPY --from=nodeBuilder /app/dist /usr/share/nginx/html 
COPY nginx.conf /etc/nginx/nginx/conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2.2 nginx.conf

server {
  listen 80;

  server_name localhost;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  # 可选：代理 API 请求到后端服务
  location /api {
    proxy_pass http://backend:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

2.3 .dockerignore

node_modules
dist
.git
.dockerignore
.gitignore
README.md

2.4 构建 Docker 镜像

docker build -t vue-app . 

2.5 运行 Docker 镜像

docker run -d --name vue-app -p 9090:80 vue-app