我刚开始做前端的时候,也是不会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/
需要/
结束,代理的域名也需要/
结束,这两个地方是需要注意的。
综上所述,大家多多练习,然后发现问题解决问题。