Obeta

适用于静态网站生成器Gatsby博客的Nginx配置

包含一份完整可用的Nginx配置,以及提供简单的调试方法

Gatsby 是一个非常受欢迎的静态博客生成器,使用 Gatsby、Reactjs、Graphql 技术,从拿来就用到深度定制,满足了几乎所有人的胃口,社区的博客模版也是非常多,可以在这些基础上再进行扩展。

扯一下

目前我这个博客模板是自己搭建的,也开源了gatsby-starter-quiet,如果你想尝试可以安装:

gatsby new gatsby-starter-quiet https://github.com/zhouyuexie/gatsby-starter-quiet

最近在此模板中新增了一个 feature,支持使用 travis 自动构建并部署,比如当我写完这篇文章后会 commit 到 origin/master,travis 检测到后会自动构建并帮我发布到我的个人网站上去,几分钟后就可以看到这篇文章了。

而这篇文章就是想说的是当我部署上去后如何配置 Nginx 进行访问网站。

开始

废话不多说,直接上配置(凑字数),复制后根据自己的情况稍加修改即可使用。

user www-data;
worker_processes auto;
worker_rlimit_nofile   2000;
events {
  worker_connections  1024;
}

http {
  include       mime.types;
  default_type  application/octet-stream;
  # close nginx version on response header
  server_tokens off;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  '"$status" $body_bytes_sent "$http_referer" '
  '"$http_user_agent" "$http_x_forwarded_for" '
  '"$gzip_ratio" $request_time $bytes_sent $request_length';

  # 更改你的日志地址
  access_log  /path/logs/access.log main;
  error_log /path/logs/error.log;

  sendfile        on;
  tcp_nopush     on;
  keepalive_timeout  65;

  client_body_buffer_size  16K;
  client_header_buffer_size 1k;
  client_max_body_size 10M;
  large_client_header_buffers 2 1k;

  # open gzip
  gzip on;
  gzip_min_length 1k;
  gzip_comp_level 6;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  gzip_vary on;
  gzip_disable "MSIE [1-6]\.";

  # upstream, 如果需要使用可以根据自己应用端口修改
  # upstream api {
  #   server 127.0.0.1:2345;
  # }
  # upstream node_server {
  #   server 127.0.0.1:8888;
  # }

  # header
  proxy_hide_header 'X-Powered-By';
  add_header  Access-Control-Allow-Origin *;
  add_header X-Frame-Options "SAMEORIGIN";
  add_header X-XSS-Protection "1; mode=block";
  add_header X-Content-Type-Options "nosniff";
  add_header Strict-Transport-Security "max-age=31536000; includeSubdomains; preload";
  add_header Content-Security-Policy "default-src 'self'";

  server {
    listen 80;
    server_name *.obeta.me obeta.me;

    return 301 https://$http_host$request_uri;
  }

  # https
  # 更改你的https证书位置
  ssl_certificate      /path/fullchain.cer;
  ssl_certificate_key  /path/domain.key;

  ssl_session_timeout  5m;
  ssl_ciphers  HIGH:!aNULL:!MD5;
  ssl_protocols TLSv1.2;
  ssl_prefer_server_ciphers  on;

  server {
    listen       443 ssl http2;
    server_name  www.obeta.me obeta.me;

    location / {
      # 需要更改到你的静态博客文件位置,注意下面也有相同到
      root /root/static/build/;
      index index.html;
      try_files $uri $uri/ $uri/index.html /$1/ /$1/index.html;
      expires -1;
      add_header cache-control "no-store, no-cache, must-revalidate, proxy-revalidate";
      add_header strict-transport-security "max-age=31536000;includeSubDomains;preload";
      # 允许网站中使用的资源地址
      add_header content-security-policy "default-src 'self' *.github.com; prefetch-src 'self' *.fontawesome.com *.google-analytics.com; font-src 'self' data: *.fontawesome.com; script-src 'self' *.github.com *.githubassets.com *.fontawesome.com *.twimg.com *.twitter.com disqus.com *.google-analytics.com *.googletagmanager.com *.disquscdn.com *.disqus.com *.weborama.com 'unsafe-inline'; img-src 'self' *.twimg.com data: *.twitter.com *.cloudfront.net *.google-analytics.com *.sinaimg.cn; style-src 'self' *.fontawesome.com *.githubassets.com *.twitter.com 'unsafe-inline' *.disquscdn.com; frame-src 'self' *.twitter.com disqus.com";
      add_header x-xss-protection "1; mode=block";
      add_header Access-Control-Allow-Origin https://gist.github.com;
    }

    location ~* \.(png|jpeg|png|gif|xml|eot|ttf|woff|woff2)$ {
      expires max;
      etag    on;
      add_header cache-control "public, max-age=31536000";
      root /root/static/build/;
    }

    location ~* \.(json|js|css)$ {
      expires 7d;
      root /root/static/build/;
    }

    # location /api/ {
    #   proxy_redirect off;
    #   proxy_set_header Host $host;
    #   proxy_set_header X-Real-IP $remote_addr;
    #   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    #   proxy_pass http://node_server;
    # }
  }

  # 当你给一个后端服务分配了单独的域名时候可以使用下面这块
  # server {
  #   listen 443 ssl http2;
  #   server_name api.obeta.com;

  #   location /api {
  #     add_header  X-Powered-By SuperMan;
  #     proxy_pass  http://api;
  #     proxy_set_header Host   $host;
  #     proxy_set_header X-Real-IP  $remote_addr;
  #   }
  # }
}

当发生问题时候可以通过查看 nginx 日志: tail -f /path/logs/error.log或者tail -f /path/logs/access.log

也可以在客户端使用curl -I https://your_site.com --http2 -v查看 response header.

后续

水的有点严重,当然可以通过 ansible 来配置这部分设置,但是已经偏向运维那块了,也许下次可以单独开一篇写。

好久没有写博客,感觉已经生疏了些,每天安排的满满的,已经存了相当多的技术话题了,后续将继续坚持至少每周或每两周写一篇较高质量的文章驱动自己。

个人随笔记录,内容不保证完全正确,若需要转载,请注明作者和出处.