在Docker中使用Nginx部署Vue项目

Vue.js是一种流行的JavaScript框架，用于构建用户界面。它具有易学易用的特点，并且在开发过程中提供了许多便利。而Docker是一种容器化平台，可以将应用程序及其依赖项打包到一个独立的可运行单元中。在本篇文章中，我们将介绍如何使用Docker来运行Vue项目，并展示如何配置Nginx作为Vue项目的反向代理服务器.

1、目录结构

├── conf.d
│ └── default.conf
├── dist
└── docker-compose.yml

2、准备所需文件

default.conf

这里需要注意，我们引入的是nginx容器中的 /etc/nginx/conf.d/default.conf这个文件，这个文件被/etc/nginx/nginx.conf的http所包含 所以不需要写http那一块内容

server {
        listen       80;
        server_name  localhost;

        location / {
            root   /dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /dev-api/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.6.113:9080/;
        }

        # 避免actuator暴露
        if ($request_uri ~ "/actuator") {
            return 403;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

dist

即使用 npm run build:prod 命令进行打包后的文件夹 内包含index.html及其他静态文件

docker-compose.yml

version: '3.1'
services:
  nginx:           # 服务的名称
    restart: always   # 代表只要docker启动，那么这个容器就跟着一起启动
    image: nginx  # 指定镜像  本地没有则会自动从docker云镜像拉取
    container_name: nginx  # 指定容器名称：--name
    privileged: true
    network_mode: host
    environment:
      TZ: Asia/Shanghai        # 指定时区
    volumes:
      - ./conf.d:/etc/nginx/conf.d   # 映射数据卷
      - ./dist:/dist