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

项目架构和部署工具

项目工具

  • Springboot
  • vue2.0
  • mysql 8.0.26

部署工具

  • Xshell
  • 阿里云（centos8）

后端项目准备及部署

购买云端服务器（以下是阿里云，腾讯请点击我）

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

配置服务器

1. 设置服务器密码（服务器账号默认为root），点击重置密码，直接进行重置密码即可。切记！这个密码不能忘
在这里插入图片描述

2.配置安全组

  1. 点击网络和安全组，点击进入安全组配置
    在这里插入图片描述

  2. 点击配置规则
    在这里插入图片描述

  3. 配置安全组，将自己所需要的端口号都添加在其中（个人使用来源一般填写0.0.0.0/0），mysql的端口号为3306，前端端口号：8088（我的是8088），后端端口号:8088(我的是8088)，nginx:80（vue一般部署在nginx上）等等（面对此次部署，只需要nginx端口号，数据库端口号，前后端端口号＋安全组默认配置的端口号）
    在这里插入图片描述
    （配置完安全组后，若在后续运行中出现问题可能是新建的规则未生效，可以将云端服务器进行一次重启进行排查）

Xshell的安装及使用

  1. 下载请点击https://www.netsarang.com/zh/xshell/

  2. 由于是个人使用，请点击旁边的免费授权界面，然后填上邮箱，他就会将下载连接发送到你的邮箱，填邮箱的下面会有三个选择，其中的Xftp是用来将本地文件上传到云端界面的一个工具，根据自己需求下载，也可以使用rz进行将本地服务器文件上传到云端，安装教程链接如下https://blog.csdn.net/jerry010101/article/details/87925777
    在这里插入图片描述

  3. 安装完成以后，我们就需要将Xshell登录远端服务器，打开Xshell，点击新建窗口
    在这里插入图片描述

  4. 名称根据自己的喜好填写，主机需要填写服务器的公网IP，端口号默认22，如果你对端口号进行了修改，需要在安全组中添加刚修改的的端口号，完成以上操作后点击连接在这里插入图片描述

  5. 输入账号（默认账号为root）在这里插入图片描述

  6. 输入你设置的那个复杂的密码，建议将记住用户名和密码全部勾上，下次登录时候双击侧边窗口即可
    在这里插入图片描述

  7. 登录成功
    在这里插入图片描述

安装MySQL 8.0.26

由于centos8安装mysql8.0.26与8之前版本有差别，若因为按照其他教程安装，并且无法使用的，建议重装云服务器或点击此连接CentOS8系统下安装MySQL8.x遇到的坑

  1. 切换用户

    sudo su

  2. 安装MySQL8.0

    sudo dnf install @mysql

    注意：我们这个时候MySQL已经安装好了，但是不要启动！不要启动！不要启动！

  3. 配置my.cnf

    vim /etc/my.cnf

    在文件末尾添加以下内容

    [mysqld]
lower_case_table_names=1

    在这里插入图片描述

  4. 将MySQL设置为自动启动

     sudo systemctl enable --now mysqld

  5. 启动MySQL

    service mysqld start

    检查是否启动成功：

    service mysqld status

    如果跟下图一样代表启动成功，否则反之
    在这里插入图片描述

  6. 进入MySQL

    mysql -u root -p

    首次进入MySQL无序密码，回车即可

  7. 检查大小写敏感

    show variables like '%lower%';

    在这里插入图片描述
    PS:lower_case_table_name为1，表示大小写敏感，若为0则表示配置失败，那就只能够卸载重装mysql

  8. 修改登录密码

    use mysql;
//修改root密码，***表示你要修改的密码
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '***';
//语句即刻生效
FLUSH PRIVILEGES;

  9. 设置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
      1.命令窗口cd到根目录(和pom.xml、target同级)，也可在idea工具中选择Terminal
      首先在左侧双击项目文件夹①，然后在点击最右侧Maven②，右侧会弹出一个工具栏，先点击clean③，再点击package④，可以看到左侧项目文件栏中处出现target文件夹，双击target文件夹，显而易见的可以看到我们需要的jar包⑤。

      PS: 不建议直接使用IDEA的工具，因为我弄出来的东西运行时咔咔报错，并且网上部分博主也不建议，若你能试出来，皆大欢喜，相信你一定会把这个好消息分享出来，并在评论处给我看到你的成果和步骤

    • SpringToolSuite4
      在这里插入图片描述
      相对于IDEA,sts更加简单方便直接点击Maven install即可

