【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:修改密码

相关推荐
一心0923 小时前
ubuntu 20.04.6 sudo 源码包在线升级到1.9.17p1
运维·ubuntu·sudo·漏洞升级
好好学习啊天天向上3 小时前
世上最全:ubuntu 上及天河超算上源码编译llvm遇到的坑,cmake,ninja完整过程
linux·运维·ubuntu·自动性能优化
你想考研啊3 小时前
三、jenkins使用tomcat部署项目
运维·tomcat·jenkins
代码老y4 小时前
Docker:容器化技术的基石与实践指南
运维·docker·容器
典学长编程4 小时前
Linux操作系统从入门到精通!第二天(命令行)
linux·运维·chrome
DuelCode5 小时前
Windows VMWare Centos Docker部署Springboot 应用实现文件上传返回文件http链接
java·spring boot·mysql·nginx·docker·centos·mybatis
你想考研啊7 小时前
四、jenkins自动构建和设置邮箱
运维·jenkins
Code blocks7 小时前
使用Jenkins完成springboot项目快速更新
java·运维·spring boot·后端·jenkins
饥饿的半导体8 小时前
Linux快速入门
linux·运维
还是奇怪10 小时前
Linux - 安全排查 2
linux·运维·安全