netlify をお試ししてみた
今回はメモ的な感じで。
netlify とは？
静的コンテンツをベースにしたWebサイトのホスティングに特化したサービスです。「Hexo」や「Hugo」などの静的サイトジェネレータで作るWebサイトを公開するのにもってこいというわけですね。なおバックエンドには Amazon Web Service を使用している様子でした。基本機能の殆どは無料で使用できます。
ちなみに無料プランではなんとこれだけの機能が使えてしまいます。
なおチーム向け、法人向けの有料プランが存在し、有料プランにアップグレードすると複数人での管理機能の強化など便利な機能が開放されるようです。
サインアップからページの公開までざっくりとした流れ
サインアップ
アカウントの作成には「Github」「GitLab」「Bitbucket」のアカウントの他メールアドレスでサインアップが可能です。
プロジェクト作成
アカウントの作成が終わったらプロジェクトの作成を行います。プロジェクト一覧ページに行くと何もない状態から始まるのでまず、「New Site from Git」を選択して GitリポジトリからWebサイトを作る準備を始めていきます。あとで気がついたのであれですが、ディレクトリをドラッグアンドドロップしてもプロジェクトを作れるみたいですね。何だこれすごい。
まずはWebサイトのソースコードを管理しているサービスを選択します。ここでも「Github」「GitLab」「Bitbucket」から選択することになります。今回は「GitLab」を選択して先にすすめます。
するとサービスに格納されているリポジトリの一覧が出るので、サイトのコンテンツにしたいリポジトリを選択します。今回は「hexo init」で生成されるコンテンツを格納したリポジトリを使いました。
最後にブランチとビルド設定を行います。Hexo や Hugo を利用している場合は、コンテンツの生成処理が必要ですよね。やり方として手元で実行して成果物をコミットするという手も使えるのですが、netlify ではCIのようなビルドタスクを実行する仕組みがあるので、ビルド済みコンテンツをコミットしておくような必要はありません。ここで静的サイトジェネレータでページを生成するコマンドを設定すればサーバー側でコマンドを実行してくれるというわけです。
今回は「hexo generate」を設定します。「hexo generate」すると HTML は public ディレクトリに生成されるので、公開ディレクトリは「public」を設定します。
順番が前後しましたが、ビルド対象にするブランチも設定することができます。サイト公開後はリポジトリ側で、指定したブランチに変更があれば自動でビルドタスクが実行され更新される算段になっています。というわけでここでは「master」を選択しておきます。
デプロイを待つ
プロジェクトが作成できたら早速、初回のビルドが走ります。しばらくまってると終わるのでお茶を飲んで待ってましょう。正常に完了したときは、公開URLが表示され、トップページのサムネイルが表示されます。公開URLからわかるように、デフォルトでSSLが有効でかつHTTP/2で通信されます。今風だ。
無事表示された様子がこちらです。なおデフォルトだと Haikunate (2～3単語単語の数珠つなぎと末尾が4～8桁数字で生成される識別子) された文字列がサブドメインとしてnetlify提供のドメインに割り当てられるようです。これについてはプロジェクト設定画面で任意の文字列に変更することが可能でした。Herokuなどと同じですね。
せっかくなのでどれだけ早いか見てみました。やはり、静的サイトなのでとてもロードが早いです。すべて含めておよそ1.53秒、複数回試しても概ね 1.3 ～ 1.8 秒付近でした。
参考までにこのブログ(はてなブログ)のロード完了時間は 53秒 でした。はてなブログはもともと便利な色々動いてるとは言え、これだけ違うと乗り換えを検討しても良いかもしれないなぁ。。。
まとめ
今回は静的サイトに特化したホスティングサービス「netlify」のざっくりとした使い方をご紹介しました。 ポートフォリオや簡易的なWebサイト、あるいはSPAなんかを置くにはほんとに使いやすいプラットフォームではないかと思いました
