部署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、部署成功

输入部署的服务器地址和端口地址，若能看到主页面说明前端部署成功！若能登录说明后端部署成功！