Springboot+Vue项目部署到UBuntu（自用）

0.写在前面

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

1. Vue项目

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

执行构建命令 npm run build

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

dist目录上传到服务器

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

nginx用户在nginx.conf的一行。

2. Springboot项目

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

（后续可考虑使用Docker部署）

3. ssl证书

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

申请证书之前不要忘了把域名解析到服务器上。

4. nginx配置

4.1 前端域名配置

# 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块的内容。

1. Vue项目的静态资源，监听80端口，将HTTP请求重定向到HTTPS。

2. Vue项目的静态资源，监听443端口，访问/xxxxxxxxxx/dist/路径下的静态资源。前端项目通过域名访问，需要提前准备ssl证书。

4.2 后端域名配置

# 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块的内容。

1. 监听80端口，重定向到https。

2. Springboot项目，监听443端口，所有API请求指向后端域名，同样需要ssl证书。因为是后端项目，/api/以外的所有请求路径均拒绝访问，返回403。

5. 测试

以上。