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

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

部署所需部署Vue项目部署SpringBoot项目双证书，双域名配置

部署所需

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

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

部署Vue项目

打包： 开发工具中打开命令行执行 npm run build 部署： 打包后会在项目中生成dist文件夹，将文件夹中所有的文件拷贝到Nginx安装目录的 /html 文件夹下安装SSL证书： 腾讯云申请证书后，下载，将Nginx文件夹下的两个文件拷贝到Nginx安装目录下的 /conf 文件夹下配置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