Spring Boot+Vue前后端分离项目部署笔记
前言：
因为毕设项目老师要求上线，所以这是我第一次将本地项目部署到云服务器上，在部署的时候出现过许多问题，最后也是成功将毕设项目部署上线，在此进行记录，也方便和我一样的新手小白少走弯路。
1.申请和配置云服务器
登录阿里云，购买阿里云ECS，新手选择一键配置（选择centos的linux服务器）。
配置安全组：
将前端、后端项目和数据库的对应端口都加入安全组配置中，mysql默认为3306，授权对象都设置为：0.0.0.0/0
配置完成。
2.修改项目配置
[1]. 前端项目
修改main.js中的baseURL的localhost以及所有有涉及到localhost的地方均改为申请到的阿里云服务器的公网IP，使用终端命令
npm run build
打包后项目生成dist文件夹，前端项目打包完成。
[2]. 后端项目
修改数据库配置（properties.yml文件）中的localhost为申请到的阿里云服务器的公网IP，修改每个子项目和母项目的pom文件，加入以下配置：
<package>jar</package>
注：使用jar包的形式打包项目的优势在于，不同于传统的war包打包方式，当项目上传到云服务器时不用额外下载配置tomcat服务器，即可运行使用jar包打包的项目（jar包自带tomcat）。
之后rebuild整个项目，使用idea工具的maven侧边栏的操作按钮，按照clean->compile->package->install的顺序，完成后在项目的target文件夹下生成xxx.jar，即为打包后的项目文件，后端项目打包完成。
3.上传项目到云服务器
[1]. 下载xshell最新版终端模拟软件
安装成功后，打开，在“主机”处添加服务器 ip，新建会话：
连接会话：
根据提示输入用户名和密码登录，即可远程连接阿里云服务器。
[2]. 安装文件传输软件 Xftp
主要用于云服务器中的文件可视化操作，减少linux命令。安装成功后新建会话，添加主机、用户名、密码，点击确定。
[3]. 上传项目
一般在云服务器中的usr目录下新建文件夹，将打包好的前端项目的dist文件夹和后端项目的jar包传输到该文件夹下。
4.云服务器配置
[1].前端nginx配置
在Linux官网下载对应版本地nginx压缩包（以tar.gz结尾），将其上传到阿里云服务器上，使用如下命令解压 nginx 安装包(根据下载的nginx版本更换对应版本)：
tar -zxvf nginx-1.8.1.tar.gz
进入 nginx-1.8.1 目录：
cd nginx-1.8.1
make 编译安装它:
./configure
make
make install
安装 zlib 库
cd ~
wget http://www.zlib.net/zlib-1.2.11.tar.gz
tar -zxvf zlib-1.2.11.tar.gz
cd zlib-1.2.11
./configure
make
make install
安装 SSL
yum -y install openssl openssl-devel
安装 pcre
yum -y install pcre-devel
nginx 服务的基本操作
启动服务：
/usr/local/nginx/sbin/nginx
这个时候访问你服务器的公用 ip 地址，如果可以打开下面这样一个页面，说明 nginx 启动成功：
重启服务：
/usr/local/nginx/sbin/nginx -s reopen
查看服务：
ps -ef | grep nginx
查看配置：
vim /usr/local/nginx/conf/nginx.conf
配置nginx.conf文件（搜索文件的Linux命令：whereis xxx.conf，编辑文件使用的linux命令：先cd进该文件存放的目录，然后使用vim xxx.conf）,以fitnesshub-vue项目为例，增加如下配置：
server {
listen 9000;
server_name www.fitnesshub.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /usr/myproject/dist;
autoindex on;
index index.html index.htm;
#解决界面刷新后出现404的问题
try_files $uri $uri/ /index.html;
}
}
nginx.cnf完整配置如下：
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 9000;
server_name www.fitnesshub.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /usr/myproject/dist;
autoindex on;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
编辑完成使用esc退出编辑并保存，使用:wq+enter或者qa!+enter退出文件编辑界面
重新载入配置文件：
在修改了配置文件后需要重新载入配置文件
/usr/local/nginx/sbin/nginx -s reload
至此nginx.conf文件就配置好了。
访问服务器 ip 地址，就可以看到自己的项目了。
[2]. 后端项目配置
官网下载1.8版本的JDK（linux版），上传云服务器后解压：
tar -zxvf jdk-8u151-linux-x64.tar.gz
配置JAVA环境：
vim /etc/profile
添加如下内容：
export JAVA_HOME=/usr/java/jdk1.8.0_151 （换成你的jdk目录）
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export PATH=$PATH:$JAVA_HOME/bin
执行
source/etc/profile
查看安装情况
java -version
搞定。
之后安装linux版的mysql
操作系统:Centos 7.4 MySQL版本: MySQL 5.7
登录服务器
1、下载数据库
cd usr/local/src/
wget https://repo.mysql.com//mysql57-community-release-el7-8.noarch.rpm
2、安装mysql
yum -y install mysql57-community-release-el7-8.noarch.rpm
3、查看mysql安装情况
yum repolist enabled | grep mysql.*
4、查看mysql server
yum install mysql-community-server
5、启动mysql
systemctl start mysqld
设置开机自启：
systemctl enable mysqld
systemctl daemon-reload
然后就是登陆MySQL
首先获取默认密码 ， 执行
grep "A temporary password is generated for root@localhost" /var/log/mysqld.log
我这里密码是 S9vMy4eoPc.p
登陆mysql
mysql -uroot -p
输入初始密码后执行以下命令修改密码：
ALTER USER 'root'@'localhost' IDENTIFIED BY 'your password';
或者
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'your password';
注：Mysql8.0后密码有要求要包含字母大小写、特殊符号、数字
设置成功。
通过
exit;
命令退出 MySQL，然后通过新密码再次登陆
修改my.cnf文件配置
使用
whereis my.cnf
或者
which mysql
以上执行出的路径 后加上--verbose --help | grep -A 1 'Default options'
即可看到my.cnf的路径
查找该文件位置，然后
vi /xxx/my.cnf(一般是/etc/my.cnf)
如果初始文件如下所示则不用配置，如果不是则需配置该文件内容如下：
[mysqld]
#
# Remove leading # and set to the amount of RAM for the most important data
# cache in MySQL. Start at 70% of total RAM for dedicated server, else 10%.
# innodb_buffer_pool_size = 128M
#
# Remove leading # to turn on a very important data integrity option: logging
# changes to the binary log between backups.
# log_bin
#
# Remove leading # to set options mainly useful for reporting servers.
# The server defaults are faster for transactions and fast SELECTs.
# Adjust sizes as needed, experiment to find the optimal values.
# join_buffer_size = 128M
# sort_buffer_size = 2M
# read_rnd_buffer_size = 2M
datadir=/var/lib/mysql
socket=/var/lib/mysql/mysql.sock
# Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0
log-error=/var/log/mysqld.log
"/etc/my.cnf" 27L, 960C
上传sql数据库文件到云服务器并执行
首先本地打包sql文件（选择导出），之后将打包好的sql文件（这里以fitnesshub.sql为例）上传到/tmp目录。
mysql中执行如下命令导入sql文件：
create database fitnesshub(新建数据库)
use fitnesshub
set names utf8mb4
source /tmp/fitnesshub.sql
然后屏幕上就会不断的滚，最后提示导入成功。
MySQL5.7 设置远程访问
选择数据库
use mysql;
开启远程连接 root 用户名 % 所有人都可以访问 password 密码
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'your password' WITH GRANT OPTION;
FLUSH PRIVILEGES;
或者
create user 'root'@'%' identified with mysql_native_password by 'your password';
grant all privileges on *.* to 'root'@'%' with grant option;
flush privileges;
重起mysql服务
service mysqld restart
如果执行完以上步骤，还是不能远程连接，那么我们需要查看服务器的防火墙是否开启
service iptables status
如果防火墙开启，请关闭
service iptables stop
或者打开防火墙开放3306端口
#开启防火墙
systemctl start firewalld
#开放3306端口
firewall-cmd --zone=public --add-port=3306/tcp --permanent
firewall-cmd --reload
修改mysql数据库默认编码为utf8mb4
修改/etc/my.cnf配置文件，在[mysqld]下添加编码配置，如下：
character_set_server=utf8mb4
init_connect='SET NAMES utf8mb4'
编辑保存完重启mysql服务:
systemctl restart mysqld
查看mysql数据库编码：
show variables like '%character%';
到此就可以远程连接了。
mysql远程连接
在navicat中新建mysql连接，输入申请到的阿里云服务器的公网IP、账号（root）和密码，即可远程登录。
5.运行已部署好地项目
[1]. 前端项目启动
前端项目由nginx反向代理，进入nginx安装目录下的sbin目录下
执行以下命令：
./nginx -c /usr/local/nginx/conf/nginx.conf
说明：
● 其中/usr/local/nginx/conf/nginx.conf是你自己的nginx.conf路径。
● -c参数指定了要加载的nginx配置文件路径。
linux如何重启nginx？
重新平滑启动：
1、进入nginx安装目录下的sbin目录下
2、执行以下命令：
./nginx -s reload
前端项目启动完成
[2]. 后端项目启动
运行命令：
java -jar xxx.jar
然后回车，即可在xshell中看到项目的启动状态。
如果有多个服务需要开启则运行以上linux命令后回车，然后输入以上命令继续回车
保持项目一直在云服务器上运行的linux命令
nohup java -jar xxx.jar &
关闭java进程
ps查进程ID
ps -ef | grep 你的jar包名称
之后会显示两个进程信息，选择带xxx.jar的一个（一般是第一个）
杀掉该进程
kill -9 你的java进程号
6.结束
至此spring boot和vue的前后端分离项目就成功部署到云服务器上了，登录公网IP+前端项目端口号即可正常访问你所部署好的项目。
最后附上linux命令大全地址：www.linuxcool.com
本文和Segmentfault社区文章同步更新：segmentfault.com/a/119000004…
转载自:https://juejin.cn/post/6963141875138035749