配置
Mysql8,jdk17,tomcat9,ngnix(如有)
云服务器
我使用的是阿里云的云服务器,因为有学生优惠+合作高校优惠,免费领了一年的服务器。
操作系统选择的是Ubuntu 22.04 64位 UEFI版。
部署项目一定要有公网ip,不然无法被访问。
安装必备软件
1.安装mysql8.0
先查找一下mysql安装包,如果查找不到记得要先更新 apt-get update
# 查找mysql安装包
apt-cache search mysql-server
开始安装
sudo apt-get install mysql-server-8.0
启动,结束数据库
service mysql restart #重启数据库
service mysql start #开启数据库
service mysql stop #结束数据库
可以使用ss-ltn指令来查看3306端口是否开启
配置数据库用户
使用root用户登陆数据库
sudo mysql -u root
查看账户密码配置
use mysql;
select host,user,plugin from user;
这里需要更改root用户的密码或者添加一个新的用户,不然无法远程连接或者登陆。
这里把数据库密码改成你自己设置的密码
update user set host = '%' where user = 'root';
flush privileges;
alter user 'root'@'%' identified with mysql_native_password by '数据库密码';
flush privileges;
更改完之后的配置
修改mysql配置文件
由于mysql默认是只能本机连接,所以我们需要修改一下它的配置文件
我们可以看到3306端口是被127.0.0.1端口也就是本地主机绑定的,这样是无法远程连接的
netstat -an | grep 3306
由于该配置文件是read-only的,所以我们需要root权限或者使用以下指令修改
如果没有安装vim 可以使用其他的文件读写工具。查看端口情况也需要安装一个包,或者依旧使用ss-ltn指令。
安装vim:sudo apt-get install vim
安装netstat:sudo apt-get install net-tools
sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf
打开之后,按下i进入插入模式,将其中的bind-address=127.0.0.1改为bind-address=0.0.0.0然后esc,输入:wq 保存写入退出。
重新启动并且查看端口:
sudo service mysql restart
netstat -an | grep 3306
在阿里云服务器实例-安全组中,开放3306端口,这样就可以远程连接mysql数据库了。
除此之外,防火墙可能也是影响不能远程连接的一个因素
需要能够远程连接的话,需要让防火墙处于Status: inactive,即不活跃状态。
sudo apt-get install ufw #如果没有需要安装
sudo ufw status #查看防火墙状态
sudo ufw disable #关闭防火墙
sudo ufw enable
sudo ufw default deny #开启防火墙,并默认拒绝所有本机以外的连接访问
我这里使用的是navicat远程连接数据库,在主机输入框输入你的云服务器的公网ip,密码输入你设置的mysql密码,测试连接之后,即可正常远程连接你的云数据库了!
2.安装jdk17
这里我为了适配springboot3所以安装的jdk17,如果没有别的需要建议安装jdk11,8版本,不然tomcat启动的时候会有一个大坑。这里可以改成11
sudo apt install openjdk-17-jdk
安装完成后,验证java
java -version
输出如下代表已经成功安装了
如果安装了多个jdk版本,可以通过设置默认jdk来确保当前的jdk生效
sudo update-alternatives --config java
选中你想要的jdk版本即可
3.安装tomcat9
前置条件:jdk已经成功安装
# 在apt中搜索tomcat
sudo apt search tomcat
# 安装tomcat9和tomcat9-admin
sudo apt install tomcat9 tomcat9-admin
安装完成后:
如果是jdk17,一定要执行这一步,不然永远无法启动tomcat
我这里是通过查看tomcat运行状态,发现它报错说找不到jdk,找了好多方法,也考虑过配置环境变量什么的,也想过jdk版本不兼容,最后都没想到是这个原因。
sudo vim /usr/libexec/tomcat9/tomcat-locate-java.sh
进入到该文件后,我们可以看到 for java_version in ……,这里原本是没有17的,我们一定要手动添加上去,不如永远无法启动tomcat!!!
配置用户组,不建议使用root配置,可以新建一个系统用户
sudo usermod -a -G tomcat 你的用户名
开启和结束tomcat服务的指令
sudo service tomcat9 start
sudo service tomcat9 stop
查看8080端口是否被占用,查看tomcat服务运行情况
ss -ltn #查看端口占用情况
systemctl status tomcat9.service #查看服务运行情况
如果没有开启可以使用指令开启8080端口,同理云服务器安全组也要开放8080端口
sudo ufw allow from any to any port 8080 proto tcp
在本地主机访问,http:你的服务器公网ip:8080,如果成功运行会显示
配置tomcat-admin用户
以下命令都需要root权限,首先找到这个xml文件
find / -name tomcat-users.xml
然后vim编辑 这里我们选择第一个文件
vim /etc/tomcat9/tomcat-users.xml
在xml文档中加入以下内容,最后一行的username和password就是你的用户和密码
<role rolename="tomcat "/>
<role rolename="role1 "/>
<role rolename=" manager-script"/>
<role rolename=" manager-gui"/>
<role rolename=" manager-status"/>
<role rolename=" admin-gui"/>
<role rolename=" admin-script"/>
<user username="tomcat" password="tomcat" roles="manager-gui,manager-script,tomcat,admin-gui,admin-script"/>
最后,访问云服务器公网ip:8080/manager,会显示需要登录,输入你设置的账号密码,登陆成功即可。
至此,你的tomcat也已经安装成功并且可以正常访问了,接下来只需要部署你的前后端项目即可。
部署前端vue项目
打包vue项目
我这里的项目以research为例,可以自行修改,这两步一定要改,不然找不到相关文件
在vue.config.js中:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
//输出文件夹名称
outputDir:'research',
publicPath:'/research/', //资源路径 默认/ 部署在tomcat服务器时需要注意
})
router文件夹中的index.js中:
const router = createRouter({
base:'/research/', //加入前缀请求路径
history: createWebHistory(process.env.BASE_URL),
routes
})
最后终端执行 npm run build
项目成功打包后,会在当前项目文件夹下生成一个research文件夹,这个就是我们打包好的前端项目文件夹。
部署
tomcat部署
直接将其放置到tomcat的webapps文件夹下即可。这里我使用的是ssh连接,方便直接上传文件,但是需要到云服务器设置。
至此,我们的research项目就可以被访问了。访问路径还是
公网ip:8080/research,这里的访问地址就是我们的文件夹名称。
Nginx部署
使用tomcat部署后面总是需要输入指定端口,很不美观,所以我们可以使用ngnix部署来解决这个问题。
这里有两种方法,一种是转发端口,将80端口的请求转发到我们的tomcat端口请求上。但是这种方法并不常用,也不是很美观。
第二种方法就是直接部署在Nginx服务器上,这里我们先下载Nginx并启动,直接访问我们的ip,默认就是80端口,就能直接访问到默认页面,此时我们的Nginx就成功启动了。
修改Nginx的配置文件Nginx.config,这里我们可以让ai帮我们生成一个配置文件,按照自己的需求修改路径即可。
server {
listen 80;
server_name example.com; # 你的域名或IP
location / {
root /var/www/my-vue-app/dist; # Vue项目构建后的文件目录
try_files $uri $uri/ /index.html; # 用来支持Vue-router的HTML5 History模式
index index.html index.htm;
}
# 如果需要处理API请求,可以添加一个location块
location /api/ {
proxy_pass http://backend_upstream; # 代理到后端API服务器
# 其他代理相关配置,如proxy_set_header等
}
# 配置错误页面
error_page 500 502 503 504 /500.html;
location = /500.html {
root /var/www/my-vue-app/dist;
}
}
修改成功后需要重新启动Nginx,使用service nginx restart 或 nginx -s reload(推荐) 进行nginx重启。
部署后端springboot项目
打包
将项目打包成可以执行的jar包,在maven下,可以直接双击package,即可打包。
生成的jar包在target文件夹下,我们只需要这个.jar结尾的jar包,直接放到云服务器上的某个问文件夹下即可,并cd到当前文件夹下,运行jar包。
部署运行
后台运行jar包项目:
java -jar app.jar & #后台运行jar包 不带&就无法后台运行 app改成你自己的jar包名称
记得云服务器一定要开放对应端口,建议将常用的端口一次性全部开放完。
查看端口占用情况:ss -ltn
我的项目使用的端口是9000端口,已经成功运行了。
至此,我们的vue+springboot前后端分离项目,已经成功部署到云服务器了。
当然,这只是最简单部署到云服务器的一种方式,还有更多方式期待探索。