【Jeecg Boot 3 - 第二天】2.1、nginx 部署 JEECGBOOT VUE3

一、场景

二、实战

[▶ 2.1、打包（build 前端）](#▶ 2.1、打包（build 前端）)

[＞ Stage 1：修改配置文件 .env.production（作用：指向后端接口地址）](#＞ Stage 1：修改配置文件 .env.production（作用：指向后端接口地址）)

[＞ Stage 2：点击build（作用：打包，生成文件夹 dist）](#＞ Stage 2：点击build（作用：打包，生成文件夹 dist）)

[▶ 2.2、上传至nginx](#▶ 2.2、上传至nginx)

[＞ Stage 1：将dist中的所有文件上传至nginx下html/jeecg](#＞ Stage 1：将dist中的所有文件上传至nginx下html/jeecg)

[＞ Stage 2：修改nginx配置文件](#＞ Stage 2：修改nginx配置文件)

[＞ 内容](#＞ 内容)

[＞ Stage 3：修改 docker-compose.yaml（作用：服务器端口 - 容器端口 映射）](#＞ Stage 3：修改 docker-compose.yaml（作用：服务器端口 - 容器端口 映射）)

[＞ 内容](#＞ 内容)

[▶ 2.3、启动](#▶ 2.3、启动)

[＞ Stage 1：启动 nginx](#＞ Stage 1：启动 nginx)

[▶ 2.4、验证](#▶ 2.4、验证)

[＞ Stage 1：访问前端地址（http://XXX.XXX.XXX.XXX:9001/）](#＞ Stage 1：访问前端地址（http://XXX.XXX.XXX.XXX:9001/）)

---

一、场景

• 服务器：腾讯云-ECS

• 容器技术：docker + docker-compose

• web服务器：nginx （docker 容器）

• 前端：Vue 3

• 后端：JEECGBOOT 3.6 （上节已部署）

• 数据库：redis ， mysql

• 数据库：WebStorm 2022.1

二、实战

▶ 2.1、打包（build 前端）

＞ Stage 1：修改配置文件 .env.production（作用：指向后端接口地址）

＞ Stage 2：点击build（作用：打包，生成文件夹 dist）

▶ 2.2、上传至nginx

＞ Stage 1：将dist中的所有文件上传至nginx下html/jeecg

＞ Stage 2：修改nginx配置文件

• 9001 ：前端访问端口 （注意：这里的9001是nginx容器监听端口，所以下一步需要映射）
• 9200 ：后端接口端口

＞ 内容

	server {
		listen       9001;
		server_name 0.0.0.0;
		#前端打的dist资源存放目录
		root		 html/jeecg/;
		
		location / {
			 # 用于配合 browserHistory使用
			 try_files $uri $uri/ /index.html;
		}
		
		location  /jeecgboot/ {
			#后台接口地址(我们部署去掉亿jeecg-boot项目名，如果你有请加上）
			proxy_pass         http://XXX.XXX.XXX.XXX:9200/jeecg-boot/;
			proxy_redirect off;
			#真实IP获取
			proxy_set_header  Host             $host;
			proxy_set_header  X-Real-IP        $remote_addr;
			set $my_proxy_add_x_forwarded_for $proxy_add_x_forwarded_for;
			if ($proxy_add_x_forwarded_for ~* "127.0.0.1"){
			   set $my_proxy_add_x_forwarded_for $remote_addr;
			}
			proxy_set_header   X-Forwarded-For $my_proxy_add_x_forwarded_for;
		}

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

	}

＞ Stage 3：修改 docker-compose.yaml（作用：服务器端口 - 容器端口 映射）

＞ 内容

version: '3.1'

services:
  nginx:
    restart: always
    container_name: nginx_base
    image: nginx:1.17.6
    ports:
      - 9001:9001
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./nginx-log:/var/log/nginx
      - ./html:/etc/nginx/html

networks:
  default:
    external:
      name: xph-network

▶ 2.3、启动

＞ Stage 1：启动 nginx

# 登录服务器，并进入目录
cd /mnt/docker/nginx/


# 重新构建并运行nginx
docker-compose up -d --build

▶ 2.4、验证

＞ Stage 1：访问前端地址（http://XXX.XXX.XXX.XXX:9001/）

• 账号 admin 密码 123456

＞ Stage 2：修改密码