今回の投稿では、無料でも使える高性能サーバーNetlifyの、知っておきたい便利な機能を紹介したいと思います。
ビルド&デプロイ時の便利な機能
まずはよく使うことになる、ビルドやデプロイ時の機能から見ていきましょう。
機能1:環境変数の設定
個人的によく使うのが環境変数です。
作成した環境変数は Netlify Functions やスニペットの追加(Snippet injection)で使用することもできます。

管理画面のトップページにある「Site Settings」をクリックします。

サイドバーにある「Build & Deploy」をクリックし、その下の「Environment」もクリック。環境変数の設定画面に移動します。

KeyとValueをセットで入力すれば環境変数のできあがり。
サイトレベルの環境変数以外にも、チームレベルの環境変数を設定することもできます。
機能2:ドラッグアンドドロップでデプロイ
Netlify には、実はドラッグアンドドロップでデプロイする機能もあったりします。

管理画面のトップページで「public」などの公開したいディレクトリをドラッグアンドドロップ。

これだけでデプロイ完了!Zipにしなくても、そのままドラッグアンドドロップすれば大丈夫です。

他の方法でデプロイしたときと同じように設定できます。
機能3:CLI でデプロイ
NetlifyではNetlify CLI
を利用してコマンドでデプロイすることもできます。
Netlify CLI の使い方
まずはNetlify CLIの使い方について見ていきましょう。
デプロイしたいディレクトリでnetlify deploy
コマンドを実行します。
# netlify-cliをインストールnpm install netlify-cli -g# デプロイnetlify deploy# netlify-cliをインストールしたくないときはnpxでもOK ????# npx netlify-cli deploy
上のコマンドを実行するとメッセージが表示されて、、
Logging into your Netlify account...Opening https://app.netlify.com/authorize?response_type=ticket&ticket=xxxxxxxxxxxxxxxxxxxxxxxxxxx
ブラウザが立ち上がり、認証用の画面が表示されます。

認証していいか聞かれるので、「Authorize」ボタンをクリックします。

