掘金后端 ( ) • 2024-03-29 15:35

一文学会如何手动部署前后端分离(SpringBoot+Vue.js)项目

theme: cyanosis

原创不易，转载烦请注明出处😘

作为一名开发人员，避免不了经常要与服务器打交道，如：查看服务运行状态，查看日志等等。同时，掌握手动部署的流程也是很有必要的。本文主要是基于SpringBoot + Vue.js的前后端分离项目，针对部署流程进行大致的演示，目的在于对手动部署流程有一个大概了解。

1. 准备工作

1.1 部署服务器的信息

首先要明确部署目标服务器的基本信息，包括：服务器IP，用户名以及密码。明确这部分信息主要用于远程连接服务器后进行相应操作。

1.2 必备软件

XShell/FinalShell

用途：用于远程连接服务器，通过Linux指令对Linux服务器进行操作

Xftp

用途：是一款文件目录可视化软件，可直观查看Linux服务器的文件目录结构。

IDEA

用于打包后端代码

Visual Studio Code

用于打包前端代码

Navicat

用途：用于管理数据库

2. 部署概述

2.1 部署是什么

把写好的程序打包丢到服务器上，在服务器上启动。"丢"的这个过程就叫做部署。

2.2 部署目录含义介绍

针对于一个项目来说，一般我们要定义目录存放不同的数据，部署目录可根据自身情况去进行自定义。以下是一个部署目录的例子。

目录名称存放内容 /bin 存放后端服务的启动停止脚本，如：.sh文件/.bat文件等 /conf 存放后端服务相关的配置文件，如：日志配置文件等 /data 存放程序运行过程中产生的数据 /lib 存放后端服务打好的包 /logs 存放程序运行过程中产生的日志 /ocrweb 存放前端服务打好的包

2.3 部署流程概述

概括而言，部署前后端可以概括为以下两个流程：

后端： 打包 --> 将打好的包移动目标目录下 --> 启动
前端： 打包 -->将打好的包移动到目标目录下 --> Nginx配置

总结来看，可以分为四步：

利用可视化软件（如：Xftp）远程连接服务器，在Linux系统下创建相关目录，用于存放相关资源；
使用IDEA打包后端程序，将包放到相应目录下，使用XShell连接服务器，通过Linux指令部署启动后端程序，测试后端程序是否启动成功；
使用Visual Studio Code 打包前端程序，将包放到相应目录下，配置Nginx文件，测试前端资源能否正常显示；
打开系统页面，测试系统接口能否正常使用。

2.4 部署前置工作

2.4.1 服务器上安装必备软件

JDK
Maven
MySQL
Redis
Nacos
Nginx
...

(以上软件如何在Linux系统下进行安装不是本文重点，所以这部分内容略过)

2.4.2 创建部署目录

使用Xftp访问服务器中的目录，建立部署目录。这里我们需要建立的就是六个目录，分别为 /ocrweb，/logs，/lib，/data，/conf，/bin

3. 后端部署

3.1 后端技术栈

语言：Java
框架：Spring Cloud，Spring Boot
数据库：MySQL
中间件：Redis（缓存），Nacos（配置中心 & 服务注册中心）

3.2 后端打包流程

3.2.1 修改配置

需要注意的是，本地运行和服务器上运行的环境是不同的，所以在部署前，需要先修改相关配置。

需要修改的配置信息针对的是：数据库，Redis及其他中间件...

针对于本系统而言，本系统采用的是Nacos组件作为配置中心，所以我们首先需要做的是：在Nacos添加相关配置。

本项目主要有三个配置文件：

application.yml 是用户级资源配置项;
bootstrap.yml 是系统级资源配置项;
logback-spring.xml 是日志相关配置

这里我们需要修改的是bootstrap.yml 与 logback-spring.xml。

【注】配置文件的加载顺序优先级由高到低为：bootstrap.yml > application.yml

针对于logback-spring.xml，需要修改的部分是日志的输出路径。搜索日志文件中的"path"关键字，找到对应设置，修改为目标路径。

针对于bootstrap.yml，需要修改的是数据库与Redis的配置，以下是bootstrap.yml包含的信息。

    【bootstrap.yml --> 修改前】
    # 服务名称
    spring:
      application:
        name: xxx
      cloud:
        nacos:
        # 服务注册发现
          discovery:
            # nacos地址
            server-addr: 【根据详细情况填写】
          # 相关配置
          config:
            server-addr: ${spring.cloud.nacos.discovery.server-addr}
           # 数据库配置
             extension-configs[0]:
              data-id: database-base.yaml
              group: DEFAULT_GROUP
              refresh: true
            # Redis配置
            extension-configs[1]:
              data-id: redis-base.yaml
              group: DEFAULT_GROUP
              refresh: true

