[Java知识库]个人网站的搭建与部署

个人网站的搭建与部署

这是我的个人网站地址 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、在浏览器访问你的个人网站

参考网址