【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 :后端接口端口
> 内容
bash 复制代码
	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(作用:服务器端口 - 容器端口 映射)

> 内容
bash 复制代码
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

bash 复制代码
# 登录服务器,并进入目录
cd /mnt/docker/nginx/


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

▶ 2.4、验证

> Stage 1:访问前端地址(http://XXX.XXX.XXX.XXX:9001/

  • 账号 admin 密码 123456

> Stage 2:修改密码

相关推荐
dessler32 分钟前
Hadoop HDFS-高可用集群部署
linux·运维·hdfs
少妇的美梦19 小时前
logstash教程
运维
chen94519 小时前
k8s集群部署vector日志采集器
运维
chen94519 小时前
aws ec2部署harbor,使用s3存储
运维
東雪蓮☆1 天前
深入理解 LVS-DR 模式与 Keepalived 高可用集群
linux·运维·服务器·lvs
qq_264220891 天前
LVS负载均衡群集和LVS+Keepalived群集
运维·负载均衡·lvs
乌萨奇也要立志学C++1 天前
【Linux】进程概念(二):进程查看与 fork 初探
linux·运维·服务器
雨落Liy1 天前
Nginx 从入门到进阶:反向代理、负载均衡与高性能实战指南
运维·nginx·负载均衡
Yyyy4821 天前
Nginx负载均衡集群实验步骤
运维·nginx·负载均衡
獭.獭.1 天前
Linux -- 信号【上】
linux·运维·服务器