Spring Boot 9 :详细描述Spring Boot + Vue项目部署过程：Centos为例(重点)

一：项目上线：Centos版1.ACterminal端:1.1ssh登录服务器1.2创建acs新用户(第一次创建)1.3给用户acs分配sudo权限1.4配置别名登录(登录acs)1.5配置免密登录（ssh:服务器下acs）1.6将祖传文件传到服务器的acs下[第一次传]（在Acterminal上）1.7 软件安装（Ac端||本地）1.7.1安装`tmux`1.7.2安装`docker`2.本地G

阿斯卡码

3937人浏览 · 2022-08-29 17:22:45

阿斯卡码 · 2022-08-29 17:22:45 发布

如何部署Spring Boot + Vue项目：Centos为例

一：项目上线：Centos版

😊😊😊欢迎来到本博客😊😊😊
📫作者简介：阿斯卡码，专注于研究Java框架/Vue，就读于河南中医药大学，刚刚入门项目开发📫
🏆 CSDN编程比赛奖章获得者/Java领域创作者🏆
🔥计划学习：深入学习Spring全家桶，Vue, mybatis,Mysql等领域。(目前涉及不深入)🔥
👍如果此文还不错的话，还请👍关注、点赞、收藏三连支持👍一下博主~

先总结：

ssh登录步骤：
1.vim config配置别名
2.ssh-copy-id myserver配置免密登录
3.若出错，删除文件，重新ssh-keygen

服务器和Docker创建acs&&赋予sudo：
方法不同，因为镜像,服务器不同（Centos）

先登录服务器下的acs,还得登录Docker下的acs
祖传文件：
第一次：传到服务器下的acs用户
第二次：传到Docker下的acs用户

一：项目上线：Centos版

1.ACterminal端:

1.1ssh登录服务器

ssh root@IP地址
输入密码：XXXX

如出现以下报错：则执行:rm .ssh/known_hosts

acs@2889803f8420:~$ ssh  root@IP
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the ECDSA key sent by the remote host is
SHA256:Lb/lDeBWaAhVm9Xkfpa6dCkjsVcIENwxRiFgsml7NWc.
Please contact your system administrator.
Add correct host key in /home/acs/.ssh/known_hosts to get rid of this message.
Offending ECDSA key in /home/acs/.ssh/known_hosts:4
  remove with:
  ssh-keygen -f "/home/acs/.ssh/known_hosts" -R "119.91.226.142"
ECDSA host key for 119.91.226.142 has changed and you have requested strict checking.
Host key verification failed.

1.2创建acs新用户(第一次创建)

Linux命令列出所有用户:cat /etc/passwd |cut -f 1 -d:

创建用户:adduser acs(用户名)
设置用户密码：passwd acs,然后输入密码
验证：查看用户，多出acs用户，cat /etc/passwd |cut -f 1 -d:

sudo知识：sudo 命令提供了一种机制，它可以在不用分享 root 用户的密码的前提下，为信任的用户提供系统的管理权限。

1.3给用户acs分配sudo权限

先找到/etc/sudoers位置
给文件写入权限：chmod u+w sudoers
修改文件：vim/etc/sudoers
添加：在里面找到root ALL=(ALL) ALL
然后在其下面增加username ALL=(ALL) ALL
配置免密使用sudo命令：

# User privilege specification
root	ALL=(ALL:ALL) ALL
# Members of the admin group may gain root privileges
%admin ALL=(ALL) ALL
# Allow members of group sudo to execute any command
%sudo	ALL=(ALL:ALL) ALL
#下面的user是你的用户名 添加这一行就能免密sudo了
user ALL=(ALL:ALL) NOPASSWD: ALL

将文件的写入属性撤销：chmod u-v sudoers
通过su xx切换回自己的用户名，再使用sudo命令时，就可以使用了

chmod知识：
XXX代表一个数，XXXXXXXXX代表三个数
查看文件的权限：
ll 不包含点开头的文件
ll -a 包括点开头的文件
具体一个文件：ll 文件名

如何查看acs具有sudo权限呢？
执行：sudo cat /etc/sudoers

1.4配置别名登录(登录acs)

vim config
在这里插入图片描述

1.5配置免密登录（ssh:服务器下acs）

自动配置服务器密钥:ssh-copy-id myserver
回车命令后输入密码，为了将.ssh/id_rsa.pub的内容传到目标服务器的~/.ssh/authorized_keys中，若没有此文件，通过命令：ssh-keygen生成。
测试：登录云服务器：ssh myserver1

1.6将祖传文件传到服务器的acs下[第一次传]（在Acterminal上）

配置tmux、vim、bash环境：scp .bashrc .vimrc .tmux.conf myserver1:

1.7 软件安装（Ac端||本地）

sudo yum update 作用:更新软件列表

1.7.1安装`tmux`

安装tmux
- 1.登录自己的服务器，然后安装tmux：

sudo yum update
sudo yum install tmux

