背景介绍

原本前后端代码是分别独立的，在代码仓库里是两个仓库，但不知之前的开发人员出于何种考虑，在项目部署时，又将前端代码合并到了后端

前后端分离步骤

总体思想

前端打包后上传至Nginx服务器，后端打包后使用Docker容器部署

安装Nginx容器

目录结构

docker-compose.yml文件

version: '3'
services:
  nginx:
    restart: always
    container_name: nginx
    image: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      # 此目录一定要挂载！
      - /data/nginx/html:/usr/share/nginx/html
      # - /usr/local/nginx/www:/var/www
      - /data/nginx/logs:/var/log/nginx
      # 有可能会出现不能挂载，这个时候用手动拷贝配置文件就行
      - /data/nginx/nginx.conf/:/etc/nginx/nginx.conf
      - /data/nginx/etc/cert:/etc/nginx/cert
      - /data/nginx/conf.d:/etc/nginx/conf.d
    environment:
      - NGINX_PORT=80
      - TZ=Asia/Shanghai
    privileged: true

nginx.conf

#user  nginx;
user  root;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    # 注意要添加这一行
    include /etc/nginx/conf.d/*.conf;
}

default.conf

server{
       listen 80;
       server_name localhost;
       charset utf-8;
       
       location / {
          # 此处一定要改成nginx容器中的目录地址，宿主机上的地址容器访问不到
          # 命令必须用 root, 不能用 alias
          root   /usr/share/nginx/html/dist;
         # try_files $uri $uri/ =404;
          index  index.html index.htm;
       }

       #error_page  404              /404.html;

       # redirect server error pages to the static page /50x.html
       #
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }
    }

注一

使用Nginx 容器时，想查看Nginx的日志应该查看对应的挂载目录，而不是使用docker logs命令

注二

表示前端的每一个请求路径都需要一个前缀/resource，区别于后端请求路径

资源路径为/zgbj/resource目录下

上传前端文件

目标路径

/data/nginx/html

注：实际运行时，Nginx读取的是容器内的文件，即存储在/usr/share/nginx/html目录下的文件，所以这个目录一定要挂载！！！

浏览器路径解析

当我们在浏览器中输入http:localhost:80后，该请求会被Nginx容器拦截，然后分发至/usr/share/nginx/html/dist/index.html，即项目首页

修改前端请求后端接口端口号

原本前后端合并打包时，前端访问后端接口的端口号为80，分离后，后端服务端口为8080，故将80改为8080；具体修改需结合实际情况

遇到的问题

上传前端文件后，浏览器显示403，Nginx日志如下显示

directory index of "/usr/share/nginx/html/" is forbidden

参考文章

【1】docker-compose 安装部署 Nginx