Nginx配置Vue前后端分离项目

项目概述

项目后端采用Node.js提供RESTful API服务,监听3000端口。项目前端采用Vue,打包好的dist文件夹路径为/root/vue/。使用Nginx做反向代理实现前后端分离。

Nginx配置

1. 配置后端
1
2
3
4
5
http {
upstream node.server {
server 127.0.0.1:3000;
}
}
1
2
3
4
5
6
7
8
9
10
location /api/ {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass_header Server;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_pass http://node.server;
}
2. 配置前端
1
2
3
4
5
6
7
location / {
alias /root/project/register/app/views/;
try_files $uri $uri/ @rewrites; # 尝试访问资源,若无资源则重定向至index.html
}
location @rewrites {
rewrite ^/(.*) /index.html last;
}
3. 配置HTTPS
1
2
3
4
5
6
7
8
server {
ssl_certificate cert/****_bundle.crt; # bundle.crt路径
ssl_certificate_key cert/****.key; # ****.key路径
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNUL$
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
}
4. 配置HTTP跳转HTTPS
1
2
3
4
5
6
server {
listen 80;
listen [::]:80;
server_name iot.musiiot.top;
rewrite ^(.*)$ https://$host$1 permanent;
}
打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • © 2019-2021 musi

请我喝杯咖啡吧~

支付宝
微信