轻量应用服务器部署 SpringBoot 前后端分离项目

小鱼儿 2023-10-01 17:47 19阅读 0赞

--------------------

title: 轻量应用服务器部署 SpringBoot 前后端分离项目  
date: 2022-02-09 23:59:34  
tags:

*  服务器
 *  SpringBoot  
    categories:
 *  服务器  
    cover: https://cover.png  
    feature: false

--------------------

**部署 Nginx 见：[轻量应用服务器使用总结][Link 1]**

## 1. 前端项目部署 ##

1、这里使用的是 vue 项目，运行 `npm run build`，会生成一个 dist 文件夹  
![在这里插入图片描述][9214dafaf7334639be2b8a30d8d92078.png]  
![在这里插入图片描述][74dc140281664039b6154c1720e947ba.png]  
2、把文件上传到服务器 Nginx 安装目录的 html 目录下，先压缩成 ZIP 包上传然后再解压，然后重命名为 blog（这里的文件路径与 Nginx 配置文件的路径对应即可）  
![在这里插入图片描述][226c813410014b1da08d1cbd3ca92165.png]  
![在这里插入图片描述][88006fef55834cacb3f14f9db0de8b0c.png]  
3、修改 Nginx 配置文件，`/usr/java/nginx-1.22.0/conf/nginx.conf`  
![在这里插入图片描述][fbc9f2284e444584a1d7dc79dc26bc45.png]  
**注意：** 假如 Vue 项目使用的是 WebHistory 模式，这样配置刷新会存在 404 问题，因为 Web 单页面开发模式，只有一个 index.html 入口，其他路径是前端路由去跳转的，Nginx 没有对应这个路径，所以就是 404 了，此时需要加上一个配置，读取 index.html 文件

![9ab7fe3863188812baa4b9aca1565c55.png][]  
如果使用 Hash 模式，似乎不会出现这个问题

4、Nginx 没有启动的直接启动 Nginx，已经启动的运行 `./nginx -s reload` 更新配置文件，指令见 6.2  
![在这里插入图片描述][1a7a609ca77f407fad71ae01772304ca.png]  
5、在防火墙里放开对应的端口  
![在这里插入图片描述][4d448b3fecdc42e4ba5a9b195d3e9fe5.png]  
6、通过浏览器地址加端口号即可访问，这里因为还没有后端，所以页面没有数据  
![在这里插入图片描述][7b1776e35b004c499b4ffceb6c06f8a5.png]

## 2. 后端项目部署 ##

1、上传jar包  
在 Maven 里点击 package，将项目打包  
![在这里插入图片描述][e84d635193204d4bbd506e561dc34f82.png]  
在项目路径下的 target 文件夹中会有一个 jar 文件  
![在这里插入图片描述][0abb9273cd3e4109a48bdbf1be69b8fd.png]  
将该文件上传到服务器  
![在这里插入图片描述][deacc06268754b3fa146bbe4d56fc38e.png]  
2、启动项目  
进入 jar 包所在文件夹，执行 `java -jar FanBlog-0.0.1-SNAPSHOT.jar`，启动项目，使用服务器地址加项目中设置的内置 Tomcat 的端口即可访问。端口需要在防火墙里开放。  
**但这种方式关闭终端 Tomcat 就停止了，关闭后项目不能再访问。**

可以使用 `nohup java -jar FanBlog-0.0.1-SNAPSHOT.jar` 启动，nohup 表示将该程序在后台一直运行，即使退出终端，项目也可以访问。  
![在这里插入图片描述][9509e0687b42481ba437371d637bf08b.png]  
同时会在 jar 包所在目录生成一个 nohup.out 文件，记录运行过程中的信息  
3、关闭  
要关闭项目可以使用 `ps -ef | grep 进程名称关键字`，显示进程相关信息  
![在这里插入图片描述][d0166747c3484ed6833333dbb823825a.png]  
然后使用 `kill -9 进程id`，关闭进程，项目停止。  
![在这里插入图片描述][635e51b929d14deba0c1926f606d6a89.png]

## 3. 使用 Nginx 反向代理解决跨域 ##

修改 Nginx 的配置文件 `/usr/java/nginx-1.22.0/conf/nginx.conf` ，在前面前端项目 Nginx 配置的基础上，加上一个反向代理的配置  
![在这里插入图片描述][f78aa7e823b94905b09cde15802133e4.png]  
当请求路径为 `/fanBlog` 时，将请求代理到8001端口，即后端运行端口，再刷新 Nginx 配置，访问前端页面即可看到后端返回数据  
![在这里插入图片描述][998cdaa10c71487a86d12d6603b71f47.png]

## 4. 配置域名访问 ##

先配置域名解析到服务器  
![在这里插入图片描述][b5361a06b91645038940f291da2c4e3c.png]  
修改 Nginx 配置文件，将 `server_name` 修改为域名地址  
![在这里插入图片描述][c3e59b1ec079487d9c6be88450fc782b.png]  
即可通过域名加端口访问，这里设置端口为 80，即可省略端口号，直接通过域名访问  
![在这里插入图片描述][b13ba5c050734265b756bd8bdeb49c04.png]

## 5. 配置 SSL 证书 ##

1、先下载 Nginx 服务器类型证书，上传到服务器  
![在这里插入图片描述][fac9ee4b71c044ecadaaa3a8f3f878b9.png]  
2、解压  
![在这里插入图片描述][186753a9817a42eaa0155691c9ef4220.png]  
3、移动文件  
![在这里插入图片描述][36a9afe0081d4c3e80a29fe383c2eafc.png]  
3、在 Nginx 配置文件里配置证书以及修改其他配置

