フロントエンドの地獄

みせてやりますよ。本当の地獄ってやつをね。

トップ > Javascript > 静的サイトを公開するならどこがいいの？ #技術書典

静的サイトを公開するならどこがいいの？ #技術書典

Javascript フロントエンド

静的サイト（PHPやRubyなどのサーバープログラムを走らせない環境でのWebサイト）でSPAを公開するにあたって、運用・配信（ホスティング）するならどこがいいかと最近聞かれまして、その際の回答を技術書典の宣伝も兼ねてブログにしたためます。

今回は次の４つで比較しています。

  • GitHub Pages
  • Firebase Hosting
  • GitLab Pages
  • Netlify

上記４つはどれも独自ドメインの設定とSSL対応が無料で行うことが出来ます。

※比較的初心者に向けて書いている前提です。

AWS S3やGCP等の利用は初心者がいきなり設定を行うには項目が多いため除外しています。

レンタルサーバーも基本料金が発生し、スケール・管理し辛いため今回は除外しています。

また、少し機能について説明が必要な部分があるので、先に説明を書きます。

Rewrite設定について

静的サイト化したSPAを公開する際にありがちなミスなのですが、URLを変更してサブディレクトに進んでからリロードすると404ページになってしまうというものです。

これは公開サイトでページの404のRewrite設定が出来ていない場合に起こってしまう事象です。

「ファイルの読み込み時に404だったら index.html を返す設定」をすることで、リロードしても継続してサイト閲覧することが可能になります。(その場合はJavaScriptで404ページかどうかを判定します。)

設定が出来ない環境でSPAのルーティングを利用する場合はハッシュルーターにする必要があります。

ビルド機能について

プロジェクトによってはWebpackなどを利用して、html,css,jsファイルをコンパイル（トランスパイル）してから公開すると思います。

そのときにビルド機能がついている環境の場合は、「手元でビルドしたものをgitで管理したり、Circle CIなどでビルドしてdeployする」等の手間が省けます。

テストを書いていたらテストが通るかどうかなどもそこでチェックして、デプロイするかどうかを選択できたりもします。

各サービスの機能を紹介

GitHub Pages

  • とにかくタダで使えます！
  • 使えますが、下記の記事のような制限があります

GitHub Pagesでホストするサイトのアクセス上限は月10万リクエストが目安

  • 設定した特定のブランチが自動で公開されるので管理が楽。
  • ×: SPA用のRewrite設定不可
  • ×: ビルド機能無し

Firebase Hosting

  • △: たくさんアクセスがあるとデータ容量に応じて課金が必要になります

(無料枠で利用していて制限まで行ったら、通知が来るのみで勝手に課金されるようなことはありません。)

  • SPA用のRewrite設定可能
  • 特定のパスをFirebase Functionsに繋ぐことができる
  • ×: ビルド機能無し

GitLab Pages

  • とにかくタダで使える
  • SPA用のRewrite設定可能
  • 特定のブランチが自動公開できて管理が楽
  • ビルド機能アリ

Netlify

  • とにかくタダで使える
  • SPA用のRewrite設定可能
  • GitHubやGitLabと連携して、静的サイトを自動で公開可能
  • ビルド機能アリ
  • 特定のパスにAWS lambda(Netlify Functions)接続可能

まとめ

すでにGitHub、GitLabでソースを管理しているとして、ライブラリのリファレンスなどのちょっとしたサイトならそれぞれのPages機能を使うと手軽です。

Firebaseを利用していて、FunctionsとパスをつなぎたいならFirebase Hostingを利用しましょう。しかしビルド機能がないので必要な場合はCircle CIなどと併用が必要です。

他、Firebase Functionsとつなぎたい場合を除いて便利な機能が揃っているNetlifyをおすすめしています。Netlifyには他にもたくさんの便利な機能が備わっています。

Netlifyの上記以外便利機能紹介

  • ブランチ毎に自動でサイトを公開できる（プルリクを確認するときなど便利）
  • Webhookでビルドしたり、ビルドしてデプロイしたらSlackに通知する（GitLabも可能）
  • ブランチごとのA/Bテスト用に出し分けができる
  • サーバーサイドレンダリングしないSPAでも、コンテンツに応じてOGP画像などのmeta情報を出し分けられる(Prerendering機能)
  • 静的サイトであるあるな「フォームだけ設置したい」場合もNetlify Formが利用できる
  • ブログなどを作りたい場合にコンテンツを管理できるNetlify CMSもあります

他にもチーム開発で必要な機能や、BASIC認証の設定(有料)など様々な静的サイト公開に便利な機能が備わっています！

ということで宣伝

そんなNetlifyの様々な機能を１から１０までほぼ全て実例を使って解説する本を今度の10月8日に開催される技術書典で販売しますので、いらっしゃる方はログインして下記のページをチェックしてぜひぜひ買いに来てください！！！

techbookfest.org

以上ですが、本買わなくともNetlifyはめっちゃ便利なので一度使ってみて下さい！