个人网站的搭建与部署

这是我的个人网站地址 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/;
}

5、在浏览器访问你的个人网站

在这里插入图片描述

参考网址