华为云服务器部署Spring Boot+Vue项目流程
前言
个人使用Vue+Springboot写了个小项目，需要部署到服务器上。部署期间借鉴了很多博客，这里总结一下，写一篇博客记录一下流程，方便后续回顾。
- 2023-5-26
记录搭建流程 - 2023-6-2
补充nginx个人配置
技术选型
- 服务器：华为云 云耀云服务器HECS
- 服务器系统： CentOS 7.6 64bit
- 项目结构：Vue2 + Spring Boot + MybatisPlus
- 环境结构：jdk1.8 + mysql 8.0 + nginx 1.19
1、服务器环境搭建
1.1 jdk下载
这里使用的华为云服务器选择操作系统后，已经有了yum命令，可以使用yum命令快速安装。
1.1.1搜索jdk安装包
yum search java | grep jdk
1.1.2 安装jdk
yum install java-1.8.0-openjdk
1.1.3 验证是否安装成功
java -version
1.2 安装mysql
安装mysql的过程比较长，会出现的错误也比较多，我尽量写得详细一些。
1.2.1 下载wget
yum -y install wget
1.2.2 卸载mariadb
一般CentOS默认安装了mariadb，所以先查看是否安装mariadb。自带的mariadb和mysql有冲突，如果安装了就需要先卸载mariadb。
# 查看mariadb文件
rpm -qa | grep mariadb
# 删除mariadb文件
rpm -e mariadb-libs --nodeps
1.2.3 删除名为mysql的文件夹
# 查找名为mysql的文件夹
find / -name mysql
# 删除文件夹
rm -rf 包名
1.2.4 调整安装位置
这里的安装位置可以根据需要自行选择，我这里选择装在/usr/local/mysql下。
cd /usr/local
mkdir mysql
cd mysql
1.2.5 下载mysql文件
这里先给一个我使用的命令，再给查找下载网址的教程。如果大家也是CentOS 7 + mysql 8.0的话，可以直接使用这个命令。
1.2.5.1 下载命令
wget https://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm
1.2.5.2 查找下载网址
这里每一步都有相应的链接，完全可以直接跳到最后一步链接处。为了防止以后MySQL官网下载路径会有变化，还是把步骤截图都放上了。
注意：后来发现这里的mysql都是8.0版本的！！！
# 官网地址，点击标题链接更快哦
https://dev.mysql.com/
-
此时就拿到了下载链接了
如：https://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm
1.2.6 安装mysql
rpm -ivh mysql80-community-release-el7-7.noarch.rpm
1.2.7 安装mysql服务
yum -y install mysql-server
1.2.8 启动mysql
systemctl start mysqld
1.2.9 查看临时密码
启动mysql后，第一次登录使用的是临时密码，使用下述命令查看临时密码。
grep 'temporary password' /var/log/mysqld.log
1.2.10 登录mysql
输入登陆命令后，输入刚刚的临时密码登录。mysql输入密码不会显示，一个一个输入即可。
# 登录命令
mysql -u root -p
1.2.11 修改密码
ALTER USER 'root'@'localhost' IDENTIFIED BY 'your-password';
1.2.12 其他命令
# 关闭mysql服务
service mysqld stop
# 启动mysql服务
service mysqld start
# 刷新mysql权限（修改user表后一定要刷新权限才会生效）
flush privileges;
# 设置密码策略为LOW（习惯设置的123456会被提示密码策略不符合，可以使用这个命令降低要求）
set global validate_password.policy=LOW;
# 设置密码长度
set global validate_password.length=6;
1.3 下载nginx
1.3.1 切换安装路径
cd /usr/local
1.3.2 下载nginx压缩包
wget http://nginx.org/download/nginx-1.19.0.tar.gz
1.3.3 解压
tar -zxvf nginx-1.19.0.tar.gz
1.3.4 安装nginx的依赖项
yum install -y gcc gcc-c++ make automake autoconf libtool pcre pcre-devel zlib zlib-devel openssl openssl-devel
1.3.5 配置nginx
cd /usr/local/nginx-1.19.0
./configure
1.3.6 编译、安装
make
make install
1.3.7 开放访问端口
#--permanent永久生效，没有此参数重启后失效
firewall-cmd --zone=public --add-port=80/tcp --permanent
#重新载入配置
firewall-cmd --reload
#查看已经开启的端口
firewall-cmd --zone=public --list-ports
# 当然也可以选择把防火墙直接关了，一劳永逸（如果安全性要求比较高的系统，不建议这么搞）
# 查看防火墙状态
systemctl status firewalld
# 永久关闭防火墙（重启也不会开启）
systemctl disable firewalld
1.3.8 设置开机自启动
vi /lib/systemd/system/nginx.service
nginx中添加如下代码
Description=nginx - high performance web server
After=network.target remote-fs.target nss-lookup.target
[Service]
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s stop
[Install]
WantedBy=multi-user.target
- 使配置生效
systemctl daemon-reload
- 设置开机启动
systemctl enable nginx.service
1.3.9 本地测试nginx
curl http://localhost:80/
上面是终端代码测试，也可以在浏览器内输入网址测试功能。如下图
2、打包部署
2.1 远程连接mysql
2.1.1 查询访问权限
select user,host from mysql.user;
root用户的localhost表示只允许本机访问，要实现远程连接，可以将用户的host改为%，表示允许任意主机访问，如果需要设置只允许特定ip访问，则应改为对应的ip。
2.1.2 修改root用户的host字段为%
update mysql.user set host="%" where user="root";
2.1.3 刷新权限
flush privileges;
2.1.4 打开端口
添加入方向规则，对所有ip放行3306端口
2.1.5 navicat远程连接
2.1.6 克隆数据库表
首先手动输入命令，在服务器端生成一个数据库。
- 点击 工具->数据传输
- 选择源和目标的连接和数据库
- 选择要传输的数据表就可以了，navicat会自动把表结构和数据复制过去。我这写的项目还比较简单，只有一张表，大家根据需要选择就可以了。
至此，数据库就搞定了。
2.2 Vue代码打包
2.2.1 打开Vue工程，终端运行
npm run bulid
生成dist文件夹。
2.2.2 新建代码路径
cd /usr
mkdir server
cd server
2.2.3 上传dist文件夹
我这里使用的Xftp进行可视化传输。
放一个阿里云的下载链接吧，点此进入
这里网上搜到了一个Xmanager的资源，还没使用，链接也放下吧，点此进入
2.3 Spring Boot代码打包
2.3.1 IDEA中执行命令
依次点击clean、compile、package，然后会在target目录下生成jar包。
2.3.2 上传jar包
# 创建目录
cd /usr/server
mkdir springboot
cd springboot
2.3.3 使用nohup让后端文件在后台启动
nohup java -jar springboot-0.0.1-SNAPSHOT.jar &
正常启动后，可以打印出启动日志
tail nohup.out
2.4 个人nginx配置
这边花了一周时间才把本地代码部署到服务器上，中间也是错误繁多。遇到的问题记录一下，希望也能帮助到大家。
| 序号 | 问题 | 解决方法 |
|---|---|---|
| 1 | 后端静态资源存放于/src/resources/static下，打为jar包后，前端无法访问 | 将静态资源文件夹更换位置 |
| 2 | nginx.conf配置 | 参见代码 |
| 3 | 本地测试和打包部署后端时需要频繁修改file.static-dir | 新建application.yml文件 |
| 4 | 前端使用localhost地址build会报错 | 将前端的localhost抽离出来，build前更改为服务器ip |
- 问题一
静态资源位置设置在哪里都可以，我这里直接放到前端的public下了，前端build之后也会出现在dist文件夹下，在一个统一的文件夹下方便管理。第二个file开头的是服务器下的绝对路径。同时新增file属性，方便新建文件时使用。
# application.yml
spring:
web:
resources:
static-location:classpath:/static, classpath:/resources, file:D:\Code\GitDownload\rockcls\front\public\static, file:/usr/server/dist/static
file:
static-dir: D:\Code\GitDownload\rockcls\front\public\static
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import javax.annotation.PostConstruct;
import java.io.File;
/**
* 文件存储配置类
* @author HuangSJ
*/
@Configuration
public class FileStorageConfig {
@Value("${file.static-dir}") // 从配置文件中读取文件夹路径
private String staticDir;
@PostConstruct
public void init() {
File directory = new File(staticDir);
if (!directory.exists()) {
directory.mkdirs(); // 如果文件夹不存在，则创建
}
}
public String getStaticDir() {
return staticDir;
}
}
- 问题二
listen：表示监听的前端端口
server_name：服务器ip
charset：字符编码
root：静态文件路径，即dist路径
index：index.html页面，dist文件下会有，前端的页面都会封装为静态页面了
location：
Location是Nginx中的块级指令(block directive),通过配置Location指令块，可以决定客户端发过来的请求URI如何处理（是映射到本地文件还是转发出去）及被哪个location处理。
下面的/image表示80端口发出的/image开头的请求转交给服务器http://server.ip:server.port下的/image处理。比如http://localhost:80/image会被转交给http://localhost:server.post/image处理，如果location /image中的proxy_pass后不加/image，请求会被转交为http://localhost:server.post，可能会出现请求错误（我就是这里被困了两天，哭死~~~）。
第二个location负责把没有被上面的location转交的请求交给前端处理。
详细关于location匹配方式的信息，参考链接nginx的location优先级。
server {
listen 80;
server_name server.ip;
#charset koi8-r;
charset utf-8;
root /usr/server/dist;
index index.html index.htm;
location /image {
proxy_pass http://server.ip:server.port/image;
proxy_set_header Host $host;
proxy_set_header X-Real-Ip $remote_addr;
proxy_set_header X-Forwarded $proxy_add_x_forwarded_for;
}
location / {
try_files $uri $uri/ /index.html;
}
# https跨域配置
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
- 问题三
根据需要对application.yml中的内容进行重写，使用下述命令启动jar包，相应内容会被替换。
# jar包名字自己替换
nohup java -jar springboot-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &
spring:
# 数据源配置
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://server.ip:3306/databaseName?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
username: root
password: 123456
redis:
host: server.ip
file:
static-dir: /usr/server/dist/static
- 问题四
在mian.js中引入全局变量hostURL，在vue文件中可以通过this.hostURL调用。
Vue.prototype.hostURL = 'http://localhost:80'
参考文献
[1] 关于服务器部署流程
[2] CentOS7.6安装MYSQL8.0（亲身实践）
[3] Linux安装mysql8.0（官方教程！）
[4] centos安装nginx
[5] nginx的location优先级
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
