linux環境部署springboot+vue項目

      項目部署是一個程序員必備的技能，當項目開發過程中，需要將項目部署在開發服務器上，進行自測，或協助運維，測試進行環境的搭建配置，學會了項目部署，你就是團隊中最亮的那個仔。

項目簡介

后端：springboot項目【打包為jar包】

前端：vue項目【通過cli3搭建】

目標服務器：liunx操作系統

使用工具

xshell：通過命令操作服務器

sftp：上傳安裝包到服務器

部署思路

1. jdk、tomcat安裝包下載

2. jdk環境配置，以及tomcat啟動

3. 本地項目打包，（前端打包時需要修改配置）

4. 上傳前端項目到tomcat/webapps,上傳后端jar包，並運行

5. 使用nginx進行反向代理

文章目錄

1. jdk安裝及環境配置

2. tomcat安裝及啟動

3. springboot項目打包

4. vue項目配置及編譯

5. nginx反向代理

jdk安裝及環境配置

1. 下載安裝包 

2. 上傳服務器

通過xftp將下載后的jdk安裝包上傳至linux服務器

3.  解壓

sudo tar -zxvf jdk-8u271-linux-x64.tar.gz

解壓后，為了后續操作方便，可將解壓后的目錄名進行修改【修改為jdk1.8】

修改命令：

mv jdk-8u271-linux-x64 jdk1.8

4. 配置環境變量【配置文件位置：/etc/profile】

export JAVA_HOME=/usr/local/jdk1.8
export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/
export PATH=$JAVA_HOME/bin:$PATH
export JRE_HOME=$JAVA_HOME/jre

編輯完profile配置文件后，使用命令source profile 更新配置文件，使其立即生效

5. 測試

java -version

 

tomcat部署

tomcat用於部署前端項目，默認監聽端口8080，將前端項目編譯后的靜態文件存放在tomcat下webapps下，便可以通過ip:8080/項目名訪問，tomcat是需要jdk環境

1.下載

下載地址：https://tomcat.apache.org/download-80.cgi

2.上傳服務器

通過xftp將下載后的jdk安裝包上傳至linux服務器

3.解壓

sudo tar -zxvf apache-tomcat-8.5.59.tar.gz

4.啟動【位置：tomcat的bin目錄下運行】

./startup.sh

遇到問題：

Neither the JAVA_HOME nor the JRE_HOME environment variable is defined
At least one of these environment variable is needed to run this program

分析：tomcat未獲得java運行環境

解決方法:在tomcat/bin/setclasspath.sh文件頭部中添加jdk環境

export JAVA_HOME=/usr/local/jdk1.8
export JRE_HOME=/usr/local/jdk1.8/jre

 

springboot項目打包

1. 打包命令【項目根目錄下】

mvn clean package -DskipTests

mvn clean package :使用maven編譯打包java文件為jar包，-DskipTests跳過單元測試模塊，在項目根目錄下運行此命令，會在target目錄下生成jar包，jar包命名為：項目名-版本號-SNAPSHOT.jar

2. 部署運行

nohup java -jar 項目名-版本號-SNAPSHOT.jar > Log.log &

jar 包可以通過 java -jar 包名.jar命令直接運行，但關閉用戶窗口會停止運行，使用nohup命令可以忽略所有斷開信號，故關閉用戶窗口，程序也會一直執行下去，  &表示讓程序在后台運行

3.vue項目編譯

編譯命令

npm run build:prod

vue項目默認將打包后的靜態文件保存在dist目錄中，為了方便部署以及后期訪問，將修改編譯文件保存路徑【outputDir】為DBMS，並修改基礎路徑【publicPath】，部署時將整個DBMS目錄存放在tomcat的webapps下，然后通過ip+基礎路徑訪問前端資源

前端采用vue-cli3腳手架搭建，將前端代碼編譯時需要修改代碼配置

vue.config.js

router/index.js【在路由中添加base路徑】

 

nginx反向代理

雖然前端和后端部署在同一個服務器上，但前端與后端的訪問端口不同，前端部署在tomcat上，故訪問前端的端口為8080，需要使用nginx將請求分發到前后端

1.安裝

默認安裝路徑為：/etc/nginx

sudo apt-get install nginx

2. 啟動

nginx

遇到問題【nginx啟動報錯】：

nginx: [alert] could not open error log file: open() "/var/log/nginx/error.log" failed (13: Permission denied)
2020/11/11 09:21:12 [warn] 123917#123917: the "user" directive makes sense only if the master process runs with super-user privileges, ignored in /etc/nginx/nginx.conf:1
2020/11/11 09:21:12 [emerg] 123917#123917: open() "/var/log/nginx/access.log" failed (13: Permission denied)

分析：權限不夠

解決方案：sudo nginx

3. nginx配置

nginx.conf為nginx的配置文件，此文件中配置了將conf.d目錄下以.conf結尾的文件加載的設置，和sites-enabled下所有文件加載的設置，所以在nginx中配置反向代理時，可以在conf.d下編寫新的配置文件，或者修改sites-enabled下的default文件

sites-enabled/default文件內容

server {
listen 80;
      location /DBMS {
      # 前端   
proxy_pass http://localhost:8080;
}
location / {
  # 后端接口
      proxy_pass http://localhost:8090;
}
}

分析：vue前端部署在tomcat下，tomcat的默認端口為8080，后端的端口為8090，並且前端靜態文件是放在tomcat/webapps下的DBMS目錄，故DBMS是前端訪問路徑的基礎路徑，在訪問前端時需要在加上DBMS基礎路徑，nginx監聽端口80，當有請求訪問80端口時，並且訪問路徑的根路徑中包含DBMS就將請求分發到8080端口，即前端 ，其他的請求發送到8090端口

遇到問題：前期嘗試nginx監聽8080端口（tomcat默認端口），獲得前端的請求然后發送到后端8090端口，不需要在nginx中反向代理前端的請求，但8080端口時tomcat監聽着，故無法讓nginx監聽，所以才會像上面的配置，監聽80端口，將請求分發到前端或后端

訪問路徑：http://服務器ip/DBMS/

80端口是http的默認端口，故可以不用寫，通過上述鏈接便可以訪問，nginx會將此請求發送到8080端口，返回前端頁面