手动部署

去年的这个时候心血来潮搭建了个人博客，是基于 SpringBoot 和 Vue2 的，但是仅仅搭起来一个架子，前后端也简单地对接了下，里面的具体内容全是空的，数据库什么的根本没有设计。今年春天闲来无事，忽然想起这回事来，一时手痒，便打算继续搞搞。于是，mysql 简单地建了几张表，写了几个 CRUD 的接口，另附上几个页面，便想服务器上先部署一个版本。虽说当前会一些相关的操作，但整个部署过程对于我来讲，依旧不算十分熟悉，于是在翻阅了很多资料后，终于成功地部署了，期间也遇到了很多问题，在这里做一下总结。

一、准备环境

部署项目需要的环境很简单：后端需要 jdk1.8 来运行 jar 包，前端需要 nginx 服务器来监听端口，仅此而已。

由于这两个服务都比较基础，具体的安装过程网络上有很多，这里就简单描述一下。

1、jdk1.8

（1）去官网下载对应的安装包，上传到服务器，并解压至自定义目录（一般是 /usr/local）

tar -xzvf jdk-8u291-linux-x64.tar.gz -C /usr/local/

（2）配置环境变量。在 profile 文件中添加四个变量。

vim /etc/profile

# 文件BEGIN
export JAVA_HOME=/usr/local/jdk1.8.0_291
export JRE_HOME=$JAVA_HOME/jre
export CLASSPATH=.:$JAVA_HOME/lib:$JRE_HOME/lib
export PATH=/bin:/usr/bin:$PATH:$JAVA_HOME/bin:$PATH
# 文件END

（3）刷新配置

source /etc/profile

（4）查看 java 版本验证是否安装成功

java -version

2、nginx

先放上个 nginx 官方文档（）

（1）首先，安装 nginx 的乱七八糟一堆依赖。

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

（2）获得 nginx 安装包，解压到自定义目录（一般为 /usr/local）

tar -xvf nginx-1.20.0.tar.gz

（3）进入到解压好的 nginx 目录下，依次执行三条指令。

cd nginx-1.20.0

./configure
make
make install

（4）进入到 nginx 的 sbin 中，运行启动脚本，运行成功。

cd /usr/local/nginx/sbin
./nginx

二、打包项目

由于项目采用前后端分离的模式进行开发，因此，要分别对前后端进行打包。

1、 后端 SpringBoot

首先，检查一下是否在 pom.xml 中引入 maven 打包插件，即是否存在以下的依赖。spring-boot-maven-plugin 默认将项目打包成 jar 包，打包成功后可在项目目录下的 target 文件夹下查看。

<build>
    <plugins>
        <!-- maven打包插件 -->
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

然后，确认后端API的端口为 9000，这个端口号很重要如下图所示。

在 IDE 右侧 maven 菜单栏中选择 */Lifecycle/package 工具进行打包，如下图。

或者在终端中运行打包命令，-DskipTests跳过单元测试模块，在项目根目录下运行此命令，会在target目录下生成jar包，jar包命名为：项目名-版本号-SNAPSHOT.jar。

mvn clean package -DskipTests

打包成功后，将 jar 包上传至服务器指定目录下（例如 /opt/hong/blog/blog-backend）。

2、前端 Vue2

打开 Vue 项目，首先需要查看一下对接后端接口的反向代理，可以确认对接了后端 9000 端口，vue.config.js 文件如图所示。

在终端执行打包命令，此时将在根目录下获得 dist 目录，这便是 Vue 打包制品。

yarn build

打包成功后，将 dist 整个目录上传至服务器指定目录下（例如 /opt/hong/blog/blog-frontend）。 至此，前后端均已打包完毕，当前服务器的目录如下（由于项目正在运行，目录树有所出入，仅做参考）。

三、配置相关服务

为了让其他人能够通过相应的端口号访问到前端服务，首先要配置 nginx 代理。

1、配置 nginx 代理

进入到 nginx 目录下的 conf/nginx.conf 文件（注：可以更改usr目录下的配置，也可以更改全局配置），找到 http 代码段，做如下的更改：

http {
          
   
    # 省去不必要的配置代码
    server {
          
   
        listen       8895; # 本服务监听的端口号
        server_name  localhost; # 主机名称
        
        location / {
          
   
            # root 规定了通过监听的端口号访问的文件目录
            root   /opt/hong/blog/blog-frontend/prod;
            # index 规定了该目录下指定哪个文件
            index  index.html index.htm;
            # 配置资源重新跳转，防止刷新后页面丢失
            try_files $uri $uri/ /index.html;
        }

        # 配置后端接口的跨域代理
        # 对于路径为 "dev-api 的接口，帮助他跳转到指定的地址
        location /dev-api/ {
          
   
            # 本机上运行的后端接口
            proxy_pass http://localhost:9000/api/v1/; 	
        }
      
        # 默认配置
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
          
   
            root   html;
        }
    }
}

接下来重新启动 nginx，进入 nginx 目录下的 sbin，重启 nginx。

./nginx -s reload