跳到主要内容

前端构建部署

此文档是：前端项目从构建、编译到部署nginx，映射后台接口配置的文档

一、配置后台接口和编译项目​

  1. 配置后台接口地址
  • 修改.env.production
VITE_GLOB_API_URL=/jeecgboot
VITE_GLOB_DOMAIN_URL=http://api3.boot.jeecg.com

重要提醒：请把api3.boot.jeecg.com换成自己的后台域名。

2. 编译打包项目

  • 进入根目录
cd jeecgboot-vue3
  • 打包编译
pnpm install 
pnpm run build
  • 打包成功

二、通过nginx部署前端​

通过 nginx 配置请求转发到后台接口

重要说明：

  • boot3.jeecg.com是官方Vue3前端演示地址，请把下面的boot3.jeecg.com 全部换成自己的前端域名。
  • /jeecgboot/对应的是 步骤一.1中的参数 VITE_GLOB_API_URL，这个可以不改避坑。
upstream boot3.jeecg.com {
  server 127.0.0.1:80;
 }
server {
    listen       80;
    server_name  boot3.jeecg.com;
    #前端打的dist资源存放目录
    root		 /srv/www/project;
	
    location / {
         # 用于配合 browserHistory使用
		 try_files $uri $uri/ /index.html;
    }
	
	location  /jeecgboot/ {
		#后台接口地址(我们部署去掉了/jeecg-boot项目名，如果你有请加上）
		proxy_pass         http://127.0.0.1:8080/;
		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;
    }

}

三、前端dist说明​

将dist内容，放到服务器的 /srv/www/project 目录下。

/srv/www/project 允许自定义，但需要与nginx里面的配置一致。

四、编译后修改后台配置​

dist\_app.config.js

五、其他技巧​

  1. 前端不缓存html，防止程序更新后缓存继续生效
    location / {
         # 不缓存html，防止程序更新后缓存继续生效
          if ($request_filename ~* .*\.(?:htm|html)$) {
            add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
            access_log on;
          } 
    }