# 设置 HTTP 请求自动跳转 HTTPS（可选）
    server {
        
    	listen 80;
    	# 证书绑定的域名，例如：cloud.tencent.com
    	server_name cloud.tencent.com;
    	# 将 http 的域名请求转成 https
    	return 301 https://$host$request_uri;
    }
    server {
        
    	# SSL 端口
    	listen 443 ssl;
    	# 证书绑定的域名，例如：cloud.tencent.com
    	server_name  cloud.tencent.com;
    	      
    	# 证书文件名称
    	ssl_certificate      ../certificate/cloud.tencent.com_bundle.pem;
    	# 私钥文件名称
    	ssl_certificate_key  ../certificate/cloud.tencent.com.key;
    
    	# 默认配置
    	ssl_session_cache    shared:SSL:1m;
    	ssl_session_timeout  5m;
    	ssl_ciphers  HIGH:!aNULL:!MD5;
    	ssl_prefer_server_ciphers  on;
    	......
    }

![在这里插入图片描述][653569838c3c46ce86d966d29ab31a0f.png]  
刷新 Nginx 配置，即可通过 HTTPS 访问  
![在这里插入图片描述][35a66c9f31b2447c9586f5be9f1fca9a.png]

[Link 1]: https://blog.csdn.net/ACE_U_005A/article/details/122767405
[9214dafaf7334639be2b8a30d8d92078.png]: https://img-blog.csdnimg.cn/9214dafaf7334639be2b8a30d8d92078.png
[74dc140281664039b6154c1720e947ba.png]: https://img-blog.csdnimg.cn/74dc140281664039b6154c1720e947ba.png
[226c813410014b1da08d1cbd3ca92165.png]: https://img-blog.csdnimg.cn/226c813410014b1da08d1cbd3ca92165.png
[88006fef55834cacb3f14f9db0de8b0c.png]: https://img-blog.csdnimg.cn/88006fef55834cacb3f14f9db0de8b0c.png
[fbc9f2284e444584a1d7dc79dc26bc45.png]: https://img-blog.csdnimg.cn/fbc9f2284e444584a1d7dc79dc26bc45.png
[9ab7fe3863188812baa4b9aca1565c55.png]: https://img-blog.csdnimg.cn/img_convert/9ab7fe3863188812baa4b9aca1565c55.png
[1a7a609ca77f407fad71ae01772304ca.png]: https://img-blog.csdnimg.cn/1a7a609ca77f407fad71ae01772304ca.png
[4d448b3fecdc42e4ba5a9b195d3e9fe5.png]: https://img-blog.csdnimg.cn/4d448b3fecdc42e4ba5a9b195d3e9fe5.png
[7b1776e35b004c499b4ffceb6c06f8a5.png]: https://img-blog.csdnimg.cn/7b1776e35b004c499b4ffceb6c06f8a5.png
[e84d635193204d4bbd506e561dc34f82.png]: https://img-blog.csdnimg.cn/e84d635193204d4bbd506e561dc34f82.png
[0abb9273cd3e4109a48bdbf1be69b8fd.png]: https://img-blog.csdnimg.cn/0abb9273cd3e4109a48bdbf1be69b8fd.png
[deacc06268754b3fa146bbe4d56fc38e.png]: https://img-blog.csdnimg.cn/deacc06268754b3fa146bbe4d56fc38e.png
[9509e0687b42481ba437371d637bf08b.png]: https://img-blog.csdnimg.cn/9509e0687b42481ba437371d637bf08b.png
[d0166747c3484ed6833333dbb823825a.png]: https://img-blog.csdnimg.cn/d0166747c3484ed6833333dbb823825a.png
[635e51b929d14deba0c1926f606d6a89.png]: https://img-blog.csdnimg.cn/635e51b929d14deba0c1926f606d6a89.png
[f78aa7e823b94905b09cde15802133e4.png]: https://img-blog.csdnimg.cn/f78aa7e823b94905b09cde15802133e4.png
[998cdaa10c71487a86d12d6603b71f47.png]: https://img-blog.csdnimg.cn/998cdaa10c71487a86d12d6603b71f47.png
[b5361a06b91645038940f291da2c4e3c.png]: https://img-blog.csdnimg.cn/b5361a06b91645038940f291da2c4e3c.png
[c3e59b1ec079487d9c6be88450fc782b.png]: https://img-blog.csdnimg.cn/c3e59b1ec079487d9c6be88450fc782b.png
[b13ba5c050734265b756bd8bdeb49c04.png]: https://img-blog.csdnimg.cn/b13ba5c050734265b756bd8bdeb49c04.png
[fac9ee4b71c044ecadaaa3a8f3f878b9.png]: https://img-blog.csdnimg.cn/fac9ee4b71c044ecadaaa3a8f3f878b9.png
[186753a9817a42eaa0155691c9ef4220.png]: https://img-blog.csdnimg.cn/186753a9817a42eaa0155691c9ef4220.png
[36a9afe0081d4c3e80a29fe383c2eafc.png]: https://img-blog.csdnimg.cn/36a9afe0081d4c3e80a29fe383c2eafc.png
[653569838c3c46ce86d966d29ab31a0f.png]: https://img-blog.csdnimg.cn/653569838c3c46ce86d966d29ab31a0f.png
[35a66c9f31b2447c9586f5be9f1fca9a.png]: https://img-blog.csdnimg.cn/35a66c9f31b2447c9586f5be9f1fca9a.png