代码改变世界

Nginx配置VUE项目Https访问

2022-10-13 17:06  猎手家园  阅读(948)  评论(0编辑  收藏  举报

配置包括两部分:一是nginx的安装和基本配置,见传送门;二是关于vue项目的配置。

1、关于Nginx的安装:传送门

2、现在大多项目都做了前后端分离,前端比较常用的就是VUE了,如何配置Https访问?

server {
    listen                  80;
    server_name             www.你的域名.com;
    rewrite ^(.*)$ https://$host$1 permanent;
}
server {
    listen 443 ssl;
    server_name                 www.你的域名.com;
    #SSL证书文件
    ssl_certificate             /usr/local/nginx/conf/ca/www.你的域名.com/你的域名.com_bundle.pem;
    ssl_certificate_key         /usr/local/nginx/conf/ca/www.你的域名.com/你的域名.com.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;
    #Nginx日志目录
    access_log           /usr/local/nginx/logs/www.你的域名.local/www.你的域名.local_access.log main;
    error_log            /usr/local/nginx/logs/www.你的域名.local/www.你的域名.local_error.log warn;

    #VUE项目文件存放目录
    location / {
        root             /root/export/apps/www.你的域名.local.vue/;
        index            index.html;
        try_files        $uri $uri/ /index.html;
        autoindex        on;
        autoindex_exact_size on;
        autoindex_localtime  on;
    }

    #这里说明一下:如果你的VUE通过异步获取数据,这里配置你的接口路由,直接走内网,不需要出公网绕一圈再回来,提高速度
    location /api/ {
        proxy_connect_timeout 15s;
        proxy_send_timeout 15s;
        proxy_read_timeout 15s;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://127.0.0.1:8001/;
    }
}