このブログをどこに配置しようかと考えた際に、VPSやパブリッククラウドは構築や運用が面倒なのでもっと楽な環境に配置しよう、と考えました。かつ無料。お金はかけたくない…(ドメインはお金払ってるけど)

Netlifyを使う

hugoで静的コンテンツを生成するので、GitHub Pagesあたりに置いてCloudFlareでhttps化しようかと思ったのですが、2つのサービスを使うのも面倒だと思いhttpsをやめるか、いやいやもっと別のサービスを使うか、と思っていたらNetlifyを見つけました。

Netlifyであれば無料で静的コンテンツのホスティング、さらに独自ドメインでhtttpsが使えて無料…！ということでひとまずNetlifyを使ってみて、問題があればGitHub pages+CloudFlareに変えればいいか、ということで今回はNetlifyにデプロイするまでのことを書いていきます。

Netlifyは他にも

  • CDN
  • DNSサーバ
  • フォーム

などなど、色々な機能がてんこ盛りです。

アカウント作成

トップページ右上のSign Upボタンよりアカウント作成を行います。 メールアドレス+パスワードでアカウント作成を行うことも可能ですが、GitHubやBitbucketのアカウントと連携させてSSOすることも可能です。

私はメールアドレス+パスワードでアカウントを作成しましたが、メールでVerificationコードが送られてきて、その値を入力することでアカウント作成は完了しました。

プロジェクト作成

Netlifyでデプロイする方法は下記3つです。

  • zipでアップロード
  • GitHubやBitbucketと連携してデプロイ
  • CLIでデプロイ

ひとまずzipをアップロードしてみました。ログイン直後の画面にzipファイルをドラッグアンドドロップすることでアップロードできます。

capture at Netlify

アップロードした内容はディレクトリにindex.htmlだけ入れてzipしたものです。

$ tree hello_netlify
hello_netlify
└── index.html

0 directories, 1 file

$ cat hello_netlify/index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Netlify!</title>
<meta charset="utf-8">
</head>
<body>
Hello Netlify!
</body>
</html>

$ zip hello_netlify.zip hello_netlify/*
$ ls | grep zip
hello_netlify.zip

問題なくデプロイされました！

capture at Netlify

簡単なものならわざわざGitHub等と連携する必要すらないですね…！

Sponsored Link

GitHub連携

Hugo等の静的サイトジェネレータを使って静的サイトを作り、それをGitHubで管理する場合、pushしたら自動でデプロイされるようにしたいです。そのためにはGitHubとNetlifyを連携しておく必要があります。ということでサクっとやっていきましょう。

まずはNew site from Gitをクリックします。

capture at Netlify

Create a new siteの画面で使用するサービスを選びます。今回はGitHubを選択します。

capture at Netlify

初回はAuthorizeが必要になりますが、これはいつもの流れですね。パスワードを聞かれるので入力してConfirmします。

capture at Netlify
capture at Netlify

Authorizeが完了した後は、対象のリポジトリを選択します。

capture at Netlify

最後にビルドの設定です。 下記3項目を必要に応じて入力し、Deploy siteをクリックします。

  • Branch to deploy: ビルド対象のブランチ名。
  • Build command: ビルドコマンド。シェルコマンドを指定するので、環境変数やオプションも記述可能。
  • Publish directory: 公開するディレクトリ。ビルド後にアーティファクトが作成されるディレクトリを指定する。
capture at Netlify

少し待つと、サイトが出来上がります。Deploys from GitHubとなっていればGitHubと連携ができていることになります。今後は対象のブランチが更新されるたびに自動的にデプロイされることになります。便利ですね。

capture at Netlify

NetlifyのビルドステータスをSlackへ通知する

NetlifyをGitHub等と連携させてCDする場合、Netlifyのビルドは自動化されますがその動作は何も設定していなければブラウザやデプロイ先のサイトを目視することでしか結果を確認することはできません。

私はGitHubへmasterにpushやmergeされた際にをSlackと連携させて通知されていますので、どうせならNetlifyの動作もSlackへ通知したいと思いました。

設定の仕方は非常に簡単で、サイトの設定のBuild & deployからDeploy notifications内、Outgoing notificationにてAdd notificationをクリックします。

capture at Netlify

通知先を選択できるのでSlack Integrationを選択し、下記3項目を入力します。

  • Event to listen for
    • 通知のトリガになるイベントをDeploy started, Deploy succeeded, Deploy failed, Deploy locked, Deploy unlockedから選択
  • Slack Incoming Webhook URL
    • 通知先のIncoming Webhook URL
  • Channel (optional)
    • 通知先のチャネル
capture at Netlify

複数イベントを登録する場合は個別に設定が必要です。私はDeploy started, Deploy succeeded, Deploy failedの3つで十分と思ったのでこの3つのみ通知するように設定しました。

capture at Netlify

また、Slack Integrationと記載がありますが、Slack Appとして用意されているわけでは無いため、Slack側ではIncoming Webhookが設定されていれば大丈夫です。チャネルは必要に応じて設定しましょう。これでNetlifyでのビルド時にSlackに通知されるようになりました。

この次は

ここまででNetlifyとGitHubの連携が完了しました。この次はサイトで独自ドメインを使用し、HTTPSで運用するように設定していきます。