个人网站的搭建与部署
这是我的个人网站地址
AquaMriusC Home,欢迎访问。
个人网站的搭建与部署需要以下几步:
1、个人网站项目已经开发完毕
我的网站后端采用SpringBoot技术开发,前端采用Vue技术开发,前后端项目分离。
后端项目:
前端项目:
2、对开发完毕的项目进行打包
注:项目打包前一定要确定好项目的各项配置是正确的,因为项目在本地tomcat服务器上运行和在远端云服务器上运行,需要的配置是不一样的。
2.1 后端项目打包
如果打包后找不到target目录,则可按如下操作进行设置
2.2 前端项目打包
vue项目打包前需要进行相关的配置,在vue.config.js文件下添加如下内容:
//vue打包配置
//配置公共路径(必须的)
publicPath: './',
//打包到哪个文件夹
outputDir: 'dist',
//将静态资源打包
assetsDir: 'static',
//打包的时候是否取消eslint代码检查
lintOnSave: true,
//去除打包后js的map文件
productionSourceMap: true,
//去除console
configureWebpack: {
//关闭警告
performance: {
hints: 'warning',
//入口起点的最大体积
maxEntrypointSize: 50000000,
//生成文件的最大体积
maxAssetSize: 30000000,
}
}
配置完成后开始打包:
3、对打包后的项目进行部署上线
项目部署上线的前提是自己有一个域名和云服务器,我使用的是.top域名和阿里云轻量应用服务器,如果自己没有,参考博客
地址 获取,如果已经拥有则忽略此操作即可。
3.1 Vue项目部署
3.2 SpringBoot项目部署
3.2.1 上传jar包及脚本
首先下载jar包在linux系统上启动的通用脚本,启动脚本和配置文件下载,使用脚本启动可以保证后端项目始终是启动的,下载完成后把解压出来的文件上传到服务器jar包所在的文件夹。
3.2.2 查看项目端口是否被占用
项目启动前,先检查自己的后端项目端口是否被占用,如果被占用则需要先Kill杀死占用端口的进程,我后端项目的端口是8090。
通过
netstat -an | grep 8090
发现该端口被占用了,于是查询该端口的PID
lsof -i:8090
根据PID杀死进程
kill -s 9 8885
然后打开宝塔,重新运行
3.2.3 使用脚本启动后端项目
- 进入存放后端项目jar的目录,然后打开宝塔终端
- 输入
sh build.sh
命令来运行构建项目,会显示构建成功
- 进入autoScript文件夹
cd autoScript
,里面有几个sh文件,运行sh startup.sh
命令,项目就会启动了,并且永远不会停止
启动成功后,直接关闭终端窗口即可
- 如果想关闭项目,使用
sh shutdown.sh
命令即可
4、配置Nginx反向代理
因为前后端项目运行在同一台服务器,所以必定端口不同,需要配置 Nginx 才能请求到后端,所以在站点设置里的配置文件中,将vue项目中的反向代理,在Nginx中在配置一遍。
上述配置只是我的项目配置,只做参考。
location /api/ {
proxy_pass http://xxx.xxx.xxx.xxx:xxxx/;
}