在这里插入图片描述
通过tmux命令测试是否安装成功

1.7.2安装`docker`

安装docker
- 1.打开tmux。（养成好习惯，所有工作都在tmux里进行，防止意外关闭终端后，工作进度丢失）
- 2.刷新软件源：sudo yum update
- 2.在云服务器的acs用户下：然后在tmux中根据docker安装教程安装docker即可。
  tmux
  ctrl shift A +shift %分屏
- 3.Centos安装Docker网址
  Centos的Docker安装
- 4.步骤如下：在下面。
- 5.测试：docker --version
- 6.配置docker sudo权限，sudo usermod -aG docker $USER，要不然使用docker所有命令都要sudo
- 7.ctrl + d返回acwing服务器，再次通过ssh命令进入自己服务器，此时docker可以正常使用了。执行完此操作后，需要退出服务器，再重新登录回来，才可以省去sudo权限。

########################设置存储库######################
 sudo yum install -y yum-utils
 
 
 sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
    

#######################安装 Docker 引擎####################
sudo yum update

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

##############################测试##########################
输入docker,有相关用法提示出现---》成功

输入docker status,出现以下错误。原因是，当前用户没有添加到docker用户组
解决办法：
1.输入sudo+命令
2.将当前用户添加到docker用户组：
为了避免每次使用docker命令都需要加上sudo权限，可以将当前用户加入安装中自动创建的docker用户组(可以参考官方文档)：
sudo usermod -aG docker $USER

2.本地Git Bash端

2.1ssh别名登录（ssh:服务器下acs）

Vim config

Host 别名
HostName ip
User 用户名
本地创建密钥，如果以前创建过密钥，跳过此步：ssh-keygen（本地执行过一次ssh-keygen）
自动配置服务器密钥:ssh-copy-id myserver
输入云服务上的密码即可。
测试：登录云服务器：ssh myserver1

在这里插入图片描述

3.Acterminal端:配置docker环境(传送Docker)

配置spring boot的docker环境

返回acwing服务器，进入/var/lib/acwing/docker/images，通过命令：scp django_lesson_1_0.tar 别名:
加载tar文件为docker镜像文件：docker load -i django_lesson_1_0.tar，
通过docker images查看docker镜像
创建spring boot的docker：docker run -p 20000:22 -p 443:443 -p 80:80 -p 3000:3000 -p 3001:3001 -p 3002:3002 -itd --name kob_server django_lesson:1.0
进入容器：docker attach kob_server

此时这个容器才是我们的开发环境，我们还需添加用户、给用户添加sudo权限。

3.1给容器创建用户acs（第二次创建）

添加用户：adduser 用户名，输入两次密码，五次回车，输入Y
添加sudo权限：usermod -aG sudo 用户名
通过命令ctrl + p + ctrl + q挂载容器，注意不是ctrl d(关闭容器)
去腾讯云，开放端口80，443，20000端口

3.1.1ACTerminal配置登录Docker中的acs（ssh:Docker下acs）

1.vim config

Host 别名
HostName ip
User 用户名
Port 20000
2.配置免密登录：ssh-copy-id 别名
3.ssh 别名

3.1.2GitBash(本地)配置登录Docker中的acs（ssh:Docker下acs）

1.vim config

Host 别名
HostName ip
User 用户名
Port 20000
2.配置免密登录：ssh-copy-id 别名
3.ssh 别名

3.2将祖传文件传到docker中acs下【第二次传】（在Acterminal上）

scp .bashrc .vimrc .tmux.conf myserver1_docker1:

4.本地Git Bash操作:配置docker开发环境

在Docker下的acs中,下面的命令是apt-get,因为是ubantu镜像。

4.1 安装、配置mysql

更新软件源；sudo apt-get update
安装：sudo apt-get install mysql-server
启动：sudo service mysql start
登录mysql：sudo mysql -u root
设置root用户的密码：ALTER USER 'root'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'yourpasswd';
创建数据库：create database kob;
- use kob;
- show tables;
创建表
- 在idea中打开数据库，右键kob -> SQL脚本 -> 将DDL生成到剪贴板
- 在docker容器中acs下创建create_table.sql：vim create_table.sql
- 输入命令：:set paste进入粘贴模式
- 按i进入编辑模式，按下shift + insert粘贴内容，:wq保存并退出
  前提要先选择好数据库，use kob;
- 在mysql命令行中输入命令：source /home/acs/create_table.sql
- 创建成功

4.2 安装jdk

命令：sudo apt-get install openjdk-8-jdk
测试：java -version

5.上线后端(重点)

5.1.将代码执行的输入修改为文件

5.2.将排行榜页面的展示个数修改为10

5.3.标记玩家游戏所在处

5.4.统一api格式

修改api地址

将GetRanklistController、GetRecordListController、InfoController、GetListController的GetMapping中的地址前加上/api
将LoginController、RegisterController、AddController、RemoveController、UpdateController的PostMapping中的地址前加上/api

修改网关

