1.准备证书。
需要准备好ssl证书,证书的获取方式自行解决。不懂的可以百度一波,本人使用的通过腾讯云平台去获取的免费版 DV SSL证书
2.nginx配置
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
# HTTPS server
upstream api {
server 127.0.0.1:8081;
}
#https
server {
listen 443 ;
server_name localhost;
ssl on;
ssl_certificate /etc/pki/nginx/1_xiafyy.com_bundle.crt;
ssl_certificate_key /etc/pki/nginx/2_xiafyy.com.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
root html;
index index.html index.htm;
}
location /laoxia/ {
proxy_pass http://api/laoxia/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# When setting up Harbor behind other proxy, such as an Nginx instance, remove the below line if the proxy already has similar settings.
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
proxy_request_buffering off;
}
}
}
3.只需要把vue项目通过npm命令:npm run build后,把这些静态资源上传到服务器,然后通过root指定请求位置到上传的位置上即可。注意vue项目请求后台的baseUrl。本人配合上面的地址
location /laoxia/ {...}里面的laoxia是项目名称注意两个laoxia代表的意思不一样。
的前端baseUrl请求:
window.SITE_CONFIG.baseUrl = '//xiafyy.com/laoxia'
至此已经全部配置完毕。经过验证时可以访问到的
本人配置完后的地址:https://xiafyy.com/