docker nginx 部署 vue 项目详情

以下是使用Docker和Docker Compose部署Vue项目的详细步骤：

1. 在Vue项目的根目录下创建一个名为`Dockerfile`的文件，内容如下：

   # 基础镜像
   FROM node:12.16.1-alpine as build-stage
   
   # 设置工作目录
   WORKDIR /app
   
   # 复制package.json和package-lock.json文件
   COPY package*.json ./
   
   # 安装依赖
   RUN npm install
   
   # 复制所有文件到工作目录
   COPY . .
   
   # 打包
   RUN npm run build
   
   # 生产环境镜像
   FROM nginx:1.17.9-alpine
   COPY --from=build-stage /app/dist /usr/share/nginx/html
   COPY ./nginx.conf /etc/nginx/conf.d/default.conf

该文件定义了两个阶段，第一个阶段使用Node.js镜像构建Vue项目，第二个阶段使用Nginx镜像将构建好的Vue项目部署到生产环境中。

2. 在Vue项目的根目录下创建一个名为`nginx.conf`的文件，内容如下：

   server {
       listen 80;
       server_name localhost;
   
       location / {
           root /usr/share/nginx/html;
           index index.html;
           try_files $uri $uri/ /index.html;
       }
   
       error_page 500 502 503 504 /50x.html;
       location = /50x.html {
           root /usr/share/nginx/html;
       }
   }

该文件定义了Nginx的配置，将所有请求都重定向到Vue项目的`index.html`文件。

3. 在Vue项目的根目录下创建一个名为`docker-compose.yml`的文件，内容如下：

   version: '3.3'
   services:
     vue-nginx:
       container_name: vue_test
       image: my-vue:v1
       build:
         context: .
       ports:
         - "8080:80"
       volumes:
         - ./nginx/html/dist:/usr/share/nginx/html
         - ./nginx/logs:/var/log/nginx
         - ./nginx.conf:/etc/nginx/conf.d/default.conf
       restart: always

该文件定义了一个名为`vue-nginx`的服务，使用上述定义的Dockerfile构建镜像，并将Nginx容器的80端口映射到主机的8080端口。此外，还将Vue项目的构建结果、Nginx的日志和配置文件挂载到容器中。

4. 在Vue项目的根目录下运行以下命令启动服务：

   docker-compose up -d

运行成功后，可以通过访问`http://localhost:8080`来查看Vue项目的运行结果。