Springboot+Vue项目部署到UBuntu（自用）-工具盒子

0.写在前面 {#0.%E5%86%99%E5%9C%A8%E5%89%8D%E9%9D%A2}

本文是个人的前后端分离项目，使用nginx反向代理分别部署到ubuntu服务器上，仅供个人记录和参考。

1. Vue项目 {#1.-vue%E9%A1%B9%E7%9B%AE}

在vue项目的package.json文件的脚本部分中，有个构建命令build。

执行构建命令 npm run build

执行完构建命令，会生成一个dist目录，里面包含了所有需要部署的静态资源。

dist目录上传到服务器

有一点要注意的是，确认nginx用户拥有访问/dist及其所有父目录的权限，不然网页请求会报500。

nginx用户在nginx.conf的一行。

2. Springboot项目 {#2.-springboot%E9%A1%B9%E7%9B%AE}

Springboot项目就很简单了，打个jar包放到服务器上启动就行了。

nohup java -DMYSQL_PASSWORD=密码 -jar jar包名.jar > jar包名.log 2>&1 &

注意在启动服务之前数据库先建表。

select host,user from user;
update user set host = 'new ip' where user = 'root' and host = 'old ip';
flush privileges;

如果没有java运行环境要先安装。

sudo apt update
sudo apt install openjdk-17-jdk
java -version

3. ssl证书 {#3.-ssl%E8%AF%81%E4%B9%A6}

要想实现https，ssl证书是必不可少的。通过Let's Encrypt获取免费ssl证书，并自动续期，可参考下文。

申请证书之前不要忘了把域名解析到服务器上。 https://www.cnblogs.com/michaelshen/p/18538178

4. nginx配置 {#4.-nginx%E9%85%8D%E7%BD%AE}

4.1 前端域名配置 {#4.1-%E5%89%8D%E7%AB%AF%E5%9F%9F%E5%90%8D%E9%85%8D%E7%BD%AE}

# ssl

server {
listen 80;
server_name 前端域名;


    # 将HTTP请求重定向到HTTPS
    return 301 https://$host$request_uri;




}


server {
#HTTPS的默认访问端口443。
#如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
listen 443 ssl;


#填写证书绑定的域名
server_name 前端域名;


#填写证书文件绝对路径
ssl_certificate /etc/letsencrypt/live/前端域名/fullchain.pem;
#填写证书私钥文件绝对路径
ssl_certificate_key /etc/letsencrypt/live/前端域名/privkey.pem;


ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;


#自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
#TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;


#表示优先使用服务端加密套件。默认开启
ssl_prefer_server_ciphers on;


    # 允许最大 1MB 的请求体




client_max_body_size 1m;

`location / {
root /xxxxxxxxxx/dist/;
try_files $uri $uri/ /index.html;
}
}`

说明一下两个server块的内容。

Vue项目的静态资源，监听80端口，将HTTP请求重定向到HTTPS。
Vue项目的静态资源，监听443端口，访问/xxxxxxxxxx/dist/路径下的静态资源。前端项目通过域名访问，需要提前准备ssl证书。

4.2 后端域名配置 {#4.2-%E5%90%8E%E7%AB%AF%E5%9F%9F%E5%90%8D%E9%85%8D%E7%BD%AE}

# api.ssl

server {
listen 80;
server_name 后端域名;


    # 将HTTP请求重定向到HTTPS
    return 301 https://$host$request_uri;




}


server {
#HTTPS的默认访问端口443。
#如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
listen 443 ssl;


#填写证书绑定的域名
server_name 后端域名;


#填写证书文件绝对路径
ssl_certificate /etc/letsencrypt/live/后端域名/fullchain.pem;
#填写证书私钥文件绝对路径
ssl_certificate_key /etc/letsencrypt/live/后端域名/privkey.pem;


ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;


#自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
#TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;


#表示优先使用服务端加密套件。默认开启
ssl_prefer_server_ciphers on;


    # 允许最大 1MB 的请求体




client_max_body_size 1m;


阻止对根路径的访问
=========



location = / {
deny all;
}


#允许特定路径下，将/api请求代理到upstream api
location /api/ {
allow all;


    proxy_pass http://api;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;




}


#阻止/api/ 以外的所有路径
location / {
deny all;
}
}

`#负载均衡
upstream api {
server 127.0.0.1:xxxx;
}`

说明一下两个server块的内容。