大佬教程收集整理的这篇文章主要介绍了前后端分离 -- SpringBoot + Vue实战项目 部署至阿里云服务器,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
📢📢📢📣📣📣 哈喽!大家好c;我是【Bug 终结者】 c;【CSDN新星创作者】🏆c;阿里云技术博主🏆c;51CTO人气博主🏆c;INfoQ写作专家🏆 一位上进心十足c;拥有极强学习力的【Java领域博主】ὡc;ὡc;ὡc; Ἴ5;【Bug 终结者】博客的领域是【面向后端技术】的学习c;未来会持续更新更多的【后端技术】以及【学习心得】。 偶尔会分享些前端基础知识c;会更新实战项目c;面向企业级开发应用! Ἴ5; 如果有对【后端技术】、【前端领域】感兴趣的【小可爱】c;欢迎关注【Bug 终结者】💞💞💞 ❤️❤️❤️ 感谢各位大可爱小可爱! ❤️❤️❤️
本项目是一个班级管理系统c;用户分为2类:管理员、学生c;
管理员有班级管理和学生管理c;学生的权限只可以看到自己的班级c;以及切换班级
项目技术栈:Spring Boot、Spring Security、MyBatis、Vue2、ElementUI
用户类别 | 权限模块 | 权限 |
---|---|---|
管理员 | 班级管理(可切换学生的所在班级)c;学生管理 | admin |
普通用户(学生) | 切换班级模块 | student |
具体可看:深入浅出Spring Boot + Spring Security + Vue + ElementUI 实现班级学生管理系统
打开nginx官网下载nginx
nginx官方下载
我们选择稳定版本1.20.2
下载完毕使用Filezilla将文件上传至nginx
左侧为本地文件c;右侧为Linux文件c;双击上传至Linux文件夹下
上传成功后我们去Linux下找到该文件并解压
cd /usr/local/nginx
解压文件
tar -xvf nginx-1.10.2.tar.gz
解压成功后查看解压后的文件
进入文件
cd /nginx-1.10.2
执行命令编译nginx
./configure --with-http_stub_status
执行make命令
@H_870_166@make
进入sbin目录
cd /usr/local/nginx/sbin
重新加载配置文件并优雅的启动
加载文件
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
重新加载并启动Nginx
./nginx -s reload
具体可看:3分钟搞懂阿里云服务器安装Nginx并配置静态访问页面
打开Oracle官网c;下载jdk1.8版本, Oracle1.8下载地址
使用putty将文件上传至服务器
解压文件
tar -xvf jdk-8u311-linux-x64.tar.gz
配置环境
vim /etc/profile
写入以下文件
export JAVA_HOME=/usr/java/jdk1.8.0_261
export PATH=$JAVA_HOME/bin:$PATH
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
设置配置文件立即生效
source /etc/profile
测试Java
测试Javac
进入usr/local
新建MySQL目录
cd usr/local
@H_614_274@mkdir mysql
以下操作在 @H_870_166@mysql目录下操作
下载MySQL
wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.20-linux-glibc2.12-x86_64.tar.xz
也可以去官网直接下载
安装成功后查询下载好的文件
ll
解压下载好的文件
tar xvJf mysql-8.0.20-linux-glibc2.12-x86_64.tar.xz
再次查看文件
文件太长c;我们修改文件名为@H_870_166@mysql-8.0
@H_614_274@mv mysql-8.0.20-linux-glibc2.12-x86_64 mysql8.0
修改完毕后我们再次查看文件名
进入 mysql8.0 目录
新建 data 目录存放核心文件
@H_614_274@mkdir data
添加 @H_870_166@mysql 组和用户组密码
groupadd mysql
useradd -g mysql mysql
修改MySQL文件名
@H_614_274@mv mysql8.0 mysql-8.0
授权用户
chown -R mysql.mysql /usr/local/mysql/mysql-8.0
回到bin目录初始化信息
cd bin
# 初始化基础信息
./mysqld --user=@H_383_275@mysql --basedir=/usr/local/mysql/mysql-8.0 --datadir=/usr/local/mysql/mysql-8.0/data/ --initialize
保存临时密码后面我们测试时要用
编写 MySQL my.cnf 配置文件
vim etc/my.cnf
按下 i
键 写入内容
注意:一开始配置为空c;我们将下面配置文件复制到 my.cnf文件中
[client]
port=3306
socket=/tmp/mysql.sock
[@H_383_275@mysqld]
basedir=/usr/local/mysql/mysql-8.0/
datadir=/usr/local/mysql/mysql-8.0/data/
# 设置字符编码集
character-set-server=utf8
# 日志存放目录
log-err=/usr/local/mysql/mysql-8.0/data/mysqld.log
pid-file=/usr/local/mysql/mysql-8.0/data/mysqld.pid
主要区分 [client]
和 [mysqld]
修改完毕后退出并保存
esc # 取消编辑
:wq # 保存并退出
回到mysql-8.0目录c;将mysqld添加到服务
cp -a ./support-files/mysql.server /etc/init.d/mysql
授权和添加服务
chmod +x /etc/init.d/mysql
chkconfig --add mysql
启动MySQL服务
service mysql start
查看 MySQL服务是否启动
service mysql status
@H_674_671@
连接MySQL
@H_870_166@mysql -uroot -p Enter Pwd: 刚刚保存的密码c;复制到此c;回车即可成功
修改密码
ALTER USER 'Root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';
刷新
flush privileges;
启动MySQL远程连接并生效
update user set host='%' where user='Root';
flush privileges;
@H_648_7@mySQL连接成功~
我们使用sqLyog工具连接远程数据库
SQLYog官网下载地址
连接阿里云服务器MySQL
这里如果连接不上c;请关闭 Linux防火墙并在阿里云控制台打开允许访问3306端口
关闭 Linux 防火墙
查看防火墙状态
systemctl status firewalld
关闭防火墙c;暂时关闭防火墙
systemctl stop firewalld
阿里云安全组开放端口
阿里云服务器允许访问3306端口
实例 --> 安全组c;添加安全组访问规则
在上面我们已经准备好了初始环境c;接下来我们开始将前端项目和后端项目部署至Linux服务器!
新建work目录备用c;后续文件上传至此文件夹
@H_614_274@mkdir work
@H_614_274@mkdir class_manager
# 进入 class_manager创建
# 新建api
@H_614_274@mkdir api
# 新建pc
@H_614_274@mkdir pc
前端Vue项目注意:请将conf/index.js文件修改为/
win+r 输入cmd 进入项目目录编译项目
npm rum build
使用Filezilla将编译的文件上传至Linux指定目录
前端目录
目录解释
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
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 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
LOCATIOn / {
root /work/class_manager/pc/dist;
index index.html index.htm;
#开启后不会导致刷新白屏
try_files $uri $uri/ /index.html;
}
# 接口访问路径c;解决跨域
LOCATIOn /springbootajax/ {
proxy_pass http://39.105.13.178:8345/springbootajax;
}
#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;
}
}
访问前端网站
成功访问!
win+r输入cmdc;然后进入项目目录进行编译
# 将项目编译为jar包
mvn clean package
使用Filezilla将编译的文件上传至Linux指定目录
编译完成后生成zip文件c;进入target目录解压文件c;并将解压完成的文件上传至指定目录
后端项目目录
@H_801_960@
目录解释
进入api目录编写sHell脚本
start.sh
# 后台方式运行项目
nohup java -jar test_springboot-0.0.1-SNAPSHOT.jar >./logs.txt &
# 输出运行成功
echo "running!"
stop.sh
# 获取jar包的pid
pid=$(ps aux|grep test_springboot-0.0.1-SNAPSHOT.jar)
# 删除pid对应的进程
kill -9 $pid
赋予脚本执行权限
chmod o+x start.sh
chmod o+x stop.sh
执行脚本
./start.sh
./stop.sh
SpringBoot + Vue实战项目
以上就是【Bug 终结者】对前后端分离 – SpringBoot + Vue实战项目 部署至阿里云服务器简单的概述c;本案例主要实现了前后端分离项目线上环境的部署c;处理线上问题c;增加自己的实战经验c;本案例为真实企业项目部署案例c;实战增加自己的经验c;技术在手c;天下我有~
如果这篇【文章】有帮助到你c;希望可以给【Bug 终结者】点个赞👍c;创作不易c;如果有对【后端技术】、【前端领域】感兴趣的小可爱c;也欢迎关注❤️❤️❤️ 【Bug 终结者】❤️❤️❤️c;我将会给你带来巨大的【收获与惊喜】💝💝💝!
以上是大佬教程为你收集整理的前后端分离 -- SpringBoot + Vue实战项目 部署至阿里云服务器全部内容,希望文章能够帮你解决前后端分离 -- SpringBoot + Vue实战项目 部署至阿里云服务器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。