阿里云部署（Springboot+vue2.0）前后端分离项目
项目架构和部署工具
项目工具
- Springboot
- vue2.0
- mysql 8.0.26
部署工具
- Xshell
- 阿里云（centos8）
后端项目准备及部署
购买云端服务器（以下是阿里云，腾讯请点击我）
配置服务器
1. 设置服务器密码（服务器账号默认为root），点击重置密码，直接进行重置密码即可。切记！这个密码不能忘
2.配置安全组
-
点击网络和安全组，点击进入安全组配置
-
点击配置规则
-
配置安全组，将自己所需要的端口号都添加在其中（个人使用来源一般填写0.0.0.0/0），mysql的端口号为3306，前端端口号：8088（我的是8088），后端端口号:8088(我的是8088)，nginx:80（vue一般部署在nginx上）等等（面对此次部署，只需要nginx端口号，数据库端口号，前后端端口号＋安全组默认配置的端口号）
（配置完安全组后，若在后续运行中出现问题可能是新建的规则未生效，可以将云端服务器进行一次重启进行排查）
Xshell的安装及使用
-
由于是个人使用，请点击旁边的免费授权界面，然后填上邮箱，他就会将下载连接发送到你的邮箱，填邮箱的下面会有三个选择，其中的Xftp是用来将本地文件上传到云端界面的一个工具，根据自己需求下载，也可以使用rz进行将本地服务器文件上传到云端，安装教程链接如下https://blog.csdn.net/jerry010101/article/details/87925777
-
安装完成以后，我们就需要将Xshell登录远端服务器，打开Xshell，点击新建窗口
-
名称根据自己的喜好填写，主机需要填写服务器的公网IP，端口号默认22，如果你对端口号进行了修改，需要在安全组中添加刚修改的的端口号，完成以上操作后点击连接
-
输入账号（默认账号为root）
-
输入你设置的那个复杂的密码，建议将记住用户名和密码全部勾上，下次登录时候双击侧边窗口即可
-
登录成功
安装MySQL 8.0.26
由于centos8安装mysql8.0.26与8之前版本有差别，若因为按照其他教程安装，并且无法使用的，建议重装云服务器或点击此连接CentOS8系统下安装MySQL8.x遇到的坑
-
切换用户
sudo su -
安装MySQL8.0
sudo dnf install @mysql注意：我们这个时候MySQL已经安装好了，但是不要启动！不要启动！不要启动！
-
配置my.cnf
vim /etc/my.cnf在文件末尾添加以下内容
[mysqld] lower_case_table_names=1
-
将MySQL设置为自动启动
sudo systemctl enable --now mysqld -
启动MySQL
service mysqld start检查是否启动成功：
service mysqld status如果跟下图一样代表启动成功，否则反之
-
进入MySQL
mysql -u root -p首次进入MySQL无序密码，回车即可
-
检查大小写敏感
show variables like '%lower%';
PS:lower_case_table_name为1，表示大小写敏感，若为0则表示配置失败，那就只能够卸载重装mysql -
修改登录密码
use mysql; //修改root密码，***表示你要修改的密码 ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '***'; //语句即刻生效 FLUSH PRIVILEGES; -
设置MySQL允许远程连接
//查看mysql库中的user表的host字段 use mysql; select user,host from user; //修改root用户的host字段 update user set host="%" where user="root" //使本次修改立即生效 flush privileges再次查询可以见到root后面的为’%’
在windows上使用Navicat连接
剩余对数据库的操作即可以在Navicat上进行
后端项目准备和部署
安装JDK
-
查看jdk版本
yum -y list java*
-
安装JDK
yum install -y java-1.8.0-openjdk-devel.x86_64 -
查看JDK版本号
java -version
将Springboot项目打包成jar包
使用jar包可以无需再云端服务器搭建maven环境等相关配置，可以直接通过java -jar命令运行springboot项目
-
修改pom.xml文件
主函数的类名：
<build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <mainClass>com.neuedu.His2OutpatientApplication</mainClass> </configuration> </plugin> </plugins> </build>修改的原因为：此处为形成jar包后，在运行jar包时，jar包会根据此出代码信息去寻找springboot项目的主函数，若名字不正确在运行jar包时会报错
-
修改application.properties文件
修改的原因为：此处之前为localhost，由于程序是部署在云服务器上，此处应当改为对应服务器的公网IP -
将springboot项目打包成jar包
-
IDEA
首先在左侧双击项目文件夹①，然后在点击最右侧Maven②，右侧会弹出一个工具栏，先点击clean③，再点击package④，可以看到左侧项目文件栏中处出现target文件夹，双击target文件夹，显而易见的可以看到我们需要的jar包⑤。PS: 不建议直接使用IDEA的工具，因为我弄出来的东西运行时咔咔报错，并且网上部分博主也不建议，若你能试出来，皆大欢喜，相信你一定会把这个好消息分享出来，并在评论处给我看到你的成果和步骤
-
SpringToolSuite4
相对于IDEA,sts更加简单方便直接点击Maven install即可
-
部署后端项目
-
在Xshell上安装rz
yum -y install lrzsz -
将对应的jar包上传到云端服务器
-
运行jar包
java -jar 包名.jar
前端项目准备及部署(与centos7安装有差异)
PS:centos8安装nginx与8之前版本的安装有差异，不能完全按照部分教程使用，在其过程中需添加额外步骤！！！
安装nginx
- gcc 安装
yum install gcc-c++
- PCRE pcre-devel 安装
yum install -y pcre pcre-devel
- zlib 安装
yum install -y zlib zlib-devel
- OpenSSL 安装
yum install -y openssl openssl-devel
- 下载nginx压缩包（PS:在centos8中需安装较高的版本，我在较低版本安装过程会出现部分问题导致无法安装，此处使用1.17.9版本）
wget -c https://nginx.org/download/nginx-1.17.9.tar.gz
- 解压nginx压缩包并打开
tar -zxvf nginx-1.17.9.tar.gz
cd nginx-1.17.9
- 配置（默认配置）
./configure
- 配置完成需进行一次修改
vi /usr/local/nginx/conf/nginx.conf
将箭头所指地方换成公网ip（此次我好像未做任何更改，并未出现问题），并且80端口号最好留给nginx，若被占用请进行更改并配置安全组，root后面的内容就为前端打包后dist的存放位置
- 编译安装并查看安装路径
make
make install
whereis nginx（查看路径）
- 启动、停止nginx
cd /usr/local/nginx/sbin/
./nginx （启动）
./nginx -s stop（停止）
- 重启nginx
./nginx -s quit
./nginx
- 开机自启动nginx
vi /etc/rc.local
在末尾加上一行箭头所指内容/usr/local/nginx/sbin/nginx
- 设置执行权限（PS:与centos7安装1.10.1版本不同（chmod 755 rc.local））
chmod 755 /etc/rc.local
打包vue项目并部署到前端
修改vue项目部分配置
- 首先src中main.js，将箭头所指出更换成公网IP
2.在项目文件夹下创建一个名字为vue.config.js的文件 （PS:由于我使用的vue-cli3.0版本，没有config文件夹及其文件夹内的index.js,使用2.0版本的点击我vue-cli2.0）
并在文件内添加以下内容：
module.exports = {
// 基本路径 baseURL已经过时
publicPath: process.env.NODE_ENV == "production" ? "./" : "/",
publicPath: './',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
// vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
// dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
//webpack - dev - server 相关配置
devServer: {
open: process.platform === 'darwin',
disableHostCheck: true,
host: '********', //填公网IP
port: 8088, //前端端口号
https: false,
hotOnly: false,
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
打包vue项目并部署
-
打包vue3.0项目，在文件项目终端中执行npm run build语句，执行完成以后会形成一个dist文件，用浏览器打开红色箭头所指地方，出现第一个自己设定的界面（同时可以再Xshell中运行后端，来测试前后端交互是否成功），则打包成功
-
同样的将dist压缩传递给云端，在云端服务器中进行解压，将解压后的dist文件移动到root后面的文件夹中（一般都在/usr/local/nginx/html）
-
在浏览器中输入公网IP/his(his是可以更改的，取决你放入的文件夹名)，到此任务就完成了
screen命令(与centos7的安装有差异)
当你关闭Xshell时，你会发现后端程序就会暂停运行了，又得重新打开Xshell运行后端，而我们部署的结果就是为了让程序长久运行，因此我们要用到screen命令
- 安装epel（此处为新增的一步）
yum install epel-release -y
- 安装screen
yum install screen
- 创建screen会话（一定要先停止后端运行哦）
screen -S lnmp（lnmp是屏幕名字，可以随便更改）
- 返回上一个屏幕，暂时离开，会保留screen会话中的任务或程序（这就是我们的目的，让它永远的运行下去）
Ctrl+a d
- 恢复screen会话（到这部署就结束了，想学习更多screen命令请点击参考链接！）
screen -r lnmp（lnmp会话名字）
screen -ls screen（会话名字忘了，就输入它吧，查查）
（参考链接）
此次部署就此结束了，若有博客中有什么不对的地方或其他问题可以下方评论
1193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