部署后端项目

  1. 在Xshell上安装rz

    yum -y install lrzsz

  2. 将对应的jar包上传到云端服务器
    在这里插入图片描述

  3. 运行jar包

    java -jar 包名.jar

    在这里插入图片描述

前端项目准备及部署(与centos7安装有差异)

PS:centos8安装nginx与8之前版本的安装有差异，不能完全按照部分教程使用，在其过程中需添加额外步骤！！！

安装nginx

  1. gcc 安装

yum install gcc-c++

  1. PCRE pcre-devel 安装

yum install -y pcre pcre-devel

  1. zlib 安装

yum install -y zlib zlib-devel

  1. OpenSSL 安装

yum install -y openssl openssl-devel

  1. 下载nginx压缩包（PS:在centos8中需安装较高的版本，我在较低版本安装过程会出现部分问题导致无法安装，此处使用1.17.9版本）

wget -c https://nginx.org/download/nginx-1.17.9.tar.gz

  1. 解压nginx压缩包并打开

tar -zxvf nginx-1.17.9.tar.gz
cd nginx-1.17.9

  1. 配置（默认配置）

./configure

  1. 配置完成需进行一次修改

vi /usr/local/nginx/conf/nginx.conf

在这里插入图片描述
将箭头所指地方换成公网ip（此次我好像未做任何更改，并未出现问题），并且80端口号最好留给nginx，若被占用请进行更改并配置安全组，root后面的内容就为前端打包后dist的存放位置
在这里插入图片描述

  1. 编译安装并查看安装路径

make
make install
whereis nginx（查看路径）

  1. 启动、停止nginx

cd /usr/local/nginx/sbin/
./nginx （启动）
./nginx -s stop（停止）

  1. 重启nginx

./nginx -s quit
./nginx

  1. 开机自启动nginx

vi /etc/rc.local

在末尾加上一行箭头所指内容/usr/local/nginx/sbin/nginx
在这里插入图片描述

  1. 设置执行权限（PS:与centos7安装1.10.1版本不同（chmod 755 rc.local））

chmod 755 /etc/rc.local

打包vue项目并部署到前端

修改vue项目部分配置

  1. 首先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项目并部署

  1. 打包vue3.0项目，在文件项目终端中执行npm run build语句，执行完成以后会形成一个dist文件，用浏览器打开红色箭头所指地方，出现第一个自己设定的界面（同时可以再Xshell中运行后端，来测试前后端交互是否成功），则打包成功
    在这里插入图片描述

  2. 同样的将dist压缩传递给云端，在云端服务器中进行解压，将解压后的dist文件移动到root后面的文件夹中（一般都在/usr/local/nginx/html）
    在这里插入图片描述

  3. 在浏览器中输入公网IP/his(his是可以更改的，取决你放入的文件夹名)，到此任务就完成了

screen命令(与centos7的安装有差异)

当你关闭Xshell时，你会发现后端程序就会暂停运行了，又得重新打开Xshell运行后端，而我们部署的结果就是为了让程序长久运行，因此我们要用到screen命令

  1. 安装epel（此处为新增的一步）

yum install epel-release -y

  1. 安装screen

yum install screen

  1. 创建screen会话（一定要先停止后端运行哦）

screen -S lnmp（lnmp是屏幕名字，可以随便更改）

  1. 返回上一个屏幕，暂时离开，会保留screen会话中的任务或程序（这就是我们的目的，让它永远的运行下去）

Ctrl+a d

  1. 恢复screen会话（到这部署就结束了，想学习更多screen命令请点击参考链接！）

screen -r lnmp（lnmp会话名字）
screen -ls screen（会话名字忘了，就输入它吧，查查）

（参考链接）

此次部署就此结束了，若有博客中有什么不对的地方或其他问题可以下方评论

# 阿里云 # spring boot
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue