若依前后端多环境打包

参考:若依前后端分离版本,Windows下使用Nginx代理的方式进行部署(全流程,图文教程)

 

 

  1. 关于后端打包注意事项
    1. 多环境的话,切换指定的yml来打成jar包
    2. idea打包maven,spring boot项目,并修改jar包名称
      1. 具体操作在pom.xml中加入依赖    
    3. 去掉mybatis的sql打印
      1. springboot 配置mybatis打印sql

      2. 在application.yml(.properties)中增加配置,在控制台打印sql:

        mybatis
          configuration:
            log-impl: org.apache.ibatis.logging.stdout.StdOutImpl 
      3. 屏蔽到 #log-impll 这一行就没有sql日志了
    4. jar包起来后,通过访问验证码的地址测试 http://localhost:8080/captchaImage

  2. 前段vue打包

    1. 打包优化:vue项目打包优化之-productionSourceMap设置

      1. vue.config.js中     

        // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
          productionSourceMap: false,

        在设置了vue.config.js之后,就不会生成map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题,并且不想被看到源码,就把productionSourceMap 置为false,既可以减少包大小,也可以加密源码。

    2. vue.config.js中的配置

      1. 这里的target是代理的请求后台的接口,对应上面部署的后台接口的url,下面还有一个路径重写,添加了一个

        process.env.VUE_APP_BASE_API]:

      2.  

      3. vue的代理配置pathRewrite

        1. pathRewrite:重写路径

          后端识别时候把/dev-api替换成空,后端没有/dev-api

        2.  

          前段请求地址是有 /dev-api  后端是没有的 

      4. 所以在使用

        npm run dev

        运行项目时,请求都会被代理到你设置的localhost:8080/dev-api下

        所以要保证你在自己的本地运行前端项目和后台项目后能代理成功,即本地的前端能访问到本地的后台接口。

        接下来将前端打包。

        首先打包之前确保已经安装完依赖项,即

        npm install 成功且没问题。

      5. 首先将上面的这个端口改为你要在打包后访问的端口,即使用nginx代理前的接口。

        这个端口默认是80端口,这里把其修改为不会冲突的70端口,不推荐使用80端口。

        因为80端口是默认端口在部署到服务器上和下面启动nginx可能存在占用等问题。

        除了这个70端口外,下面的target的url和端口要和你服务器上能访问到后台的接口一致。

        然后在VSCode中新建终端,或者在前端项目下打开cmd

         npm run build:prod

        进行前端项目的打包

    3. nginx配置

      1.  

         

      2. 首先这里的listen下的端口就是代理前的接口,要与前面前端项目的vue.config.js中的端口一致。

            server {
                listen       70;
                server_name  10.229.36.158;

        然后下面的server_name是你服务器的ip,这里即使是使用的本地也建议不要用localhost,避免修改hosts文件导致的问题。

        所以这里就直接设置你要部署项目的服务器的ip。

        然后下面的location /下面配置的就是代理前前端静态资源的路径等。

        root 对应的就是在服务器上前端资源的dist目录的全路径,即代表根路径。

        下面的两个配置保持默认不要更改,配置的是防止404和入口页面。

                location / {
                    root   D:/www/kaoqin/dist/;
                    try_files $uri $uri/ /index.html;
                    index  index.html index.htm;
                }

        然后再下面的location /prod-api/ 就是配置的代理后的地址。

        复制代码
        复制代码
          location /prod-api/ {
          
                    proxy_set_header Host $http_host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header REMOTE-HOST $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_pass http://localhost:8080/;
                }
        复制代码
        复制代码

        这里的 /prod-api/就是跟前面前端项目设置代理的路径重写一致。

        下面的一些是设置请求头等,防止出现跨域问题。

        然后最下面的proxy_pass就是设置的代理后的地址,即你的服务器上后台接口的url。

        通过上面两个配置就能实现在服务器上所有的请求

        只要是通过

        http://10.229.36.158/70/dev-api/

        发送过来的请求全部会被代理到

        http://localhost:8080/

        下。这样就能实现前后端项目的请求代理。

            

          

      3.  

        nginx 路径不能有空格 或者中文名啊  

           
posted @   BBS_自律  阅读(1862)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
点击右上角即可分享
微信分享提示