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

---

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

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

---

部署 Nginx 见：轻量应用服务器使用总结

1. 前端项目部署

1、这里使用的是 vue 项目，运行 npm run build，会生成一个 dist 文件夹


2、把文件上传到服务器 Nginx 安装目录的 html 目录下，先压缩成 ZIP 包上传然后再解压，然后重命名为 blog（这里的文件路径与 Nginx 配置文件的路径对应即可）


3、修改 Nginx 配置文件，/usr/java/nginx-1.22.0/conf/nginx.conf

注意： 假如 Vue 项目使用的是 WebHistory 模式，这样配置刷新会存在 404 问题，因为 Web 单页面开发模式，只有一个 index.html 入口，其他路径是前端路由去跳转的，Nginx 没有对应这个路径，所以就是 404 了，此时需要加上一个配置，读取 index.html 文件

如果使用 Hash 模式，似乎不会出现这个问题

4、Nginx 没有启动的直接启动 Nginx，已经启动的运行 ./nginx -s reload 更新配置文件，指令见 6.2

5、在防火墙里放开对应的端口

6、通过浏览器地址加端口号即可访问，这里因为还没有后端，所以页面没有数据

2. 后端项目部署

1、上传jar包
在 Maven 里点击 package，将项目打包

在项目路径下的 target 文件夹中会有一个 jar 文件

将该文件上传到服务器

2、启动项目
进入 jar 包所在文件夹，执行 java -jar FanBlog-0.0.1-SNAPSHOT.jar，启动项目，使用服务器地址加项目中设置的内置 Tomcat 的端口即可访问。端口需要在防火墙里开放。
但这种方式关闭终端 Tomcat 就停止了，关闭后项目不能再访问。

可以使用 nohup java -jar FanBlog-0.0.1-SNAPSHOT.jar 启动，nohup 表示将该程序在后台一直运行，即使退出终端，项目也可以访问。

同时会在 jar 包所在目录生成一个 nohup.out 文件，记录运行过程中的信息
3、关闭
要关闭项目可以使用 ps -ef | grep 进程名称关键字，显示进程相关信息

然后使用 kill -9 进程id，关闭进程，项目停止。

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

修改 Nginx 的配置文件 /usr/java/nginx-1.22.0/conf/nginx.conf ，在前面前端项目 Nginx 配置的基础上，加上一个反向代理的配置

当请求路径为 /fanBlog 时，将请求代理到8001端口，即后端运行端口，再刷新 Nginx 配置，访问前端页面即可看到后端返回数据

4. 配置域名访问

先配置域名解析到服务器

修改 Nginx 配置文件，将 server_name 修改为域名地址

即可通过域名加端口访问，这里设置端口为 80，即可省略端口号，直接通过域名访问

5. 配置 SSL 证书

1、先下载 Nginx 服务器类型证书，上传到服务器

2、解压

3、移动文件

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;
	......
}

刷新 Nginx 配置，即可通过 HTTPS 访问