可以看到bootstrap.yml文件中，没有详细的数据库连接信息或Redis连接信息，这些信息都在Nacos中配置进行统一管理，所以，如果要修改bootstrap.yml中的配置，我们首先要到Nacos中找到对应的配置，修改相关配置后，再修改bootstrap.yml中 data-id 的值。【以database-base为例】

按照相同的步骤，修改Redis的相关配置信息。

【bootstrap.yml --> 修改的信息】
   # 数据库配置
    extension-configs[0]:
     data-id: database-base-test.yaml
     group: DEFAULT_GROUP
     refresh: true
    # Redis配置
    extension-configs[1]:
      data-id: redis-base-test.yaml
      group: DEFAULT_GROUP
      refresh: true

3.2.2 打包后端应用

针对本项目，后端打包使用的是maven工具。打开IDEA，点击右侧的 m图标。

打包成功的标志是对应服务的目录下生成了target目录，/target目录下有对应服务的jar包。

3.3 后端部署流程

打开Xftp，进入到中创建好的目录。

首先进入/lib目录，将打包好的服务对应的jar包放入/lib目录中。

进入/conf目录，将服务对应的日志配置文件放入/conf目录中。

打开Xshell，进入/lib目录下，使用命令测试下后端服务能否正常启动。


 java -jar authmanage.jar --server.port=8902 --spring.cloud.nacos.discovery.server-addr=xxx&
【注】
 --server.port=xxxx，用于指定后端服务运行的端口号
 --spring.cloud.nacos.discovery.server-addr=xxxx，用于指定Nacos的地址
 &：表示终端窗口被关闭是程序才终止运行

启动后，可以使用lsof -i:8902 命令用于测试是否启动成功，如下图所示代表启动成功。

如果启动成功后，可以在浏览器中测试是否启动成功。

【注】nohup java -jar指令与 java -jar指令的区别

java - jar... 这个命令在终端关闭时，服务会自动停止。
nohup java -jar XXX.jar & 部分，表示不挂断运行命令,当账户退出或终端关闭时,程序仍然运行。该作业的所有输出被重定向到nohup.out的文件中。

4. 前端部署

4.1 前端技术栈

框架：Vue.js

4.2 前端打包流程

使用命令 npm install 安装相关依赖；
成功安装依赖后，使用 npm run server命令确认前端服务能否正常启动；
前端服务能够正常启动，则使用 npm run build 命令对前端服务进行打包操作，打包成功后，会在对应服务目录下生成一个dist文件夹，这个dist文件夹就是前端服务打好的包。

dist文件夹内包含static文件夹和index.html

4.3 前端部署流程

首先，进入/ocrweb目录下，将前端打包好目录下的内容放入/ocrweb目录下

进入/usr/local/nginx/conf/conf.d，新建auth\_new\.conf，用于对Nginx进行配置。

配置文件如下，具体针对Nginx情况配置

server {
        
    listen       8088;
    server_name  localhost;
              

    location /  {
    root /home/xxx/orcweb/;
        index index.html;
    try_files $uri $uri/ /index.html;
    expires 3d; 
    }

    location /index.html {
    add_header Cache-Control "no-cache, no-store";
    root /home/xxx/orcweb/;
   }
      
    location ^~  /api/ {
     proxy_pass http://127.0.0.1:8901/;
     add_header 'Access-Control-Allow-Origin' '*';
     add_header 'Access-Control-Allow-Method' 'GET,POST,DELETE,PUT';
     add_header 'Access-Control-Allow-Header' 'Content-Type,*';
         proxy_redirect   off;
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    } 
}

修改配置文件后使用XShell，进入/usr/local/nginx/sbin目录，执行 ./nginx 命令。

启动后可以执行 netstat -lnt | grep 8088 命令，查看nginx是否启动成功，如果成功，则会如下所示：

如果启动未成功，可以进入/sbin目录，使用 ./nginx -s reload 命令重新启动nginx。./nginx -s reload代表热配置，即不停止服务完成配置文件的更新。

可以使用 ps -ef|grep nginx 命令来查看nginx服务是否启动，如果启动，则如下所示：

浏览器访问网址：http://ip:8088/，能够成功访问前端资源代表配置成功。

登录测试接口，如果能够正常登录，代表Nginx配置后端接口相关正确。

可能遇到的问题

部署后可能会有无法访问的情况：这种情况需要使用 netstat -lnt | grep 8088 命令查看Nginx服务是否启动，Nginx配置文件修改后需要重新启动才可以生效。

Nginx 404 / Whitelabel Error Page

这种情况是无法找到前端对应资源导致的，需要检查下Nginx配置文件中映射的前端资源的地址是否正确，以及需要检查/ocrweb下的前端包，必须是dist中的内容