springboot后端+vue前端分离部署

前后端分离项目部署踩坑

一后端部署

• jdk安装
  • tomcat安装
    • mysql安装

1. jdk安装，选择jdk1.8的比较靠谱，主流选择！其他的自己看着选吧。
   通过命令下载或者自行解压也可以。

yum search jdk
yum -y install  java-1.8.0-openjdk*

tar -zxvf jdk-8u121-linux-x64.tar.gz

其次修改配置文件信息如下：
vim的参考命令
先进入文件命令模式 vim /etc/profile，再字母i进入插入模式，英文冒号：为底行模式，再用wq命令保存退出即可。

vim /etc/profile
export JAVA_HOME=/usr/local/jdk/jdk1.8.0_121
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export PATH=$JAVA_HOME/bin:$PATH

先更新配置文件，检查安装配置是否正确即可

source /etc/profile 
java javac java -version

2. tomcat安装
   这个就比较简单了，直接官网下载tomcat8.0版本的jar.gz包，创建一个tomcat文件解压方便管理，有需要就去配置文件改相应的server.xml后端端口号。

tar -zxv -f apache-tomcat-8.5.50.tar.gz

进入到Tomcat的bin目录，执行启动命令，启动Tomcat，如果你是springboot项目可以直接命令启动就行

./startup.sh

java -jar sourse-0.0.1-SNAPSHOT.jar

3. mysql安装
   直接通过命令下就行，可能会出现unit not find

wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm
rpm -ivh mysql-community-release-el7-5.noarch.rpm
yum install mysql
yum install mysql-devel
yum install mysql-server

unit not find解决方法

https://blog.csdn.net/q908544703/article/details/91376995
https://blog.csdn.net/jiedaodezhuti/article/details/105387998

后台文件打包，右上角在maven里面双击package，开始打包，最后target有个war包

直接放进tomcat里面的webapp中就可以咯，别忘了启动项目。

二前端部署

用 npm run build命令打包，此命令如果出错，就百度吧！这里的话我的比实际情况多了个20520958的文件夹，所以导致部署完后，static里面的js，css样式not find404，丢失了。版本号需要自己手动去添加。在dist文件中的index.html在各种引用资源路径static前面，下图所示。数字2099就是版本号加上就可以了。

其他情况css样式丢失，js找不到以下几种方案解决：
1.前端打开config/index.js，将其中的assetsPublicPath值改为’./’
2. 打开build里面的util.js文件中

   if (options.extract) {
     return ExtractTextPlugin.extract({
       use: loaders,
       fallback: 'vue-style-loader',
       publicPath: "../../"
     })

nginx代理的使用配置情况

nginx相应的基础配置

  listen       8080;
        server_name    localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   /usr/local/nginx/dist;
            index  index.html index.htm;
	}

如果说你前端vue对后端的地址请求做了代理的话，如下所示，nginx文件配置也要做出改变。
// 代理列表, 是否开启代理通过[./dev.env.js]配置

    proxyTable: devEnv.OPEN_PROXY === false ? {} : {
      '/proxyApi': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/proxyApi': '/'
        }
      },

nginx.conf配置文件需要增加如下，proxy_pass改成后端部署的地址就可以咯。

          location ^~ /proxyApi/ {
            proxy_pass http://127.0.0.1:8080/;
            client_max_body_size 200m;
            proxy_connect_timeout 30;
            proxy_send_timeout 120;
            proxy_read_timeout 120;

在这里因为做了代理，所以请求的地址也要增加相应的代理名字，在打包里面dist下的index.js文件中，接口请求地址需要加上proxyApi。

 // api接口请求地址
 window.SITE_CONFIG['baseUrl'] = 'http://127.0.0.1:8080/proxyApi';
 // cdn地址 = 域名 + 版本号
 window.SITE_CONFIG['domain']  = './'; // 域名
 window.SITE_CONFIG['version'] = '2099';   // 版本号(年月日时分)
 window.SITE_CONFIG['cdnUrl']  = window.SITE_CONFIG.domain +   window.SITE_CONFIG.version;

相关命令的使用如下

配置文件修改后记得重新装载nginx，不然可能配置没生效。
nginx -s reload 
停止nginx服务
nginx -s stop 
查看nginx或者tomcat的进程
ps -ef  | gref nginx   
 ps -ef  | gref tomcat 
杀死进程
killall nginx

编辑conf相关配置文件市的命令。

vim 进入相关配置文件
i进入插入模式，可对文件进行编辑。
Esc退出插入模式
:英文冒号进入底行模式
q或者wq保存退出底行模式，编辑结束。