.antMatchers(“/api/user/account/token/”, “/api/user/account/register/”).permitAll()

5.5.后端上线(重点)

配置项目打包方式eg:

backend/pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    ...

    <artifactId>backend</artifactId>
    <packaging>jar</packaging>

    ...

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <!--这里写上main方法所在类的路径-->
                <configuration>
                    <mainClass>com.kob.backend.BackendApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

botrunningsystem/pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    ...

    <artifactId>botrunningsystem</artifactId>
    <packaging>jar</packaging>

    ...

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <!--这里写上main方法所在类的路径-->
                <configuration>
                    <mainClass>com.kob.botrunningsystem.BotRunningSystemApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

matchingsystem/pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    ...

    <artifactId>matchingsystem</artifactId>
    <packaging>jar</packaging>

    ...

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <!--这里写上main方法所在类的路径-->
                <configuration>
                    <mainClass>com.kob.matchingsystem.MatchSystemApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

打包
提示：打包前记得删除匹配玩家时输出的语句
打开右侧Maven，点开backendcloud -> 生命周期 -> 双击clean -> 双击package
在这里插入图片描述

用本地终端，传给docker下的acs

scp backend-0.0.1-SNAPSHOT.jar myserver1_docker1:
scp botrunningsystem-0.0.1-SNAPSHOT.jar myserver1_docker1:
scp matchingsystem-0.0.1-SNAPSHOT.jar myserver1_docker1:

登录Docker下的acs

cd ~
mkdir kob
cd kob
mkdir backendcloud
mkdir web
mkdir acapp
cd backendcloud
mv ~/*.jar .

运行后端

java -jar backend-0.0.1-SNAPSHOT.jar
java -jar matchingsystem-0.0.1-SNAPSHOT.jar
java -jar botrunningsystem-0.0.1-SNAPSHOT.jar

在这里插入图片描述

6.获取域名及Https证书(重点)

获取SSL证书，下载*.key和*.pem文件，复制粘贴到/etc/nginx下(我是从腾讯申请的SSL)
如何申请SSL？
在docker->acs下：

cd /etc/nginx
	sudo mkdir cert
	cd cert
	sudo vim acapp.key
	点击i进入编辑模式，shift + insert粘贴
	esc退出编辑模式，:wq保存并退出

	sudo vim acapp.pem
	点击i进入编辑模式，shift + insert粘贴
	esc退出编辑模式，:wq保存并退出

7.配置nginx配置文件(重点)

7.1配置文件

cd /etc/nginx
sudo vim nginx.conf
在命令行模式输入命令：ggdG
复制y总讲义nginx配置文件内容（在下面）
使用命令粘贴：
- sudo scp .bashrc .vimrc .tmux.conf /root将文件传给root
- 使用:set paste进入粘贴模式
- 按i进入编辑模式
- shift + insert粘贴
- esc退出编辑模式
- dd删除无关行内容
- :wq保存内容
- 将server_name的编号改成acwing创建应用界面的AppID，共有两处
  或者自己的域名

注意：若用户名不是acs，需要将nginx.conf配置文件中的acs全部改成你的用户名

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
    # multi_accept on;
}

http {

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    gzip on;

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;

     server {
         listen 80;
         server_name XXXXXXXXXX替换app2703.acapp.acwing.com.cn;
         rewrite ^(.*)$ https://${server_name}$1 permanent;
     }

    server {
        listen 443 ssl;
        server_name XXXXXXXXXX替换app2703.acapp.acwing.com.cn;
        ssl_certificate   cert/acapp.pem;
        ssl_certificate_key  cert/acapp.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        charset utf-8;
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        client_max_body_size 10M;

        location /api {
            proxy_pass http://127.0.0.1:3000;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $http_host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location /websocket {
            proxy_pass http://127.0.0.1:3000;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $http_host;
            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_read_timeout  36000s;
        }

        location / {
            root /home/acs/kob/web;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    }
}

7.2启动并重新加载nginx

sudo /etc/init.d/nginx start

在这里插入图片描述

7.3查看日志

cd /var/log/nginx/
sudo cat error.log

7.4测试（403，405）

在浏览器中输入域名测试，若提示403 forbidden则表示成功，并测试放行端口显示405
https://snake.mycomputer.top/api—>403
https://snake.mycomputer.top/api/user/account/register/—>405

8.上线前端(重点)

修改前端请求api

在vscode中，ctrl + shift + f全文搜索127.0.0.1或localhost，将http://127.0.0.1:3000替换为https://appxxxx.acapp.acwing.com.cn/api
将ws://127.0.0.1:3000替换为wss://appxxxx.acapp.acwing.com.cn
打开vue脚手架，停止server,在任务界面选择build，运行
通过scp命令将dist文件夹上传到服务器：scp -r dist/ springboot:kob/web/
将dist内容移出到web下：mv dist/* .
在web下刪除dist文件
访问域名就可以访问前端网页了！

9.Success!!

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^