SpringBoot+Vue專案部署到Linux服務器

Note:

1、Linux服務器選用的是CentOS7.7，其他型別也可以
2、需要在服務器配置jdk，服務SpringBoot專案
3、后端打包型別為jar包，war包需要自行修改后端配置
4、需要在服務器配置Nginx，服務Vue專案
5、暫未部署Docker，后續更新

1、服務器配置

1.1 安裝寶塔

• 參考寶塔官方教程即可，首先登錄服務器，設定安全組放行埠，把8888放開，然后使用終端執行命令（以CentOS為例）

  yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 2c87998c
  

• 安裝完成后記錄終端處的登錄入口、賬號、密碼，然后登錄

• 登錄后需要注冊個賬號，注冊系結后即可正常使用寶塔

1.2 安裝并配置MySQL、Redis、Nginx

• 使用寶塔安裝Mysql、Redis、Nginx，便于管理
• 在寶塔的軟體商店中搜索Mysql、Redis、Nginx并快捷安裝

1.3 創建資料庫并匯入資料

• 進入寶塔的資料庫界面，添加資料庫，填寫資料庫名、選擇字符集、設定訪問權限為所有人（這樣才能使用其他終端訪問），完成后提交，提示添加成功即為創建成功
  
• 創建成功后，點擊匯入，把本地資料庫的測驗資料匯入到服務器中的資料庫，提示匯入資料庫成功即可，
  

1.4 安裝并配置jdk

1.4.1 官網下載JDK并上傳到服務器

• 從官網下載可用于Linux的jdk包，通過寶塔上傳到服務器

• 建議上傳到/www/server下

  PS：/www/server是寶塔軟體的默認安裝目錄，把軟體都放到一起，方便查找

• 然后使用終端，進入jdk的上傳目錄，使用解壓命令，把上傳的jdk檔案解壓到當前目錄，然后把解壓后的檔案夾重命名為jdk8

  tar -zxvf jdk-8u311-linux-x64.tar.gz
  mv jdk1.8.0_311 jdk8
  

1.4.2 配置環境變數

• 1.打開 /etc/profile 檔案

  vim profile
  

• 2.在 profile 檔案末尾，配置jdk環境

  export JAVA_HOME=/www/server/jdk8
  export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/
  export PATH=$JAVA_HOME/bin:$PATH
  export JRE_HOME=$JAVA_HOME/jre
  

• 3.使 profile 生效

  source profile
  

• 4.查看jdk是否配置成功

  java -version 
  

  顯示版本號即為配置成功
  

1.5 安全組配置、放行埠配置

1.5.1 安全組配置

• 登錄云服務器，在控制臺處找到服務器，然后對安全組規則進行更改

• 以華為云為例，在入方向規則處添加前后端使用的埠（如8080和8081）
  

1.5.2 放行埠配置

• 在寶塔的安全功能中放行前后端專案需要使用的埠，如8080和8081

2、SpringBoot專案配置

2.1 配置修改

• 后端拆分application.yml組態檔，可拆分出本地dev和生產pro兩個（也可以多拆出test）

• application.yml檔案中保留通用配置

• application-dev.yml檔案中配置本地運行專案所用的配置

• application-pro.yml檔案中配置服務器中運行專案所用的配置，其中服務器資料庫名稱，即為1.3節中添加的資料庫名，密碼從寶塔界面點擊復制即可，注意不是使用root密碼，而是使用剛創建的資料庫的密碼（下圖有誤，redis的host保持127.0.0.1即可）

• dev和pro的不同之處主要是MySQL的配置，

  • pro中需要按照服務器的IP和資料庫配置來填寫，可在application.yml檔案中修改active指向pro，來測驗是否能夠成功連接服務器中的資料庫

2.2 打包

• 修改application.yml檔案中的active:pro，然后執行maven clean，清除本地測驗時生成的jar包
• 執行maven package，后端專案打包完成

2.3 上傳到服務器

• 找到專案路徑下打包出的檔案 target，找到target下的打包檔案，后綴名是 .jar，即可運行的jar包，然后使用寶塔將其從本地路徑中上傳到服務器，路徑可以為 /www/wwwroot/project_name，末尾的project_name檔案夾可按照自己需求新建

  PS：/www/wwwroot路徑是寶塔默認建站目錄，放到此處便于查找

  

2.4 后端專案服務器配置

• 只需確保jdk安裝成功，且jar包上傳成功即可

2.5 運行測驗

2.5.1 運行后端jar包

在Linux系統下有多種運行jar包的方式，建議使用方法d，保留專案運行日志，日志檔案會生成到專案同級路徑下，

