nginx部署vue的项目

我刚开始做前端的时候,也是不会nginx的。基本都是本地开发在脚手架提供的node服务环境就可以运行了,如果接口出现的跨域 就配置代理,项目上线的时候就是运维同事帮忙部署和配置好所有的事项。后来进到一家新公司的时候才发现,要自己做好部署准备的所有配置给到运维同事处理的,在那时候我才开始去了解nginx的使用,所以对于前端来说需要多学习,毕竟现在一个纯前端,真的不好找到工作了。

还是老规则,话不多说上完整demo。

nginx 复制代码
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;


    server {
        listen       9899;
        server_name  localhost;

        location / {
            root   D:/demo/nginx/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        location /api/ {
            proxy_pass http://172.10.1.6:9898/;
        }
    }
}

上面的配置就是一个HTTP的静态站点和api代理的配置,其实nginx里面还提供了HTTPS的,我这里只是配置了HTTP而已,大家可以根据自己的需求调整就好,配置是一样的。

其实我们下载一个新的nginx下来之后看到的配置是这样的

nginx 复制代码
location / {
    root   html;
    index  index.html index.htm;
}

然后我们很多第一次自己配置静态站点的时候,有的能成功,有的不能成功。其实这个配置对于多页面站点是可以了的,但是对于单页应用(SPA)访问到的是空白的。 为什么单页应用(SPA)访问到的是空白的呢?其实原因很简单,就是我们访问的是index.html,然而是读取不到路由的内容的,所以为了解决这个问题就需要更改配置,如下

nginx 复制代码
location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

如果我们要做api代理的时候,需要配置如下

nginx 复制代码
location /api/ {
    proxy_pass http://172.10.1.6:9898/;
}

这里和开发环境中的代理有点不一样的,是/api/需要/结束,代理的域名也需要/结束,这两个地方是需要注意的。

综上所述,大家多多练习,然后发现问题解决问题。

相关推荐
xujiangyan_17 小时前
nginx的反向代理和负载均衡
服务器·网络·nginx
viqecel1 天前
网站改版html页面 NGINX 借用伪静态和PHP脚本 实现301重定向跳转
nginx·php·nginx重定向·301重定向·html页面重定向
硪就是硪1 天前
内网环境将nginx的http改完https访问
nginx·http·https
ak啊2 天前
Nginx 安全加固详细配置指南
nginx
沐土Arvin2 天前
Nginx 核心配置详解与性能优化最佳实践
运维·开发语言·前端·nginx·性能优化
haoranyyy2 天前
mac环境中Nginx安装使用 反向代理
linux·服务器·nginx
ak啊2 天前
Nginx 高级缓存配置与优化
nginx
再学一丢丢3 天前
Keepalived+LVS+nginx高可用架构
nginx·架构·lvs
xujiangyan_3 天前
nginx的自动跳转https
服务器·nginx·https
tingting01193 天前
k8s 1.30 安装ingress-nginx
nginx·容器·kubernetes