今回の投稿では、無料でも使える高性能サーバー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 details
To see all available commands run: netlify help
This folder isn't linked to a site yet
? What would you like to do? +  Create & configure a new site
? Team: yourname's team
Choose 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): undefined
Site Created
Admin URL: https://app.netlify.com/sites/inspiring-xxxxxxxx-50cbcc
URL:       https://inspiring-xxxxxxxx-50cbcc.netlify.app
Site ID:   xxxxxxxxxx-xxxxx-xxxxx-xxxxx-xxxxxxxxxxxxxxxxxxxx
Please provide a publish directory (e.g. "public" or "dist" or "."):
/Users/you/Desktop/gatsby-new-site
? Publish directory /Users/you/Desktop/gatsby-new-site/public
Deploy path: /Users/you/Desktop/gatsby-new-site/public
Deploying 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/xxxxxxxxxxxxxxxxxxxxxxxxx
Website Draft URL: https://xxxxxxxxxxxxxxxxxxxxxxxxx--inspiring-xxxxxxxx-50cbcc.netlify.app
If 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 = 302
  force = true
  query = {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 で通知できるイベントは以下になります。

「信頼できないデプロイ」について

たとえばチーム外の開発者のように、認識されていない開発者からのプルリクエストをトリガーしたときに「信頼できないデプロイ」と判断されるようです。

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=0
  cache-control: no-cache
  cache-control: no-store
  cache-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 機能を使うことができます。