セクションナイン の 吉田真吾（@yoshidashingo）です。
ドキュメントページやブログ、企業サイトまで、静的サイトジェネレーター(Static Site Generator)でコンテンツ生成し、GitHub PagesやS3から配信をするのが一般的になりました。 逐次サーバー側で動的にリソースを生成する負担がないので、アクセス数に比例したスケール管理がしやすく、配信事業者はコンテンツサイズやトラフィック量に応じて単純な課金モデルが提供できるというのが大きい特徴でしょう。
私も、ServerlessConf Tokyoや自社のサイトでHugoを使って生成したコンテンツをAmazon S3から配信しており、Webサーバーを管理する手間がかからずとても楽に使っています。
静的サイトジェネレーターとは
下記のサイトには Jekyll, Hexo, Hugo, Octopress, Middleman など437もの静的サイトジェネレーターが羅列されています。
Webサイトの構成定義ファイルやデザインテンプレートに加えて、コンテンツになるマークダウンファイルなどを準備し、コンテンツ生成コマンドを実行することで、公開用ディレクトリにHTMLやXMLやJS、画像ファイルなどのコンテンツを生成してくれます。
静的サイトジェネレータのメリット
- CGI処理のような動的な処理が不要なので、ページごとの配信コストがアクセス数、同時アクセス数、ストレージ、トラフィックなど単純な指標で管理できる。
- 配信の仕組みがシンプルなので障害に強いプラットフォームが多い
静的サイトジェネレーターを使ったサイト開発のワークフロー
基本的には以下のようなフローになると思います。
- 静的サイトジェネレーターを開発環境にインストールする
- 配信元の環境をセットアップする
- テンプレートをダウンロードしてカスタマイズする
- コンテンツをマークダウンで記述したり画像などを格納して文章内からリンクする
- コンテンツを生成する
- 配信元にアップロードする
静的サイトの配信方法いろいろ
コンテンツを日々修正したり追加するときに重要なのは上記ワークフローをどれだけ簡単に実現できるかという点になってきます。
GitHub Pages
masterブランチかgh-pagesブランチかmasterブランチの/docsディレクトリを指定して自動的にコンテンツの公開が可能です。- CNAMEを設定することで独自ドメインでの運用も可能です。
- ワークフロー的には手元の静的サイトジェネレーターでコンテンツ生成したらGitHubにpushするだけであることと、公開元のブランチに対するプルリク→レビュー→マージ→公開といったコラボレーションがしやすい
Amazon S3
- S3バケットのWebサイトホスティング機能を有効にし、バケットポリシーをパブリック・アクセス可能にすることで格納されているファイルを公開可能です。
- Route 53と合わせて使うことで独自ドメインにもできるし、CloudFrontと組み合せることでグローバルなアクセスでも近いロケーションからの配信ができたり、ACMとの組合せでHTTPSのSSL証明書を無料で利用できたりします。
静的サイトホスティング専用サービス
数年前からBitBalloonのような zipファイル でサイトを丸ごとアーカイブして投げ込むことでサイトとして公開してくれるサービスがありました。
これはこれで少人数でさほど更新のかからないサイトであれば便利なのですが、サイトの構造定義やコンテンツをGitHubなどのリポジトリで管理しており頻繁に内容の修正や追加を行いたい場合には、リポジトリと統合されて一貫性のあるワークフローでサイトの開発を行いたいという要望が発生するのはごく自然なことです。そこでそういったワークフローをカバーしているのが Netlify です。
ServerlessConf NYCで「10X Product Development」というタイトルでトークしたJoe Emisonが、フロントエンド開発にフォーカスするために利用していたサービスの一つ「Netlify」として紹介されていました。
www.slideshare.net
トップページのキャッチコピーがコンセプトを表しています。
Write frontend code. Push it. We handle the rest.
「フロントエンドのコードを書いてPushしたら、あとはお任せください」
Netlifyの特徴
昨年創業して数日前に $2.1M (約2億円) の資金調達をしたスタートアップだけあり、上記で書いたような開発ワークフローの要望などに対応しています。
(1) Gitリポジトリと連携したホスティング設定
設定はコンソールからGitHubなどのGitリポジトリを指定してアクセス許可をするだけです。 プライベートリポジトリの場合はNetlify用の公開鍵が追加されます。
(2) 独自ドメイン設定
DNS(Route 53)の設定を以下のような感じで行うとZone ApexのAレコードとwwwサブドメインのCNAMEを設定することで独自ドメインの設定ができます。
(3) Gitリポジトリにpushするだけの継続的デプロイ
Netlifyではリポジトリからwebhookを受け取ると自動でリポジトリをpullして「ビルド」と「デプロイ」を行います。これにより、ローカル環境でビルドを行う必要がないので、コンテンツが大量にあるサイトや開発者の手元の環境のツールのバージョンに依存しない（たとえば寄稿者はマークダウンを記載してpushするだけで投稿できるようにしたい場合など）環境ができます。
従来このワークフローに対応するためには、GitHubのリポジトリのwebhookを受け取ったCIサービスの中で、「SSGのコマンドをインストール」して「ビルド実行」して「公開ディレクトリを配布する」というプロセスを作る必要がありました。
Netlifyでは以下のような設定をすることで、リポジトリにpushすると「特定のコマンドを実行（たとえばhugo）」して「デプロイ」するように指定ができます
- たとえば
sec9.coのディレクトリ構造がこうなっているとする
~/github/sec9.co $ tree -L 2
.
└── hugo
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── public
└── themes
- Netlifyコンソールでドメイン/リポジトリ/ブランチ/ビルドコマンド/公開フォルダを設定する（hugoディレクトリに移動してhugoコマンドを実行して、hugo/publicを公開するという設定）
- リポジトリにpushするだけで自動的にサイトをNetlify側でビルドして公開してくれる。
- ちゃんと公開されている
※CDNの機能をフル活用するためにはZone Apexでの運用は非推奨になっています。
(4) HTTPSサポート
組込みでLet's EncryptによるSSL証明書の発行・更新をサポートしているので、上記の例でも使いましたが、コンソールから1クリックで証明書の発行やインストールしてくれます。
(5) HTTP/2サポート
GitHub PagesやS3では対応していないHTTP/2による配信に対応しています。
料金プラン
ここまでは無料で使える範囲の機能でしたが、さらに高機能なプランがあります。
以下は有料プランで使える機能です。
(6) Geo-IP
公開されたサイトは基本的にCDNに載せて配信されるようですが、今回の確認ではフリープランであり、レスポンスがちょっと遅いなと感じました。調べるとアメリカから配信されているようなので、レスポンスタイムをもっと短くしたいということがあればプランのアップグレードを検討すると良いと思います。
$ curl -kL https://sec9.co -o /dev/null -w}\t%{time_total}" 2> /dev/null
200 3.375
$ nslookup sec9.co
Server: 172.20.10.1
Address: 172.20.10.1#53
Non-authoritative answer:
Name: sec9.co
Address: 198.61.251.14
(7) SPA用のプリレンダリング
SEO対策などのために組込みのプリレンダリングエンジンを使い(Prerender.ioなども利用可能)JSで生成されるコンテンツをキャッシュさせることができます。
(8) SLA契約
最上位のGLOBALプランを利用すると、アップタイムのSLAが締結できるようです。
(9)フォーム設置
こちらも有料プランですが、静的サイトで懸案になりがちなフォームの設置を行うことができるようです。
まとめ
ということで、まだ新しいサービスにも関わらず、かなり高機能に仕上がっている印象のNetlifyでした。
