Day26-好用的网页服务器-nginx（二）

前言

在昨天的文章介绍了 Nginx 的基本观念以及 Nginx container 的内部操作，今天就要正式进入设定档的撰写了，由於 Nginx 可以设定的东西真的太多了，如果只用一篇文章来解释的话可能没办法让读者更了解一些设定的使用情境，因此这边笔者想要针对前端以及後端分别介绍几个常用的设定，让读者可以更了解 Nginx 的好用之处，那我们就开始今天的文章吧！

前端 nginx.conf 写法

首先我们先来看个范例：

server {
  listen 80;
  listen 443 default ssl;
  
  server_name _;
  
  ssl_certificate /etc/nginx/ssl/tls.crt;
  ssl_certificate_key /etc/nginx/ssl/tls.key;

  root /usr/share/nginx/html;
  charset utf-8;

  keepalive_timeout 600;
 
  location /healthz {
    return 200 "healthy\n";
  }

  location / {
    try_files $uri $uri/ /index.html?$args;
  }

  location = /favicon.ico { access_log off; log_not_found off; }
  location = /robots.txt { access_log off; log_not_found off; }

  client_max_body_size 10m;
 
  # set expiration of assets to MAX for caching
  location ~* \.(ico|css|js|gif|jpe?g|png)$ {
    expires max;
    add_header Cache-Control "public";
  }
}

可能读者看到上面那麽多的设定一时之间会觉得很可怕，但其实前端的设定可以说是相当单纯，接下来就来解析一下上面几个常用的设定吧！

• server block

  首先想要开始撰写 Nginx 的内容前必须要先宣告一个 server block 也就是笔者一开始用的 server {}，这样 Nginx 在读取设定值的时候才会知道这些设定其实是在同一个 server 上，而我们目前要设定的 server 是 web server。

• listen

  listen 是用来告诉 Nginx 说我要监听 server 上的某个 port，当有 request 从这个 port 进来的时候要跑这个 server 内的设定值，通常前端都会听 80 或 443，这两个 port 是 http 以及 https 专用的 default port，相信没有任何一个网站的网址是长 https://xxx.com.tw:8080 这样吧XD

• server_name

  server_name 代表的是只能接收从特定的 domain 来的需求，不是这个 domain 的都会挡掉，基本上前端不太会限制这个，除非你的网站是要摆在公司内网上，不然通常都会开放给大家连进来，所以今天要开放给所有人都可以看的话就可以打上 server_name _，这个 _ 就代表着我没有要挡住任何外来的需求。

• ssl_certificate & ssl_certificate_key

  摆放 SSL certificate credentials 的地方，这边要把完整的路径写上去，而且此路径一定要有这些档案，不然 Nginx 会读取不到这些凭证也就没办法使用 https 连线了。

• root

  设定读取档案的资料夹要在哪个位置，还记得昨天的文章有提到 Nginx 在读取 html 档时都会在 /usr/share/nginx/html 这个资料夹读取，所以假如读者使用 Dockerfile 并搭配 multi-stage build 的观念时，要记得把档案都复制到 /usr/share/nginx/html 这个资料夹，这样 Nginx 才能读到 index.html 档喔。

• charset

  熟悉前端的读者应该知道 charset 代表的是什麽，通常我们在 html 上面都会有这段 <meta charset="utf-8" /> 用来告诉网页要用什麽编码来解析这些内容，通常使用的都会是 utf-8，Nginx 代表的意思也是一样。

• keepalive_timeout

  用来设定 client 端连结到 server 端超过多少时间就要断开连结，这边的单位是 秒数 跟我们在写程序中使用的 毫秒 不太一样，这边读者要特别注意喔！

• location

  location 代表的是遇到指定的 path 就要做相对应的事情，例如上面的范例有一段是 location /healthz { return 200 "healthy\n"; } 这段的意思就代表着当 path 是 /healthz 时也就是 request url 为 https://xxx.com.tw/healthz 时要 return 200，这种设计通常都是做 health check 来确认 server 是否可以正常接收 request。

  这时候眼尖的读者可能有注意到这段：

  location / {
    try_files $uri $uri/ /index.html?$args;
  }
  

  这段文字代表的是 root path 要去找 index.html 档，也就是当我输入 https://xxx.com.tw 时就要显示 index.html 的内容，至於 $uri $uri/ 是什麽意思呢？这段话代表的是假如我在某个 path 上找不到相对应的档案时都可以回来利用 index.html 进行渲染，通常网页都是 SPA 的架构，透过这种设定方式就可以让 SPA 可以利用一些框架的 router 操作进行画面渲染了。

  接下来底下笔者还多设定了两个 location

  # set expiration of assets to MAX for caching
  location ~* \.(ico|css|js|gif|jpe?g|png)$ {
    expires max;
    add_header Pragma public;
    add_header Cache-Control "public";
  }
  

  其实笔者已经先破梗了，看到上面的注解应该会知道这边其实就是用来作 cache 的动作，还记得 Nginx 可以被用来当作是反向代理服务器吗？在反向代理服务器中有一个很重要的机制就是 cache，透过代理服务器我们就可以很简单的帮档案 cache 起来进而减少跟真正的服务器端发 request，在前端的世界中通常图片都不太容易变动，即便有变动也会是一张新的图并且有着新的档案名称，利用这个特性我们就可以把图片 cache 起来这样日後在存取图片时就可以很快速地取得了。

  这边可以看到笔者做了几个设定，接下来说明这几个特性：

  • expires

    expires 简单来说就是要替这个档案新增几天的 cache，在这几天内都不会去跟 server 拿最新的资料，而笔者这边设定 max 则代表 10 年内都不会去拉，可以当作是一个永久 cache 的概念。

  • add_header

    add_header 则是新增一个 http header，由於这边跟 cache 有关因此设定 http header 中的 Cache-Control，透过这个设定就可以帮助这个档案是否可以让所有的来源都可以进行 cache 控制，所以 public 的意思就是全部都可以存取的意思。

• client_max_body_size

  这个算是前端中蛮重要的一个设定，有时候我们要跟後端沟通，常常会因为带过去的 payload 过大而无法完成，例如上传图片就是个很好的例子，图片有大有小而为了要防止有心人士透过 postman 或 curl 直接跟後端沟通，进而绕过前端的检查机制，因此我们这边也必须要设定一个 max_body_size 来阻挡过大的 payload，这边就看网站需求了只是要注意的是後面 m 这个单位代表的是 mb，所以不要设定过大的 client_max_body_size，不然随便 payload 随便带都可以过关。

小结

今天介绍了前端的 Nginx 设定方式，可以发现前端的设定相当单纯就是让 Nginx 作为网页服务器而已，所以就想办法让根目录可以读到 index.html 档就好，但是後端就没那麽简单了，後端就要用到其他 Nginx 的用法了，例如负载平衡、反向代理等等功能，这些都会在明天的文章做一个介绍。

如果对於文章有任何问题都欢迎留言给我，那我们就下一篇文章见喽~