欢迎光临
我们一直在努力

前端必备 Nginx 配置

Nginx (engine x) 是一个轻量级高性能的HTTP和反向代理服务器,同时也是一个通用 代理服务器 (TCP/UDP/IMAP/POP3/SMTP),最初由俄罗斯人Igor Sysoev编写。

基本命令

nginx -t             检查配置文件是否有语法错误
nginx <span class="hljs-_">-s</span> reload       热加载,重新加载配置文件
nginx <span class="hljs-_">-s</span> stop         快速关闭
nginx <span class="hljs-_">-s</span> quit         等待工作进程处理完成后关闭
<span class="copy-code-btn js-evernote-checked" data-evernote-id="463">复制代码</span>

搭建好nginx服务器并启动过后,我们先看nginx默认配置,再逐个介绍不同使用场景。

默认配置

Nginx 安装目录下, 我们复制一份`nginx.conf`成`nginx.conf.default`作为配置文件备份,然后修改`nginx.conf`

<span class="hljs-comment js-evernote-checked" data-evernote-id="373"># 工作进程的数量</span>
<span class="hljs-attribute js-evernote-checked" data-evernote-id="436">worker_processes</span>  <span class="hljs-number js-evernote-checked" data-evernote-id="403">1</span>;
<span class="hljs-section js-evernote-checked" data-evernote-id="433">events</span> {
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="437">worker_connections</span>  <span class="hljs-number js-evernote-checked" data-evernote-id="404">1024</span>; <span class="hljs-comment js-evernote-checked" data-evernote-id="374"># 每个工作进程连接数</span>
}

