SpringBoot前后端分离项目在服务器上的部署过程详解

浅浅的花香味﹌ 2023-10-04 20:18 62阅读 0赞

**目录**

前言

一，工具准备

1.1 jdk1.8的安装

1.1.1，下载并解压jdk安装包

1.1.2，修改配置文件并配置java环境

1.1.3，刷新配置并查看

1.2 nginx的安装

1.2.1，安装依赖和相关库

1.2.2，下载nginx安装包并解压

1.2.3，配置和安装

1.2.4，启动nginx

1.2.5，查看nginx

1.2.6，停止和重启nginx

1.3 docker安装

二，利用Docker拉取mysql8.0镜像并运行

三，后端打包流程

3.1，在Idea中将项目通过打包命令mvn clean package -DskipTests进行打包。

3.2，将项目的jar包上传至服务器个人指定的文件夹

3.3 ，设置后台启动

四，前端打包流程

4.1，打包vue项目

4.2， 启动nginx并配置反向代理

五，测试

六，彩蛋

## 前言 ##

闲暇之余，抽空对前后端分离项目在服务器上的部署过程做个大致梳理。首先你要准备一个服务器，阿里云，腾讯云皆可。另外在防火墙上放行tomcat，mysql，redis……等等根据自己技术用到的访问端口号，阿里云还需要在安全组上设置一些放行策略等等，这里不做详细说明。 **文末有彩蛋哦~**

## 一，工具准备 ##

### 1.1 jdk1.8的安装 ###

#### 1.1.1，下载并解压jdk安装包 ####

> tar -zxvf jdk-su291-linux-x64.tar-gz

#### 1.1.2，修改配置文件并配置java环境 ####

vim /etc/profile
    export JAVA_HOME=/usr/local/jdk1.8
    export CLASSPATH=$:CLASSPATH:$JAVA_HOME/ lib/export PATH=$PATH:$JAVA_HOME/bin

#### 1.1.3，刷新配置并查看 ####

source /etc/profile
    [root@VM-12-4-centos ~]# java -version
    java version "1.8.0_121"
    Java(TM) SE Runtime Environment (build 1.8.0_121-b13)
    Java HotSpot(TM) 64-Bit Server VM (build 25.121-b13, mixed mode)

### 1.2 nginx的安装 ###

#### 1.2.1，安装依赖和相关库 ####

[root@localhost ~]# yum -y install gcc-c++ zlib-devel openssl-devel libtool

#### 1.2.2，下载nginx安装包并解压 ####

[root@localhost~]# cd /usr/local
    [root@localhost local]# wget http: //nginx.org/download/nginx-1.14.0.tar .gz
    [root@localhost local]# tar -zxvf nginx-1.14.0.tar.gz

#### 1.2.3，配置和安装 ####

[ root@localhost local]# cd nginx-1.14.0
    [ root@localhost nginx-1.14.0]# ./configure --prefix=/usr/local/nginx[ root@localhost nginx-1.14.0]# make && make install

#### 1.2.4，启动nginx ####

[root@localhost nginx-1.14.0]# cd ../nginx/sbin[ root@localhost sbin]# ./nginx

#### 1.2.5，查看nginx ####

[ root@localhost nginx]# ps -ef \ grep nginxroot138501 0 17:01 ?
    00:00:00 nginx: master process ./nginx
    nobody1385113850 0 17:01 ?
    oe :00:80 nginx: worker process
    root138791128 0 17:11 pts/000:00:00 grep --color=auto nginx

#### 1.2.6，停止和重启nginx ####

./nginx -s reload
    #重启
    ./ nginx -s stop #关闭

### 1.3 docker安装 ###

Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。在我们部署过程中，可以不使用docker，但是为了方便管理基础架构，因此在这里笔者推荐使用。这里仅简单介绍两种安装方法。

**使用官方安装脚本自动安装**

> curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

当然也可以使用国内的daocloud一键安装命令：

> curl -sSL https://get.daocloud.io/docker | sh

也有人说我想巩固基础自己安装行不行呢？也可以，你吩咐我照做-》

**手动安装**

如果你以前安装过旧版本的Docker呢，请卸载它们以及相关的依赖项

sudo yum remove docker \
                      docker-client \
                      docker-client-latest \
                      docker-common \
                      docker-latest \
                      docker-latest-logrotate \
                      docker-logrotate \
                      docker-engine

然后使用**Docker仓库**安装**Docekr Engine-Community**

**设置Docker仓库**

