部署web專案到服務器-Jetlinks物聯網平臺部署

本文為配置一個前后端分離web專案的的全程序，專案實體為Jetlinks物聯網平臺，由于是第一次的部署，程序中遇到不少小坑，所以重新整理供自己和后來人參考和學習，包括所有步驟操作與程序中可能報錯的解決方案，

這里再明確一下需求：讓專案運行在服務器，別的電腦通過網址可以訪問到，

服務器部署所需的虛擬機容器/遠程連接工具：MobaXterm、VMware、Xshell、FinalShell等，

這里使用的是MobaXterm，

1、遠程連接服務器

注意：由于是root登錄，所以是最高權限，注意不要碰root里面的任何檔案（小白最好遠離這個檔案夾，本人在搭建程序中就作死把.ssh的公鑰刪了，導致私鑰失效，最后只能重置服務器，，，）；若是普通用戶登錄則很多指令都要加sudo，并提供用戶密碼才能獲得權限，

添加session，遠程建立資料庫：

更新系統

$ sudo apt update
$ sudo apt upgrade

2、環境安裝

2.1安裝OpenJDK 8

Java 8，前一個 Java LTS 版本，目前仍被廣泛應用，如果你的應用運行在 Java 8 上，你可以通過 輸入下面的命令，安裝它：

$ sudo apt install openjdk-8-jdk

通過檢查Java版本，驗證安裝是否成功：

$ java -version

輸出如下則安裝成功：

openjdk version "1.8.0_252"
OpenJDK Runtime Environment (build 1.8.0_252-8u252-b09-1ubuntu1-b09)
OpenJDK 64-Bit Server VM (build 25.252-b09, mixed mode)

2.2設定JAVA_HOME環境變數

找到Java安裝路徑：

$ sudo update-alternatives --config java

添加JAVA_HOME（具體路徑參斬訓取的安裝路徑）：

$ JAVA_HOME="/usr/lib/jvm/java-8-openjdk-amd64/jre"

驗證JAVA_HOME環境變數配置正確：

$ echo $JAVA_HOME

可以看到Java安裝路徑：

/usr/lib/jvm/java-8-openjdk-amd64/jre

2.3安裝MAVEN

以下指令安裝maven

$ sudo apt install maven

查看版本，驗證安裝成功：

$ mvn -v

3、后端部署

3.1獲取jetlinks-pro原始碼

社區版開源可自行訪問官方網站下載

JetLinks IoT Platform · GitHub

JetLinks IoT Platform · Gitee

以下指令拉取社區版源代碼：

$ git clone https://github.com/jetlinks/jetlinks-community.git

由于pro版為付費版本，這里省去獲取程序，把獲取的jar包從本地直接拉入home/用戶目錄下，（若使用其他無檔案管理系統的shell工具，可使用WinSCP連接后傳送）

若本地虛擬機遠程連接失敗可能是因為：

1. 防火墻已開啟
2. 未開啟遠程服務
3. 22埠未打開
4. 未安裝遠程服務

具體解決方案參考：https://blog.csdn.net/weixin_51484460/article/details/119047087

3.2編譯打jar包

用maven打jar包，在jetlinks-pro根目錄下：

$ sudo mvn clean package -Dmaven.test.skip=true

3.3安裝docker

安裝docker-compose環境 ：

$ sudo apt install docker-compose

3.4啟動docker資料庫環境

在jetlinks-pro根目錄下，運行如下命令，啟動資料庫docker環境：

$ sudo docker-compose up -d 

本步驟即docker從默認的源拉取鏡像，其運行與源的穩定性與用戶網路狀況有關，若多次失敗，請考慮docker換源，步驟如下：

a. 修改daemon.json組態檔（如果不存在則創建）：

$ sudo vim /etc/docker/daemon.json

如添加USTC與docker中國官方源

“registry-mirrors”: [], #私庫加速器

“insecure-registries”: [], #這個私庫的服務地址

{ 
    "registry-mirrors":[ 
        "http://docker.mirrors.ustc.edu.cn", 
        "http://hub-mirror.c.163.com", 
        "http://registry.docker-cn.com"
     ],
    "insecure-registries":[
         "docker.mirrors.ustc.edu.cn",
         "registry.docker-cn.com" 
    ]
}

b.創建并修改完daemon.json檔案后，重啟docker讓這個檔案生效：

$ sudo service docker restart

當時試了好多次才拉取鏡像成功：

3.5運行jar包

在jetlinks-pro根目錄下，運行如下命令，啟動后端jar包（路徑以實際為準） :

$ sudo java -jar jetlinks-standalone/target/jetlinks-standalone.jar

若未報錯則運行成功：

4、前端部署

4.1獲取前端源代碼

用git拉取前端代碼：

$ git clone https://github.com/jetlinks/jetlinks-ui-antd.git

4.2使用npm打包

安裝npm（若已安裝請忽略）：

$ sudo apt install npm

使用npm打包（命令在專案根目錄下執行）

$ npm install 

$ npm run-script build 

在前端代碼打包的這兩條指令

第一條出現了warnning

查了網上說這個warnning可以忽略，因為是linux系統，一定會報這個警告

第二條報錯如下：

說是JavaScirpt記憶體不夠，打包的時候記憶體溢位了

解決方法：

在后面加上最大記憶體限制

$ npm run-script build --max_old_space_size=4096

打包成功！

4.3復制dist目錄到nginx下

安裝nginx（若已安裝請忽略）：

$ sudo apt install nginx

將打包好的dist檔案復制到nginx代理的路徑：

$ cp -r dist /usr/share/nginx/html

4.4修改nginx配置

修改default組態檔：

$ sudo vim /etc/nginx/sites-available/default

default檔案配置內容如下：

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html/dist;   #這里設定根路徑，若連同dist一起復制到html下的，要加上dist，不然就會出現找不到的情況
    include /etc/nginx/mime.types;
    location / {
        index  index.html;
    }

    location ^~/jetlinks/ {
        proxy_pass http://localhost:8844/;  #修改此地址為后臺服務地址
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_connect_timeout   1;
        proxy_buffering off;
        chunked_transfer_encoding off;
        proxy_cache off;
        proxy_send_timeout      30m;
        proxy_read_timeout      30m;
        client_max_body_size    100m;
    }
}

這里需要注意的就是：

1. root 為訪問網址中根所指向的路徑，一般指向打包好的dist目錄位置；
2. proxy_pass為后端服務地址，按實際情況修改，若在同一臺服務器上部署的一般為localhost；

修改組態檔后記得重啟nginx

而網上很多重啟nginx的教程都是行不通的，因為全部教程（無論是直接重啟還是先查詢、殺死行程再啟動nginx）都需要在nginx的sbin目錄下執行，而新版的nginx已經沒有這個sbin目錄了，

若你的nginx有sbin目錄的話，

可以直接啟動：

1. 進入nginx安裝目錄下的sbin目錄下
2. 執行以下命令：

$ ./nginx -s reload

也可以先殺死行程再啟動：

1. 查看nginx行程號：

$ ps -ef|grep nginx

2. 殺死行程：

$ kill -9 2072

3. 啟動nginx：

$ nginx -t

若無sbin目錄，推薦直接使用以下指令進行重啟：

$ sudo service nginx restart

5、部署成功

輸入部署的服務器地址和埠地址，若能看到主頁面說明前端部署成功！若能登錄說明后端部署成功！