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/需要/结束,代理的域名也需要/结束,这两个地方是需要注意的。

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

相关推荐
IT成长日记1 天前
【Nginx开荒攻略】Nginx主配置文件结构与核心模块详解:从0到1掌握nginx.conf:
linux·运维·nginx·配置文件
ZzzZZzzzZZZzzzz…1 天前
Nginx_Tomcat综合案例
运维·nginx·tomcat·负载均衡·rhce·反向代理·https加密服务
VueVirtuoso2 天前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
007php0072 天前
Redis高级面试题解析:深入理解Redis的工作原理与优化策略
java·开发语言·redis·nginx·缓存·面试·职场和发展
Xxtaoaooo2 天前
Nginx 502 网关错误:upstream 超时配置的踩坑与优化
运维·nginx·负载均衡·502错误·upstream超时
爱琴孩2 天前
企业级VIP+Nginx的网络访问方案
nginx·keepalive·vip
看好多桂花树2 天前
Nginx 优化
运维·nginx
羑悻的小杀马特2 天前
Docker 容器化部署核心实战:从镜像仓库管理、容器多参数运行到 Nginx 服务配置与正反向代理原理解析
nginx·docker·容器·镜像仓库
白鹭2 天前
nginx(介绍+源码安装+平滑升级和回滚)
linux·运维·服务器·nginx·回滚·平滑升级
先锋队长2 天前
linux系统搭建nacos集群,并通过nginx实现负载均衡
linux·nginx·负载均衡