安装所需的软件包。yum-utils 提供了 yum-config-manager ，并且 device mapper 存储驱动程序需要 device-mapper-persistent-data 和 lvm2。

sudo yum install -y yum-utils \
      device-mapper-persistent-data \
      lvm2

使用以下命令来设置稳定的仓库:

#官方源地址，会比较慢
     sudo yum-config-manager \
        --add-repo \
     https://download.docker.com/linux/centos/docker-ce.repo

因此在这一般推荐国内的阿里云源地址

#阿里云
     sudo yum-config-manager \
        --add-repo \
        http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

**安装 Docker Engine-Community**

安装最新版本的 Docker Engine-Community 和 containerd

sudo yum install docker-ce docker-ce-cli containerd.io docker-compose-plugin

Docker 安装完默认未启动。并且已经创建好 docker 用户组，但该用户组下没有用户。

如果要安装特定版本的 Docker Engine-Community，也可以在存储库中列出可用版本，然后选择并安装：

#列出并排序存储库中可用的版本。按版本号（从高到低）对结果进#行排序
    [root@VM-12-4-centos docker]# yum list docker-ce --showduplicates | sort -r
    Repository epel is listed more than once in the configuration
    This system is not registered with an entitlement server. You can use subscription-manager to register.
                  : subscription-manager
    Loading mirror speeds from cached hostfile
    Loaded plugins: fastestmirror, langpacks, product-id, search-disabled-repos,
    Installed Packages
    docker-ce.x86_64            3:20.10.9-3.el7                    docker-ce-stable 
    docker-ce.x86_64            3:20.10.8-3.el7                    docker-ce-stable 
    docker-ce.x86_64            3:20.10.7-3.el7                    docker-ce-stable 
    docker-ce.x86_64            3:20.10.6-3.el7                    docker-ce-stable 
    ……

通过其完整的软件包名称安装特定版本，该软件包名称是软件包名称（docker-ce）加上版本字符串（第二列），从第一个冒号（:）一直到第一个连字符，并用连字符（-）分隔。例如：docker-ce-18.09.1。

sudo yum install docker-ce-<VERSION_STRING> docker-ce-cli-<VERSION_STRING> containerd.io

然后我们就可以启动Docker了

#启动docker
    systemctl start docker
    #查看运行状态
    systemctl status docker
    #开机自启
    systemctl enable docker

通过运行 hello-world 镜像来验证是否正确安装了 Docker Engine-Community 。

> docker run hello-world

**卸载 docker**

删除安装包：

> yum remove docker-ce

删除镜像、容器、配置文件等内容：

> rm -rf /var/lib/docker

**设置阿里云镜像加速**

sudo mkdir -p /etc/ docker
    sudo tee /etc/docker /daemon.json <<-'EOF'{
    "registry-mirrors": ["https : / / 3n4m4jry.mirror.aliyuncs.com"]}
    #需要自己在阿里云容器镜像服务里找相关地址添加
    EOF
    sudo systemctl daemon-reloadsudo systemctl restart docker

![d971a82e31e7472a8847893835aa4bce.png][]

## 二，利用Docker拉取mysql8.0镜像并运行 ##

首先需要我们在宿主机（服务器）上准备mysql的三个存储信息的文件,并且在conf文件中创建mysql配置文件my.cnf进行配置.

[root@VM-12-4-centos mydata]# mkdir datadir |mkdir log |mkdir conf
    [root@VM-12-4-centos mydata]# ls
    conf  datadir  log
    [root@VM-12-4-centos mydata]# cd conf
    [root@VM-12-4-centos conf]# ls
    [root@VM-12-4-centos conf]# touch my.cnf
    [root@VM-12-4-centos conf]# vim my.cnf
    #配置文件信息
    ~
    [mysqld]
    user=root
    character-set-server=utf8
    default_authentication_plugin=mysql_native_password
    secure_file_priv=/var/lib/mysql
    expire_logs_days=7
    sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION
    max_connections=1000
    
    [client]
    default-character-set=utf8
    
    [mysql]
    default-character-set=utf8
    ~
    ~
    ~

利用docker拉去镜像并运行。这里需要注意的是：如果没有上面的配置文件配置，就会导致mysql的容器运行失败，容器状态会一直为**Exited (1)**，并且手动启动不了！