無事認証できれば、認証できたよとメッセージが表示されます。
コマンドラインに戻ってみると質問が表示されているので、チーム名やサイト名などの質問に答えていきます。
You are now logged into your Netlify account!Run netlify status for account detailsTo see all available commands run: netlify helpThis folder isn't linked to a site yet? What would you like to do? + Create & configure a new site? Team: yourname's teamChoose a unique site name (e.g. isnt-YourAccount-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.? Site name (optional): undefinedSite CreatedAdmin URL: https://app.netlify.com/sites/inspiring-xxxxxxxx-50cbccURL: https://inspiring-xxxxxxxx-50cbcc.netlify.appSite ID: xxxxxxxxxx-xxxxx-xxxxx-xxxxx-xxxxxxxxxxxxxxxxxxxxPlease provide a publish directory (e.g. "public" or "dist" or "."):/Users/you/Desktop/gatsby-new-site? Publish directory /Users/you/Desktop/gatsby-new-site/publicDeploy path: /Users/you/Desktop/gatsby-new-site/publicDeploying to draft URL...✔ Finished hashing 56 files✔ CDN requesting 28 files✔ Finished uploading 28 assets✔ Draft deploy is live!Logs: https://app.netlify.com/sites/inspiring-xxxxxxxx-50cbcc/deploys/xxxxxxxxxxxxxxxxxxxxxxxxxWebsite Draft URL: https://xxxxxxxxxxxxxxxxxxxxxxxxx--inspiring-xxxxxxxx-50cbcc.netlify.appIf everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.netlify deploy --prod
コマンドライン上にプレビュー用の URL が表示されるので、問題ないか確認します。確認して大丈夫だったら、次のコマンドを入力すればデプロイ完了です。
netlify deploy --prod
機能4:netify.toml を使った設定
Netlify では管理画面で設定する以外にも、netlify.toml
ファイルを使った設定もできます。
細かい設定をあらかじめ書いたものを Git 管理すればチーム内での共有もしやすくなりますし、_headers
や _redirects
ファイルと同じ処理を netlify.toml だけで指定できるので、メンテナンスも楽になるかもですね。
netlify.toml の基本的な書き方
netlify.toml ファイルは、プロジェクト直下に配置しておけばgit push
したときに自動で読み込んでくれます。
[build]# ビルドを開始する場所を変更base = "project/"# 公開ディレクトリpublish = "public"# ビルドコマンドcommand = "yarn build"# Netlify Functions のエンドポイント対象ファイルを格納するディレクトリfunctions = "project/api/"# 環境変数[build.environment]VARIABLE = "value"# リダイレクト[[redirects]]from = "/old-path"to = "/new-path"status = 302force = truequery = {id = ":id"}[redirects.headers]X-From = "Netlify"X-Api-Key = "some-api-key-string"# カスタムヘッダー[[headers]]for = "/*"[headers.values]cache-control = '''max-age=0,no-cache,no-store,must-revalidate'''
機能5:Slack やメールでの通知
Netlify では、デプロイ時に Slack やメールに通知を送ることができます。
通知できるイベント
Netlify Notification で通知できるイベントは以下になります。
Deploy started | デプロイが開始した時 |
---|---|
Deploy succeeded | デプロイが成功した時 |
Deploy failed | デプロイが失敗した時 |
Deploy locked | 自動公開を無効にしたとき |
Deploy unlocked | 自動公開が再開された時 |
Deploy request pending | 信頼できないデプロイが保留された時 |
Deploy request accepted | 信頼できないデプロイが承認された時 |
Deploy request rejected | 信頼できないデプロイが拒否された時 |
「信頼できないデプロイ」について
たとえばチーム外の開発者のように、認識されていない開発者からのプルリクエストをトリガーしたときに「信頼できないデプロイ」と判断されるようです。

Netlify に「信頼できないデプロイ」と判断されたときにどう対応するかは、ビルド設定から変更できます。
イベントをメールで通知
まずは発生したイベントをメールで通知する方法から紹介します。

Build & deploy ページの「Deploy notifications」に移動します。

「Add notification」ボタンをクリックします。

今回はメールで通知したいので「Email notification」を選択します。

通知してほしいイベントを選択して、メールアドレスを入力します。
今回はデプロイが失敗したときに通知するように設定しました。

これで、指定したイベントがトリガーされたときにメールで通知されるようになりました。
イベントを Slack で通知
次は、イベントを Slack で通知を送る方法です。
まずはSlackのIncoming Webhookにアクセスします。

Incoming Webhook のページに移動します。

通知を送りたいワークスペースを選択します。

チャンネルも選択しましょう。「…インテグレーションの追加」ボタンをクリックします。

発行された「Webhook URL」をコピーします。

Netlify に戻って、通知したいイベントを選択して、コピーした「Webhook URL」を貼り付けます。

これで Slack の設定も完了です。
Webhook を使った通知
ここまで Slack とメールに通知する方法を紹介しましたが、Webhook を使えば Discord のような別のサービスへの通知もできます。
機能6:HTML タグの挿入
Netlify では、HTML を直接編集しなくても、</head>
や</body>
の手前に HTML タグを挿入できるスニペットインジェクション
という機能があります。
Googleアナリティクスなどのタグを追加するときに便利
ウェブサイトを運用するときには Google Analytics や Google Tag Manager などscript
タグの追加が必要になると思いますが、そういった場合にスニペットインジェクションを利用するとソースコードを編集しなくてもタグを追加できるので便利です。
HTML タグの挿入方法
スニペットインジェクションは Build & deploy ページのSnippet injection
から利用できます。

Snippet injection のパネルに移動すると、「Add snippet」と書かれたボタンをクリックします。

挿入する場所を選択し、追加したい HTML を入力します。
「Snippet name」には管理用にわかりやすい名前を付けて「Save」ボタンをクリックすれば追加完了です。

追加したHTMLは一覧で確認することができます。
機能7:コミットメッセージで CI をスキップ
Netlify ではコミットメッセージの中に[skip ci]
と書いておくと、自動デプロイをスキップすることができます。
複数コミットでもスキップできる
[skip ci]
は複数のコミットをプッシュする場合でも使うことができます。
最後のコメントだけ[skip ci]
を含めてプッシュすれば、すべてのコミットの自動デプロイをスキップできます。最後以外のコメントはいつも通りにコメントを書けば大丈夫です。
機能8:サイトを以前のバージョンに戻す
Netlify では、サイトを以前のバージョンに戻す(ロールバックする)ことができます。
以前のバージョンに戻す方法

管理画面のデプロイ一覧から、もとに戻したいデプロイを選択します。

デプロイの詳細が表示されるので、「Publish deploy」を選択します。これで、再デプロイができます。
機能9:公開中のデプロイを固定
Netlify では公開中のデプロイを固定することができます。
デプロイの固定って?
そもそもデプロイの固定って何?となるかもしれませんが、もし将来的に別のコミットがあったとしても、現在のバージョンのまま公開し続けてくれます。チームで開発するときに便利ですね。
デプロイを固定する方法

管理画面のデプロイ一覧から、「Published」になっているバージョンをクリックします。

デプロイの詳細画面で「Lock publishing to this deploy」を選択します。これで将来的に別のデプロイがあっても、サイトは別のバージョンで差し替えられなくなります。
機能10:複数のブランチを公開することもできる
通常ではmaster
ブランチだけが公開されますが、設定しておけば、複数のブランチを公開することもできます。
複数のブランチを公開する方法

「Edit settings」をクリックします。

「Let me add individual branches」をクリックすると入力フォームが現れるので、この中にデプロイしたいブランチを入力すれば、指定したブランチを公開することができます。
機能11:デプロイ済みのサイトをダウンロード
Netlifyではこれまでにデプロイしたサイトをダウンロードすることもできます。

デプロイ詳細ページの上の方にあるアイコンをクリック。
これでダウンロードが始まります。
機能12:Basic 認証 (Password Protection)
Pro プラン以上で契約している場合には、指定した環境のみ Basic 認証ができます。
[context.production]command = "make production"[context.branch-deploy]command = "make deploy_preview"
プレビュー環境が消せないときに便利
Netlify では、プルリクエストを作るとプレビュー用の環境を立ち上げてくれます。
それ自体は非常に便利なんですが、マージしてもプレビュー用の環境を消せません。しかも URL を知っていれば誰でも見れる状態に。
ただ、Pro プラン以上になると Password Protection 機能で特定のデプロイにパスワードをかけて保護できるようになるので、開発中の画面を表示したくない場合には、Pro プランへアップグレードするのもいいと思います。
その他の便利な機能
では、ここからはビルドやデプロイ以外の便利な機能について見ていきましょう。
機能13:リダイレクト
Netlify では、netlify.toml
や_redirects
ファイルを使ってリダイレクトの設定ができます。
_redirects ファイルで設定するとき
ページ単位でリダイレクト
ページ単位でリダイレクトさせるときは、次のようになります。
ここでは/blog/my-old-title
から/blog/my-new-title
にリダイレクトさせてみました。ステータスコードは301にしています。
/blog/my-old-title /blog/my-new-title 301
ディレクトリ単位でリダイレクト
ディレクトリ単位でリダイレクトさせるときには、*
と:splat
を使うと便利です。アスタリスク*
を使えばパスを保持したまま動的に参照してくれるので、たとえば/{ページ}
から/blog/{ページ}
にリダイレクトしたいときには、次のように書くことができます。
/* /blog/:splat
netlify.toml で設定するとき
今度はnetlify.toml
でリダイレクトする方法です。netlify.tomlでは次のように書くことができます。_redirects
と書き方が少し違いますね。
ページ単位でリダイレクト
/blog/my-old-title
から/blog/my-new-title
にリダイレクトさせる場合には、次のようになります。
[[redirects]]from = "/blog/my-old-title"to = "/blog/my-new-title"status = 301
ディレクトリ単位でリダイレクト
ディレクトリ単位でリダイレクトさせる場合には、_redirects
ファイルのときと同じように*
と:splat
を使うのが便利です。
[[redirects]]from = "/*"to = "/blog/:splat"
Netlify Playgroundもある
Netlify にはリダイレクトルールを検証できるNetlify Playground redirectsが用意されています。

画面を開くと入力欄が表示されます。薄いグレーのテキストには入力例がビッシリと書かれています。

検証したいリダイレクトルールを入力して「Test rules」をクリックします。

すると… validの文字が!しかもnetlify.tomlで使える形式も一緒に表示してくれます。
機能14:HTTP ヘッダーの制御
Netlify で公開したサイトは、_headers
ファイルを使ってサイト内のリソースの HTTP ヘッダーを制御できます。
_redirects
ファイルと同じように_headers ファイルをプロジェクト直下に配置しておけば、git push
したときに自動で読み込んでくれます。
/*cache-control: max-age=0cache-control: no-cachecache-control: no-storecache-control: must-revalidate
_redirects
ファイルに書く内容はnetlify.toml
から設定することもできます。
[[headers]]for = "/*"[headers.values]cache-control = '''max-age=0,no-cache,no-store,must-revalidate'''
Playground も用意されている
先ほどはリダイレクトについての Playground を紹介しましたが、HTTP ヘッダーについても Playgroundが用意されています。

Playgroundを開くとコードが入力できるようになっているので、

検証したいコードを入力して「Test rules」ボタンをクリックします。

文法上のエラーがなければ「valid」の文字と一緒に「netlify.toml」のコードが表示されて、

エラーがあれば、どこが原因なのか教えてくれます。
機能15:お問い合わせフォーム
Netlify ではサーバーサイドの実装をしなくても、Form機能を使ってお問い合わせフォームを実装することができます。
Form機能は無料プランから使えて、無料プランでも 100 投稿/月、10MB/月まで利用できます。実装方法については、下のリンク先が分かりやすいと思います。
機能16:Netlify Functions
サーバーレスアプリケーションを作れます。
機能17:サイトに認証をかける(Pro プラン以上)
Netlify では Basic 認証の設定ができます。ただ、注意してほしいのが、Pro プラン以上でないと使えないということです。
/something/*Basic-Auth: someuser:somepassword anotheruser:anotherpassword
機能18:A/B テスト
Netlify には A/B テストができるSplit Testingという機能があります。下の参考リンクに書かれているように、ブランチを分けるだけで簡単に A/B テストができちゃいます。しかも無料!便利ですね。
機能19:Large Media
画像などのメディアを適切なサイズで提供し、リポジトリの肥大化を防いでくれます。
機能20:Analytics
有料オプションを購入すると Analytics 機能を使うことができます。