头图

Linux系统上部署 基于Spring Boot+Vue的前后端分离项目笔记

前言

毕业设计完成后,想实践一下如何部署到Linux服务器上。
主要实现方法:前端Vue项目打包后部署到nginx服务器上,后端SpringBoot项目打成jar包直接跑。
本文章主要介绍:Nginx安装与配置、JDK8安装与配置、MySQL5.7安装与配置、Vue项目打包、SpringBoot项目打包

1、Linux环境准备

有条件买云服务器,没条件用VMWare。我这里用后者演示。
如果用阿里云服务器唯一区别就是需要添加安全组,其他都大同小异。
我用的CentOS7
(1)首先安装系统镜像参考:虚拟机安装CentOS7教程
(2)配置网络 Net或桥接 参考我的另一篇文章:Net模式&桥接模式的配置教程
这里演示用Net模式

2、Nginx安装与配置

1)官网下载Linux版本的:http://nginx.org/en/download....
图片.png

在Linux官网下载对应版本地nginx压缩包(以tar.gz结尾),将其上传到Linux服务器上,使用如下命令解压 nginx 安装包(根据下载的nginx版本更换对应版本):

tar -zxvf nginx-1.18.0.tar.gz

进入nginx-1.18.0目录

cd nginx-1.18.0

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

或者这一条命令搞定:

yum -y install make zlib-devel gcc-c++ libtool openssl openssl-devel

nginx 服务的常用命令

cd /usr/local/nginx/sbin/
./nginx  启动
./nginx -s stop  停止
./nginx -s quit  安全退出
./nginx -s reload  重新加载配置文件
ps aux|grep nginx  查看nginx进程

这个时候访问虚拟机配置的 ip 地址,如果可以打开下面这样一个页面,说明 nginx 启动成功:
图片.png

配置nginx.conf文件

vim /usr/local/nginx/conf/nginx.conf

增加如下配置:

    server {
            listen       80;
            server_name  localhost;
            #重要
            location / {
                root /usr/local/nginx/html/dist;  #前端项目存放在nginx中的位置
                index  index.html index.htm;
                try_files $uri $uri/ /index.html;  #防止刷新后自动跳到自带404页面
            }

在修改了配置文件后需要重新加载配置文件

/usr/local/nginx/sbin/nginx -s reload

至此nginx就配置好了。

3、安装 JDK1.8

前提:

#查看默认安装的jdk
[root@huagang ~]# rpm -qa|grep openjdk -i
java-1.7.0-openjdk-headless-1.7.0.261-2.6.22.2.el7_8.x86_64
java-1.8.0-openjdk-headless-1.8.0.262.b10-1.el7.x86_64
java-1.8.0-openjdk-1.8.0.262.b10-1.el7.x86_64
java-1.7.0-openjdk-1.7.0.261-2.6.22.2.el7_8.x86_64
#如果显示如上,先卸载
[root@huagang ~]# rpm -e --nodeps java-1.7.0-openjdk-headless-1.7.0.261-2.6.22.2.el7_8.x86_64
[root@huagang ~]# rpm -e --nodeps java-1.8.0-openjdk-headless-1.8.0.262.b10-1.el7.x86_64
[root@huagang ~]# rpm -e --nodeps java-1.8.0-openjdk-1.8.0.262.b10-1.el7.x86_64
[root@huagang ~]# rpm -e --nodeps java-1.7.0-openjdk-1.7.0.261-2.6.22.2.el7_8.x86_64
[root@huagang ~]# rpm -qa|grep openjdk -i
[root@huagang ~]# 

1、官网下载JDK1.8:https://www.oracle.com/java/t...

2、上传到Linux的 /home/ 文件下

3、在/home下创建一个目录java, 然后将压缩包解压到 java目录中

tar -zxvf jdk-8u331-linux-x64.tar.gz -C java

4、将java目录移动到 /usr/local 下

 mv java /usr/local

5、配置环境变量(classpath现在不需要配了,配置其他两项就可以了)

vim /etc/profile
#java environment
export JAVA_HOME=/usr/local/java/jdk1.8.0_331
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export PATH=$PATH:$JAVA_HOME/bin

6、让配置文件生效

source /etc/profile

7、java -version 进行验证是否成功

4、安装 MySQL5.7

1、查看是否安装过
rpm -qa |grep -i mysql 查看是否安装mysql安装包 或者 yum list installed | grep mysql
如果有内容说明已经按照
卸载命令:
yum remove mysql-community-common-5.7.20-1.el7.x86_64
yum remove mysql-community-client-5.7.20-1.el7.x86_64
yum remove mysql57-community-release-el7-11.noarch
yum remove mysql-community-libs-5.7.20-1.el7.x86_64
yum removemysql-community-server-5.7.20-1.el7.x86_64

2 下载并安装MySQL官方的 Yum Repository
wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm

3、安装MySql
yum -y install mysql57-community-release-el7-10.noarch.rpm

注意:(在执行安装MySQL服务器命令可能会遇见这个问题)
源 “MySQL 5.7 Community Server” 的 GPG 密钥已安装,但是不适用于此软件包。请检查;
解决方法:
rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022

4、处理完问题后开始安装MySQL服务器。
yum -y install mysql-community-server

先要安装iptables服务
yum install iptables-services
5、检查是否开机启动Mysql
systemctl is-enabled mysqld.service

6、设置开机启动Mysql
systemctl enable mysqld.service

7.启动Mysql服务
systemctl start mysqld.service

7、查看默认密码
grep 'temporary password' /var/log/mysqld.log
我这显示
2022-04-29T06:29:20.081674Z 1 [Note] A temporary password is generated for root@localhost: flgJSNaSa4)s
(如果没有生成
# 清理残留内容
rm -rf /var/lib/mysqllue
# 重启MySQL服务器
systemctl restart mysqld
# 重新生成初始密码)

8、第一次使用上面的初始密码登录
mysql -uroot -p

9.mysql5.7以后密码不能太简单,我们可以把密码策略改了,这样就可以用123456了
set global validate_password_length=6;
set global validate_password_policy=0;
ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';

10、开启mysql的远程访问(注意:下面命令开启的IP是 192.168.0.1,如要开启所有的,用%代替IP):
grant all privileges on *.* to 'root'@'192.168.0.1' identified by '123456' with grant option;
grant all privileges on *.* to 'root'@'%' identified by '123456' with grant option;
然后再输入下面命令(mysql 新设置用户或更改密码后需用flush privileges刷新MySQL的系统权限相关表,否则会出现拒绝访问)
flush privileges; 

11查看字符编码
show variables like 'chara%';

修改编码:
vim /etc/my.cnf
[mysqld]
character_set_server=utf8
init_connect='SET NAMES utf8'

保存退出并重启mysql服务  systemctl restart mysqld.service

12、如果防火请没有关闭需要开放端口3306,如果防火请关闭了就不需要这一步了
#查询端口是否开放
firewall-cmd --query-port=3306/tcp
# 开放3306端口
firewall-cmd --permanent --add-port=3306/tcp
# 移除端口
firewall-cmd --permanent --remove-port=3306/tcp
#重启防火墙(修改配置后要重启防火墙)
firewall-cmd --reload
# 参数解释
1、firwall-cmd:是Linux提供的操作firewall的一个工具;
2、--permanent:表示设置为持久;
3、--add-port:标识添加的端口;

做完以上配置后,可以尝试用Navicat连接这个数据库。
然后执行项目的SQL文件导入数据,我相信大家都ok,这就不再演示。

5、Vue项目打包部署

1)修改main.js中的baseURL的localhost以及所有有涉及到localhost的地方均改为申请到的阿里云服务器的公网IP。