[root@VM-12-4-centos conf]# docker run --name mysql8.0 -p 3306:3306 -v /www/server/mysql/mydata/datadir:/var/lib/mysql -v /www/server/mysql/mydata/log:/var/log/mysql -v /www/server/mysql/mydata/conf/my.cnf:/etc/mysql/my.cnf -e MYSQL_ROOT_PASSWORD=123456 -d mysql:8.0
    aa0d42f95aa28a2f312dc601e62306249524b6229326faf65f492f45ca1a6393

**参数解释**:

*  \--name容器名字
 *  \-p 3306:3306,物理机端口:容器内部端口
 *  \-e运行参数初始化 root 用户的密码
 *  \-d后台运行mysq8.0镜像名字加标签
 *  \-v目录挂载

\-v /www/server/mysql/mydata/log:/var/log/mysql表示将docker里面mysqI容器的/var/log/mysql目录拄载到宿主linux系统/mydatalmysql/log目录下，这样宿主机目录和容器内的目录就互通.可以互相传输文件.

连接到容器并进入mysql。

[root@VM-12-4-centos conf]# docker ps
    CONTAINER ID   IMAGE       COMMAND                  CREATED         STATUS         PORTS                                                  NAMES
    aa0d42f95aa2   mysql:8.0   "docker-entrypoint.s…"   5 seconds ago   Up 4 seconds   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp   mysql8.0
    [root@VM-12-4-centos conf]# docker exec -it aa0d42f95aa2 /bin/bash
    bash-4.4# mysql -u root -p123456
    mysql: [Warning] Using a password on the command line interface can be insecure.
    Welcome to the MySQL monitor.  Commands end with ; or \g.
    Your MySQL connection id is 8
    Server version: 8.0.31 MySQL Community Server - GPL
    
    Copyright (c) 2000, 2022, Oracle and/or its affiliates.
    
    Oracle is a registered trademark of Oracle Corporation and/or its
    affiliates. Other names may be trademarks of their respective
    owners.
    
    Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
    
    mysql>

这样我们就可以在Navicat Premium 上连接我们远程服务器上的mysql了。然后将本地数据的sql文件在Navicat Premium直接导入，这样服务器上的数据库就有了。

![e6cd6404bb444e47add78c68f39ed039.png][]

## 三，后端打包流程 ##

### 3.1，在Idea中将项目通过打包命令**mvn clean package -DskipTests**进行打包。 ###

![85645150c1ee48ff9c892dca85acdef6.png][]

打包完成后我们可以在本地将jar包运行试试，看看有没有bug出现。

C:\Users\young\Desktop\music_cloud\music\target>java -jar music-0.0.1-SNAPSHOT.jar
    
      .   ____          _            __ _ _
     /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
    ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
     \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
      '  |____| .__|_| |_|_| |_\__, | / / / /
     =========|_|==============|___/=/_/_/_/
     :: Spring Boot ::                (v2.6.4)
     ……
     2022-12-09 13:05:56.245  INFO 15964 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8081 (http) with context path ''
    2022-12-09 13:05:56.612  INFO 15964 --- [           main] com.yy.MusicApplication                  : Started MusicApplication in 5.387 seconds (JVM running for 6.07)
    2022-12-09 13:06:27.659  INFO 15964 --- [nio-8081-exec-2] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
    2022-12-09 13:06:27.659  INFO 15964 --- [nio-8081-exec-2] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
    2022-12-09 13:06:27.662  INFO 15964 --- [nio-8081-exec-2] o.s.web.servlet.DispatcherServlet        : Completed initialization in 2 ms

出现预期的端口号后，就可以在本地浏览器访问一下swagger界面（后端集成swagger后），如果正常，证明jar包正常。

![00f65585b33146e886eddd3bc2a417f6.png][]

### 3.2，将项目的jar包上传至服务器个人指定的文件夹 ###

并给项目jar包授予一个权限（并不强制）

[root@VM-12-4-centos springboot]# ls
    img  music-0.0.1-SNAPSHOT.jar
    [root@VM-12-4-centos springboot]# chmod 777 music-0.0.1-SNAPSHOT.jar
    [root@VM-12-4-centos springboot]# ls
    img  music-0.0.1-SNAPSHOT.jar

通过相应的方法**java -jar \*.jar**运行jar包，运行成功且能访问对应接口，则证明服务器上的数据库与后端jar包对应的信息无误。