• a.當前終端被鎖定，可按CTRL + C打斷程式運行，或關閉視窗退出程式

  java -jar xxx.jar  
  

• b.當前終端不被鎖定，但是當視窗關閉時，程式中止運行

  java -jar xxx.jar &
  

• c.不掛斷運行命令,當賬戶退出或終端關閉時,程式仍然運行

  nohup java -jar xxxx.jar &
  

• d.指定輸出日志檔案，不掛斷運行命令，退出或終端關閉時程式仍然運行

  nohup java -jar xxx.jar > project.log
  

2.5.2 查看日志檔案

• 建議使用動態查看命令，查看實時更新的日志，打開一個新的終端，輸入如下命令：

  tail -f project.log
  

2.5.2 停止運行后端jar包

• 若使用2.5.1種的方法a、b，直接關閉終端即可

• 若使用2.5.1種的方法c、d，需要查找后端使用埠（這個埠號是填寫在SpringBoot專案的application.yml檔案中server項中的）占用的行程號，然后關閉行程，即可停掉jar包的運行，命令如下：

  netstat -tunlp | grep 埠號
  
  // 得到行程號
  
  kill -9 行程號
  

• 操作如圖，8081是我的后端專案占用的埠號，13061是行程ID
  

3、Vue專案配置

3.1 配置修改

• axios.js檔案的URL配置為 服務器公網IP:埠號

• axios.defaults.baseURL = "http://服務器公網IP:埠號"
  // axios.defaults.baseURL = "http://localhost:埠號" 本地使用localhost
  

3.2 打包

• 打包命令

  npm run build
  

• 打包后的檔案名為dist，可在專案路徑下查看

3.3 上傳到服務器

• 通過寶塔可直接上傳dist檔案夾，如果沒有寶塔，可以將dist檔案夾壓縮后上傳到服務器
• 建議上傳到與2.3節中提到的后端專案上傳路徑中，相同一個需求的前后端專案放到同一個檔案夾中便于查找：/www/wwwroot/project_name

3.4 前端專案服務器配置

• 需要對服務器的Nginx進行配置，以滿足前端專案的運行

• 通過寶塔安裝Nginx，其默認的組態檔會被備份為 nginx.conf.default，且生成一份新的組態檔 nginx.conf，

• 如果是使用寶塔安裝的Nginx，則檔案存放路徑為/www/server/nginx/conf

• 首先從 nginx.conf.default 中復制一份以 server 為標簽的代碼，如下圖：

• 真正需要修改檔案的是 nginx.conf，此檔案可以通過寶塔界面的“軟體商店”—“Nginx”—“設定”—“配置修改”來修改，在此處修改時如果修改的格式有誤等錯誤會被提示無法保存
  

• 將上一步復制的server代碼段復制到檔案中的 include 標簽上方（組態檔中會有一個已經存在的server 標簽，不需要覆寫，順著它粘貼代碼段A即可，不會沖突）

• 洗掉代碼段中所有注釋，保留四個未被注釋的標簽（listen、server_name、location / 、error_page）即可

• 修改上述四個標簽

  • (1)listen標簽后填寫前端專案要使用的埠號

  • (2)server_name標簽填寫服務器公網IP

  • (3)location標簽的root標簽填寫vue專案的打包檔案dist的路徑

  • (4)location標簽的添加一行代碼標簽防止重繪出現404

    try_files $uri $uri/ /index.html; 
    

  • (5)error_page標簽不需要變動
    

• 多載Nginx配置并重新啟動即可，在寶塔的界面操作很方便

3.5 運行測驗

• 確保已經多載Nginx配置并重新啟動
• 在瀏覽器輸入服務器公網IP:埠，查看是否能夠進入vue專案首頁

4、部署到服務器的前后端聯調測驗

4.1 運行后端專案

• nohup java -jar xxx.jar > project.log

4.2 運行前端專案

• 啟動Nginx

4.3 訪問與功能測驗

• 瀏覽器輸入服務器公網IP:埠，測驗能否進入專案
• 測驗專案功能是否完整可用
• 測驗是否有功能與本地測驗效果不符

5、后續部署Docker（待完成）

6、可能存在的問題：

1、打包失敗

• 保錯：

  Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.22.2:test (default-test) on project XXX: There are test failures.

  Please refer to D:\IDEAWorkSpace\vueblog\target\surefire-reports for the individual test results.
  Please refer to dump files (if any exist) [date].dump, [date]-jvmRun[N].dump and [date].dumpstream.

• 解決

  使用命令，跳過測驗打包

  mvn clean package -Dmaven.test.skip=true