部署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中的路径一样才能访问！

<Host autoDeploy="true" name="是域名也可以是ip，在tomcat中唯一" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">

        <Context crossContext="true" docBase="/www/wwwroot/随便一个文件夹都可以" path="/test-war" reloadable="true" />

      </Host>

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，也就是域名 ”

    }