阿里云部署（Springboot+vue2.0）前后端分离项目

项目架构和部署工具
- 项目工具
- 部署工具
后端项目准备及部署
- 购买云端服务器（以下是阿里云，[腾讯请点击我](https://blog.csdn.net/it_vegetable/article/details/118465663)）
- 配置服务器
- Xshell的安装及使用
- 安装MySQL 8.0.26
后端项目准备和部署
- 安装JDK
- 将Springboot项目打包成jar包
- 部署后端项目
前端项目准备及部署(与centos7安装有差异)
- 安装nginx
- 打包vue项目并部署到前端
- - 修改vue项目部分配置
  - 打包vue项目并部署
screen命令(与centos7的安装有差异)

项目架构和部署工具

项目工具

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的安装及使用

下载请点击https://www.netsarang.com/zh/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.mdchainWebpack: () => {},configureWebpack: () => {},// vue-loader 配置项// https://vue-loader.vuejs.org/en/options.html// vueLoader: {},// 生产环境是否生成 sourceMap 文件productionSourceMap: true,// css相关配置css: {// 是否使用css分离插件 ExtractTextPluginextract: 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 coresparallel: 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-pwapwa: {},//webpack - dev - server 相关配置devServer: {open: process.platform === 'darwin',disableHostCheck: true,host: '********', //填公网IPport: 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是可以更改的，取决你放入的文件夹名)，到此任务就完成了