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

相关推荐
YCY^v^3 小时前
centos 7 开启80,443端口,怎么弄?
linux·运维·centos
北南京海3 小时前
[Linux]进程地址空间
linux·运维·服务器
yzx9910134 小时前
服务器生成图片
运维·服务器
小阳睡不醒8 小时前
小白成长之路-部署Zabbix7(二)
android·运维
杰克逊的日记9 小时前
GPU运维常见问题处理
linux·运维·gpu
caolib9 小时前
无需云服务器的内网穿透方案 -- cloudflare tunnel
运维·服务器·内网穿透·tunnel·cloudflared
奇舞精选9 小时前
k8s基本概念初探
运维
誰能久伴不乏10 小时前
Linux系统调用概述与实现:深入浅出的解析
linux·运维·服务器
程序员学习随笔10 小时前
Linux进程深度解析(2):fork/exec写时拷贝性能优化与exit资源回收机制(进程创建和销毁)
linux·运维·服务器
-SGlow-10 小时前
MySQL相关概念和易错知识点(2)(表结构的操作、数据类型、约束)
linux·运维·服务器·数据库·mysql