部署piclive

    因为想做一个前后端整合的piclive项目,所以先记录一下部署步骤,方便以后服务器迁移或者开发项目出现分支的时候参考一下。当然以下都是我自己的总结,如果大家觉得有什么不对劲的地方,欢迎大家指出一下。谢谢您查阅本文章·

    部署简单来说主要分为4个步骤。分别是前端的vue路由配置,后端的Java数据源、访问路径的配置,tomcat的host节点配置(主要是要修改path属性),还有nginx的配置前端后端转发。当然这些部署对于时下流行的前后端部署,服务器中的tomcat配置和nginx前后端的转发操作具有非常相似的情况,所以作为其他项目的部署也同样适用。

    部署:

前端:

1、修改vue.config.js 中的publicPath 值 ,即二级目录地址。 

 publicPath: process.env.NODE_ENV === "production" ? "/test-front-prod/" : "/test-front-dev/", ...

2、修改路由router/index.js 的mode值改为hash。

     export default new Router({

      mode: 'hash',

    ...

3、修改UI根目录下的.env.development和.env.production 的

VUE_APP_BASE_API = '/test-war' #后端api地址

后端:

1、# 应用的访问路径,一般就在spring的yml配置里

    context-path:/test-war #对应前端3中的后端api地址

tomcat:

1、使用java项目管理器部署tomcat的后端项目,设置好端口,比如8080,域名随便填,因为用来转发的,所以对实际不影响。修改Tomcat的编码,Catalina.sh里面的set "JAVA_OPTS=%JAVA_OPTS% %JSSE_OPTS% 后面追加 -Dfile.encoding=UTF-8。

2、修改配置文件:主要是修改path属性,要跟前端3中的路径一样才能访问!

       

     

nginx:

1、放置前端文件到某个目录下

2、修改配置文件

location ^~ /test-front-prod {

            alias 步骤1中的绝对路径,比如/www/wwwroot/hi.com/test-front-prod;

            index index.html;

            try_files $uri $uri/ @test-front-prod;

    }


    location ^~ /test-war {

    proxy_pass      http://tomcat中的name,也就是域名:8080/test-war;

    proxy_redirect            off;

    proxy_http_version        1.1;

    proxy_set_header Upgrade  $http_upgrade;

    proxy_set_header Connection "upgrade";

    #proxy_set_header Host      $http_host; 这里要跟tomcat的name一样才能解析成功。我在这里卡了一段时间。。。

    proxy_set_header Host      “tomcat中的name,也就是域名 ”

    }

你可能感兴趣的:(部署piclive)