[root@VM-12-4-centos springboot]# java -jar music-0.0.1-SNAPSHOT.jar
    
      .   ____          _            __ _ _
     /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
    ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
     \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
      '  |____| .__|_| |_|_| |_\__, | / / / /
     =========|_|==============|___/=/_/_/_/
     :: Spring Boot ::                (v2.6.4)
    
    2022-12-09 13:30:20.498  INFO 7527 --- [           main] com.yy.MusicApplication                  : Starting MusicApplication v0.0.1-SNAPSHOT using Java 1.8.0_121 on VM-12-4-centos with PID 7527 (/www/server/myproject/springboot/music-0.0.1-SNAPSHOT.jar started by root in /www/server/myproject/springboot)
    ……
     _ _   |_  _ _|_. ___ _ |    _ 
    | | |\/|_)(_| | |_\  |_)||_|_\ 
         /               |         
                            3.4.1 
    false
    2022-12-09 13:30:25.139  INFO 7527 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8081 (http) with context path ''
    2022-12-09 13:30:25.697  INFO 7527 --- [           main] com.yy.MusicApplication                  : Started MusicApplication in 5.854 seconds (JVM running for 6.551)

![62b450ba0ec346a989ddfe7a4c42ff8a.png][]

需要注意的是，如果你像我一样一些静态资源，比如头像图片，音乐文件……放在项目外面时，需要向静态文件一并放入服务器同一文件夹，目录对应一致。2

![43e474682f5a4ee58594a74075ef57b9.png][]

### 3.3，设置后台启动 ###

通过命令设置即可

> nohup java -jar music-0.0.1-SNAPSHOT.jar &

如果需要查看运行的进程呢，可以通过**ps -ef|grep java**进行查看。

root     16730  1974  0 14:02 pts/0    00:00:00 grep --color=auto java

需要关闭运行时，通过**kill 9 \[进程号\]**即可。

## 四，前端打包流程 ##

由于前端是Vue项目，并且在解决跨域问题时设置过后端代理地址，本地情况下一般都是localhost:\[后端端口\]，在上传至服务器的时候需要将ip地址改为服务器ip地址。

### 4.1，打包vue项目 ###

通过**npm run build**对前端项目进行打包，此时目录中就会生成一个dist文件。

![d5e6876933be4116950b47ca3fa7df40.png][]

将dist文件内的所有信息上传到服务器上指定的文件夹内。

### 4.2，启动nginx并配置反向代理 ###

找到nginx安装目录内的sbin目录，通过**./nginx**启动，如果发现端口号被占用启动失败，干掉对应的进程重新启动即可。然后在本地访问，看nginx服务是否启动正常。

[root@VM-12-4-centos nginx]# cd sbin/
    [root@VM-12-4-centos sbin]# ls
    nginx
    [root@VM-12-4-centos sbin]# ./nginx
    nginx: [emerg] bind() to 0.0.0.0:888 failed (98: Address already in use)
    nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
    nginx: [emerg] bind() to 0.0.0.0:888 failed (98: Address already in use)
    nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
    nginx: [emerg] bind() to 0.0.0.0:888 failed (98: Address already in use)
    nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
    nginx: [emerg] bind() to 0.0.0.0:888 failed (98: Address already in use)
    nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
    nginx: [emerg] bind() to 0.0.0.0:888 failed (98: Address already in use)
    nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
    nginx: [emerg] still could not bind()
    #端口被占用后直接干掉80端口
    [root@VM-12-4-centos sbin]# fuser -k 80/tcp
    80/tcp:              16603 16604 19388
    [root@VM-12-4-centos sbin]# ./nginx
    #查看进程情况
    [root@VM-12-4-centos sbin]# ps -ef |grep nginx
    www      16605     1  0 Jul26 ?        00:00:51 nginx: cache manager process
    root     22675     1  0 14:23 ?        00:00:00 nginx: master process ./nginx
    www      22676 22675  0 14:23 ?        00:00:00 nginx: worker process
    www      22677 22675  0 14:23 ?        00:00:00 nginx: worker process
    www      22678 22675  0 14:23 ?        00:00:00 nginx: cache manager process
    www      22679 22675  0 14:23 ?        00:00:00 nginx: cache loader process
    root     22826  1974  0 14:23 pts/0    00:00:00 grep --color=auto nginx

进入nginx的conf目录，在nginx.conf中设置我们vue中dist文件目录所在地，由于我把dist的文件都传到了新建的client目录中，所以设置的时client目录所在文件地址。