<span class="hljs-section js-evernote-checked" data-evernote-id="434">http</span> {
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="438">include</span>       mime.types;
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="439">default_type</span>  application/octet-stream;

    <span class="hljs-comment js-evernote-checked" data-evernote-id="375"># 日志格式</span>
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="440">log_format</span>  access  <span class="hljs-string js-evernote-checked" data-evernote-id="430">'<span class="hljs-variable js-evernote-checked" data-evernote-id="405">$remote_addr</span> - <span class="hljs-variable js-evernote-checked" data-evernote-id="406">$remote_user</span> [<span class="hljs-variable js-evernote-checked" data-evernote-id="407">$time_local</span>] <span class="hljs-variable js-evernote-checked" data-evernote-id="408">$host</span> "<span class="hljs-variable js-evernote-checked" data-evernote-id="409">$request</span>" '</span>
                  <span class="hljs-string js-evernote-checked" data-evernote-id="431">'<span class="hljs-variable js-evernote-checked" data-evernote-id="410">$status</span> <span class="hljs-variable js-evernote-checked" data-evernote-id="411">$body_bytes_sent</span> "<span class="hljs-variable js-evernote-checked" data-evernote-id="412">$http_referer</span>" '</span>
                  <span class="hljs-string js-evernote-checked" data-evernote-id="432">'"<span class="hljs-variable js-evernote-checked" data-evernote-id="413">$http_user_agent</span>" "<span class="hljs-variable js-evernote-checked" data-evernote-id="414">$http_x_forwarded_for</span>" "<span class="hljs-variable js-evernote-checked" data-evernote-id="415">$clientip</span>"'</span>;
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="441">access_log</span>  /srv/log/nginx/access.log  access; <span class="hljs-comment js-evernote-checked" data-evernote-id="376"># 日志输出目录</span>
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="442">gzip</span>  <span class="hljs-literal js-evernote-checked" data-evernote-id="416">on</span>;
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="443">sendfile</span>  <span class="hljs-literal js-evernote-checked" data-evernote-id="417">on</span>;

    <span class="hljs-comment js-evernote-checked" data-evernote-id="377"># 链接超时时间,自动断开</span>
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="444">keepalive_timeout</span>  <span class="hljs-number js-evernote-checked" data-evernote-id="418">60</span>;

    <span class="hljs-comment js-evernote-checked" data-evernote-id="378"># 虚拟主机</span>
    <span class="hljs-section js-evernote-checked" data-evernote-id="435">server</span> {
        <span class="hljs-attribute js-evernote-checked" data-evernote-id="445">listen</span>       <span class="hljs-number js-evernote-checked" data-evernote-id="419">8080</span>;
        <span class="hljs-attribute js-evernote-checked" data-evernote-id="446">server_name</span>  localhost; <span class="hljs-comment js-evernote-checked" data-evernote-id="379"># 浏览器访问域名</span>

        <span class="hljs-attribute js-evernote-checked" data-evernote-id="447">charset</span> utf-<span class="hljs-number js-evernote-checked" data-evernote-id="420">8</span>;
        <span class="hljs-attribute js-evernote-checked" data-evernote-id="448">access_log</span>  logs/localhost.access.log  access;

        <span class="hljs-comment js-evernote-checked" data-evernote-id="380"># 路由</span>
        <span class="hljs-attribute js-evernote-checked" data-evernote-id="449">location</span> / {
            <span class="hljs-attribute js-evernote-checked" data-evernote-id="450">root</span>   www; <span class="hljs-comment js-evernote-checked" data-evernote-id="381"># 访问根目录</span>
            <span class="hljs-attribute js-evernote-checked" data-evernote-id="451">index</span>  index.html index.htm; <span class="hljs-comment js-evernote-checked" data-evernote-id="382"># 入口文件</span>
        }
    }

    <span class="hljs-comment js-evernote-checked" data-evernote-id="383"># 引入其他的配置文件</span>
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="452">include</span> servers/*;
}
<span class="copy-code-btn js-evernote-checked" data-evernote-id="464">复制代码</span>

搭建站点

在其他配置文件`servers`目录下,添加新建站点配置文件 xx.conf。

电脑 hosts 文件添加  127.0.0.1   xx_domian

<span class="hljs-comment js-evernote-checked" data-evernote-id="384"># 虚拟主机</span>
server {
    listen       8080;
    server_name  xx_domian; <span class="hljs-comment js-evernote-checked" data-evernote-id="385"># 浏览器访问域名</span>

    charset utf-8;
    access_log  logs/xx_domian.access.log  access;

    <span class="hljs-comment js-evernote-checked" data-evernote-id="386"># 路由</span>
    location / {
        root   www; <span class="hljs-comment js-evernote-checked" data-evernote-id="387"># 访问根目录</span>
        index  index.html index.htm; <span class="hljs-comment js-evernote-checked" data-evernote-id="388"># 入口文件</span>
    }
}
<span class="copy-code-btn js-evernote-checked" data-evernote-id="465">复制代码</span>

执行命令 nginx -s reload,成功后浏览器访问  xx_domian 就能看到你的页面

根据文件类型设置过期时间

location ~.*\.css$ {
    expires 1d;
    <span class="hljs-built_in js-evernote-checked" data-evernote-id="459">break</span>;
}
location ~.*\.js$ {
    expires 1d;
    <span class="hljs-built_in js-evernote-checked" data-evernote-id="460">break</span>;
}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
    access_log off;
    expires 15d;    <span class="hljs-comment js-evernote-checked" data-evernote-id="389">#保存15天</span>
    <span class="hljs-built_in js-evernote-checked" data-evernote-id="461">break</span>;
}

<span class="hljs-comment js-evernote-checked" data-evernote-id="390"># curl -x127.0.0.1:80 http://www.test.com/static/image/common/logo.png -I #测试图片的max-age</span>
复制代码<span class="copy-code-btn js-evernote-checked" data-evernote-id="466">复制代码</span>

禁止文件缓存

开发环境经常改动代码,由于浏览器缓存需要强制刷新才能看到效果。这是我们可以禁止浏览器缓存提高效率

location ~* \.(js|css|png|jpg|gif)$ {
    add_header Cache-Control no-store;
}<span class="copy-code-btn js-evernote-checked" data-evernote-id="467">复制代码</span>

防盗链

可以防止文件被其他网站调用

<span class="hljs-attribute js-evernote-checked" data-evernote-id="453">location</span> <span class="hljs-regexp js-evernote-checked" data-evernote-id="457">~* \.(gif|jpg|png)$</span> {
    <span class="hljs-comment js-evernote-checked" data-evernote-id="391"># 只允许 192.168.0.1 请求资源</span>
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="454">valid_referers</span> <span class="hljs-literal js-evernote-checked" data-evernote-id="421">none</span> <span class="hljs-literal js-evernote-checked" data-evernote-id="422">blocked</span> <span class="hljs-number js-evernote-checked" data-evernote-id="423">192.168.0.1</span>;
    <span class="hljs-attribute js-evernote-checked" data-evernote-id="455">if</span> (<span class="hljs-variable js-evernote-checked" data-evernote-id="424">$invalid_referer</span>) {
       <span class="hljs-attribute js-evernote-checked" data-evernote-id="456">rewrite</span><span class="hljs-regexp js-evernote-checked" data-evernote-id="458"> ^/</span> http://<span class="hljs-variable js-evernote-checked" data-evernote-id="425">$host</span>/logo.png;
    }
}<span class="copy-code-btn js-evernote-checked" data-evernote-id="468">复制代码</span>

静态文件压缩

server {
    <span class="hljs-comment js-evernote-checked" data-evernote-id="392"># 开启gzip 压缩</span>
    gzip on;
    <span class="hljs-comment js-evernote-checked" data-evernote-id="393"># 设置gzip所需的http协议最低版本 (HTTP/1.1, HTTP/1.0)</span>
    gzip_http_version 1.1;
    <span class="hljs-comment js-evernote-checked" data-evernote-id="394"># 设置压缩级别,压缩级别越高压缩时间越长  (1-9)</span>
    gzip_comp_level 4;
    <span class="hljs-comment js-evernote-checked" data-evernote-id="395"># 设置压缩的最小字节数, 页面Content-Length获取</span>
    gzip_min_length 1000;
    <span class="hljs-comment js-evernote-checked" data-evernote-id="396"># 设置压缩文件的类型  (text/html)</span>
    gzip_types text/plain application/javascript text/css;
}
<span class="copy-code-btn js-evernote-checked" data-evernote-id="469">复制代码</span>

执行命令 nginx -s reload,成功后浏览器访问

指定定错误页面

<span class="hljs-comment js-evernote-checked" data-evernote-id="397"># 根据状态码,返回对于的错误页面</span>
error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root /<span class="hljs-built_in js-evernote-checked" data-evernote-id="462">source</span>/error_page;
}<span class="copy-code-btn js-evernote-checked" data-evernote-id="470">复制代码</span>

执行命令 nginx -s reload,成功后浏览器访问

跨域问题

跨域的定义

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。

同源的定义

如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源。

nginx解决跨域的原理

例如:

  • 前端server域名为:http://xx_domain
  • 后端server域名为:https://github.com

现在http://xx_domainhttps://github.com发起请求一定会出现跨域。

不过只需要启动一个nginx服务器,将server_name设置为xx_domain,然后设置相应的location以拦截前端需要跨域的请求,最后将请求代理回github.com。如下面的配置:

<span class="hljs-comment js-evernote-checked" data-evernote-id="398">## 配置反向代理的参数</span>
server {
    listen    8080;
    server_name xx_domain

    <span class="hljs-comment js-evernote-checked" data-evernote-id="399">## 1. 用户访问 http://xx_domain,则反向代理到 https://github.com</span>
    location / {
        proxy_pass  https://github.com;
        proxy_redirect     off;
        proxy_set_header   Host             <span class="hljs-variable js-evernote-checked" data-evernote-id="426">$host</span>;        <span class="hljs-comment js-evernote-checked" data-evernote-id="400"># 传递域名</span>
        proxy_set_header   X-Real-IP        <span class="hljs-variable js-evernote-checked" data-evernote-id="427">$remote_addr</span>; <span class="hljs-comment js-evernote-checked" data-evernote-id="401"># 传递ip</span>
        proxy_set_header   X-Scheme         <span class="hljs-variable js-evernote-checked" data-evernote-id="428">$scheme</span>;      <span class="hljs-comment js-evernote-checked" data-evernote-id="402"># 传递协议</span>
        proxy_set_header   X-Forwarded-For  <span class="hljs-variable js-evernote-checked" data-evernote-id="429">$proxy_add_x_forwarded_for</span>;
    }
}
<span class="copy-code-btn js-evernote-checked" data-evernote-id="471">复制代码</span>

这样可以完美绕过浏览器的同源策略:github.com访问nginxgithub.com属于同源访问,而nginx对服务端转发的请求不会触发浏览器的同源策略。

赞(0)
未经允许不得转载:798VPS » 前端必备 Nginx 配置
分享到: 更多 (0)