2)然后在终端执行命令:

npm run build

打包后的文件在生成的dist文件夹中,前端项目打包完成。

3)将打包好的dist文件夹上传到/usr/local/nginx/html/中

4)启动nginx,在浏览器中访问前端项目。

6、Spring Boot 项目打包部署

1)修改properties.yml文件中的localhost为申请到的阿里云服务器的公网IP或者虚拟机中配置的IP。检查是否需要修改数据库密码。检查无误后打包。
2)使用maven打包成jar包
图片.png

3)将打包好的jar文件上传到Linux服务器中的/home/javaProject,然后执行运行命令:

java -jar cecms.jar

4)让项目一直在云服务器上运行的linux其实一个命令就可以搞定(想了解更多看最下面):

    nohup java -jar 包名.jar &

查看进程编号

    ps -ef | grep 包名

杀死进程

    kill -9 进程编号

方案一:https://www.cnblogs.com/21556...
方案二:https://www.csdn.net/tags/Mtj...

7、结束

至此,前后端项目都部署完了,你可以使用IP地址进行访问。有问题或需要更正的评论区留言,感谢大家观看!

少年的肩上不只有草长莺飞,还有肆无忌惮的勇往直前!

1 声望
0 粉丝
0 条评论
推荐阅读
有关ASCII、Unicode、UTF-8、GBK的一些知识
扩展知识:byte(字节):计算机中基本的存储单元bit(比特):计算机中最小的存储单位1byte=8bit字:计算机进行数据处理时,一次存取、加工和传送的数据长度称为字(word),一个字通常由一个或者多个字节构成。...

GoodLifeBro阅读 674

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

vue UI框架比较
最好基于vue2.0PC端:因为用过的是饿了么UI,所以比较以饿了么UI为基础element UI 饿了么UI支持vue2.x80分优点:组件的API方法、属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观N3 N3支持vue2.x70分优点:...

chinawzc22阅读 39.9k评论 17

Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20k评论 9

用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.6k评论 2

封面图
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...

wuwhs12阅读 2.6k

封面图
你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...

熊的猫8阅读 1.3k

封面图

少年的肩上不只有草长莺飞,还有肆无忌惮的勇往直前!

1 声望
0 粉丝
宣传栏