SpringBoot+Vue+Nginx+ssl 前后端分离项目部署

部署所需

将项目部署在Linux上，需要这些东西

1. 域名： 在腾讯云购买的域名，并且在域名解析中添加二级域名作为API的域名，域名可以不需要没有；
2. SSL证书： 在腾讯云可免费申请，分别为购买的域名和解析的二级域名申请SSL证书，没购买域名也可以不需要；
3. Nginx： 安装教程详情见百度~；
4. JDK： 同上；

部署Vue项目

1. 打包： 开发工具中打开命令行执行

npm run build

2. 部署： 打包后会在项目中生成dist文件夹，将文件夹中所有的文件拷贝到Nginx安装目录的 /html 文件夹下
3. 安装SSL证书： 腾讯云申请证书后，下载，将Nginx文件夹下的两个文件拷贝到Nginx安装目录下的 /conf 文件夹下
4. 配置SSL： 编辑 /conf 文件夹下的 nginx.conf 文件

server {
    listen       443 ssl;
    #域名或者localhost
    server_name  www.xxxxx.cn;
    root   /usr/local/webserver/nginx/html;
    index  index.html index.htm;
    #以下两个为证书文件
    ssl_certificate 1_www.xxxxx.cn_bundle.crt;
    ssl_certificate_key 2_www.xxxxx.cn.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        index  index.html index.htm;
    }
    
    #如果加入此配置，可将接口https化
    #即访问www.xxxxx.cn/api/user/get_all相当于访问
    #https://你的IP:8080/api/user/get_all
    location /api/ {
        proxy_redirect off;
        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_pass http://localhost:8080/api/;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

# another virtual host using mix of IP-, name-, and port-based configuration
# HTTPS server
#
#访问80端口时转发到443端口，转为https访问
server {
    listen       80;
    server_name  www.xxxxx.cn;
    return 301 https://$host$request_uri;
}

这样配置完成，就可以使用域名访问你的项目了

部署SpringBoot项目

在IDEA中可使用Maven进行打包，打成jar包后，上传至服务器中，使用

java -jar xxx.jar

命令启动，如果上面配置了，那么就可以通过域名去访问你的接口。

双证书，双域名配置

上面那种情况，访问接口和网页都使用同一个域名，那如果要用不同域名呢？
那么使用二级域名就可以解决这个问题。
主域名：www.xxxxx.cn
二级域名：api.xxxxx.cn
配置
还是对 nginx.conf 文件进行修改

server {
    listen       443 ssl;
    server_name  www.xxxxx.cn;
    root   /usr/local/webserver/nginx/html;
    index  index.html index.htm;
    ssl_certificate 1_www.xxxxx.cn_bundle.crt;
    ssl_certificate_key 2_www.xxxxx.cn.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
# HTTPS server
#
server {
    listen       80;
    server_name  www.xxxxx.cn;
    return 301 https://$host$request_uri;
}
    
#API项目配置
server {
    listen       443 ssl;
    server_name  api.xxxxx.cn;
    root   /usr/local/webserver/nginx/html;
    index  index.html index.htm;
    ssl_certificate 1_api.xxxxx.cn_bundle.crt;
    ssl_certificate_key 2_api.xxxxx.cn.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        proxy_redirect off;
        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_pass http://localhost:8080/api/;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
# HTTPS server
#
server {
    listen       80;
    server_name  api.xxxxx.cn;
    return 301 https://$host$request_uri;
}

配置完成后，重启Nginx，就可以用不同域名访问你的页面和接口了。
页面：www.xxxxx.cn
接口：api.xxxxx.cn/api/user/get_all