server
        {
            listen 80;
            server_name phpmyadmin;
            index index.html index.htm index.php;
            root  /www/server/phpmyadmin;
                location ~ /tmp/ {
                    return 403;
                }
            location / {
            #指定dist文件内容所在地
                root /www/server/myproject/springboot/client;
                index index.html index.html;
                #解决刷新回404找不到页面的问题
                try_files $uri $uri/ /index.html;
            }
            #error_page   404   /404.html;
            include enable-php.conf;
    
            location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
            {
                expires      30d;
            }
    
            location ~ .*\.(js|css)?$
            {
                expires      12h;
            }
     location ~ /\.
            {
                deny all;
            }
    
            access_log  /www/wwwlogs/access.log;
        }
    include /www/server/panel/vhost/nginx/*.conf;
    }

配置完成后，我们需要重启nginx。

[root@VM-12-4-centos sbin]# ./nginx -s reload

自此，我们部署的任务全部完成。

## 五，测试 ##

在浏览器上输入我们的服务器ip查看项目部署效果如何：

![75607a7893ea431495abbc49644e652f.png][]

![d311b942d6744e989357d9d555abdc6a.png][]

![a7779a93c4a24527a7f8fbe27f527387.png][]

功能完全ok！

Docker学的好的小伙伴也可以不用这样分别打包部署到服务器上，也可以通过dockerfile直接将前后端的项目打包成docker镜像，然后运行容器就行了，实现了更轻量级的虚拟化，可以提高部署效率，更方便集成哦~这里不多做说明了。

## 六，彩蛋 ##

一个部署过程敲那么多命令行非常麻烦？有没有更简单的方法呢？

安排！接下来来介绍一种可视化部署的方法，懒人备用，照着说明书就能部署。

[宝塔面板][Link 1]，我们可以在Centos系统中安装宝塔脚本来访问宝塔面板。

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

除此以外，还提供各种服务管理手册可供参考。进入宝塔面板后可以看到各种服务器监控以及可视化操作面板。

![e34a5cc2bd8f47edbf58abfc90400a3e.png][]

管理数据库，监控记录服务器状态文件管理，上传下载都非常方便。对于那些因安装mysql，redis，MongoDB等数据库苦恼的小伙伴都可以在软件商店一键安装。当然远程访问的话还是要自己配置，开放端口之类的。

回到正题，这个东西最关键的点就是部署方便。支持各种部署：PHP、JAVA、Node、Go等等，都可以在这里进行快捷部署。java也支持springboot项目，以及前后端分离项目部署。非常节约部署时间。

![fee4e37e0a544fa0b09dfbe62b8c4137.png][] 当然，这里并不推荐小白使用，因为“基础不牢，地动山摇”，还是要先好好掌握Linux命令的使用哈，等熟练了在使用这个东西摸鱼也不迟~

[d971a82e31e7472a8847893835aa4bce.png]: https://img-blog.csdnimg.cn/d971a82e31e7472a8847893835aa4bce.png
[e6cd6404bb444e47add78c68f39ed039.png]: https://img-blog.csdnimg.cn/e6cd6404bb444e47add78c68f39ed039.png
[85645150c1ee48ff9c892dca85acdef6.png]: https://img-blog.csdnimg.cn/85645150c1ee48ff9c892dca85acdef6.png
[00f65585b33146e886eddd3bc2a417f6.png]: https://img-blog.csdnimg.cn/00f65585b33146e886eddd3bc2a417f6.png
[62b450ba0ec346a989ddfe7a4c42ff8a.png]: https://img-blog.csdnimg.cn/62b450ba0ec346a989ddfe7a4c42ff8a.png
[43e474682f5a4ee58594a74075ef57b9.png]: https://img-blog.csdnimg.cn/43e474682f5a4ee58594a74075ef57b9.png
[d5e6876933be4116950b47ca3fa7df40.png]: https://img-blog.csdnimg.cn/d5e6876933be4116950b47ca3fa7df40.png
[75607a7893ea431495abbc49644e652f.png]: https://img-blog.csdnimg.cn/75607a7893ea431495abbc49644e652f.png
[d311b942d6744e989357d9d555abdc6a.png]: https://img-blog.csdnimg.cn/d311b942d6744e989357d9d555abdc6a.png
[a7779a93c4a24527a7f8fbe27f527387.png]: https://img-blog.csdnimg.cn/a7779a93c4a24527a7f8fbe27f527387.png
[Link 1]: https://www.bt.cn/btcode.html
[e34a5cc2bd8f47edbf58abfc90400a3e.png]: https://img-blog.csdnimg.cn/e34a5cc2bd8f47edbf58abfc90400a3e.png
[fee4e37e0a544fa0b09dfbe62b8c4137.png]: https://img-blog.csdnimg.cn/fee4e37e0a544fa0b09dfbe62b8c4137.png