# Netlifyのプレビューデプロイを設定する

# 事の発端

というのもいつもサイト（blog）を更新するのには

ブランチを切る
記事なりページを書く
masterにマージ
gitlabへpush
Netlifyの自動デプロイが発火して本番環境に反映される

という手順を踏んでいました。

この手順ですと、vuepress内蔵のdevコマンドで確認するしかありません。もっとスマートな方法が無いのか・・・
と気軽にトゥートしたところえあい氏からアドバイスをいただいた。（ありがとうえあい）

んで、気になったのでちょっと調べてみたら、ねじわさ氏が既にgithubでの実行方法を書かれていました。
Netlify の Deploy Preview を使ってみる · nzws's 備忘録
こんなのがあったのか。なるほど。

# Netlifyの設定をする

とのことで設定してみる。
まずNetlifyのサイト設定のページを開いてSetting->Build & deploy->Deploy notificationsへ行く。
ヘルプへのリンクがあったので少し見てみる。Deploy notifications | Netlify Docs
元々はデプロイされたら通知先と連携を目的としている様だが、通知先によってはプレビューのデプロイとかテストビルドをしてくれるらしい。

# gitlab側でAPIトークンを発行しておく

githubではAPIトークンは不要だが、gitlabの場合はAPIトークンを発行する必要がある。ということで発行する。
右上のユーザアイコンからsettingを選択するとユーザ設定のページに飛ぶので、左のUser SettingからAccess Tokensを選択。
Nameは適当にNetlify deploy notificationsとかわかりやすい名前に
Expires atはトークンの失効日を指定します。私は適当に100年くらい先の2120-12-31と書いておきました。
Scopesには有効にするトークンにチェックします。今回はAPIだけ必要なのでAPIにチェック。 gitlabのAPIトークン設定項目

gitlabのアクセストークンの設定についてはGitlab Docsにヘルプがあります。
Personal access tokens | GitLab

入力が完了したらCreate personal access tokenをクリック。
Your new personal access token has been created.と表示されて、下にトークンが表示されて発行するのでメモします。この表示は1度のみ表示されて、再度確認できないので忘れずにメモしておきます。また、他人へトークンが漏れないように注意してください。 gitlabのAPIトークン発行後

# Netlify側の設定

Netlify側に戻ります。 Deploy notificationsのAdd notificationからGitlab merge request commentをクリック。 Netlify側の設定1

Event to listen forをDeploy Preview succeededを指定します。API access tokenには先ほどgitlabから取得したトークンを入力します。最後にSaveをクリックして設定完了です。 Netlify側の設定2

この設定ではデプロイのプレビュービルドが成功した場合のみ通知されます。
失敗した場合も通知したい場合はEvent to listen forでDeploy Preview faildを選択した物を追加で作成してください。
トークンは同じ物を使用しても問題ありません。私は失敗しても通知したいため作成しました。

# 動作するか確認

すべての設定が終了したので、実際にMR(githubで言うPR)を行ってみます。
gitlabのサイトからMRを作成するとPipelineのメッセージが作成され・・・ gitlabの通知確認

ビルドが完了するとステータスがpassedに変更されます。 gitlabの通知確認2

プレビュー用のURLがトークンを発行したユーザで自動的に書き込まれます。 gitlabの通知確認3

# コミット単位で確認したい場合

先ほどの設定はMRのみでのデプロイでしたが、コミット単位でも実行することが可能です。
Deploy notificationsの設定項目にはあらかじめSend commit status to GitLab when Deploy Preview starts、Send commit status to GitLab when Deploy Preview succeeds、Send commit status to GitLab when Deploy Preview failsが設定されているので、右の･･･からedit nitificationを選択、API tokenにトークンを入力します。
さらにBuild & deployの設定にDeploy contextsの項目があるのでEdit settingをクリックし、Branch deploysをAllに設定しておくとすべてのコミットに対して実行されます。
コミット単位の設定

ここでLet me add individual branchesを選択すると、特定のブランチに対してデプロイを発火することができます。たとえば対象ブランチにdevelopブランチに対して有効にしておけば、別に切ったブランチに対しては反応しません。たとえばfeatureと名付けたブランチをgitlab上にpushしてもfeatureに対してデプロイは発火しません。

これで試しにpushを行うとコミットの欄にMRと同様にデプロイの結果が表示されます。Netlifyの場合はわざわざgitlab CIを使用するよりかは簡単だと思います。コミット単位で実行するようにした場合のgitlabの表示

# 最後に

これでgitlab上でプレビューすることができるようになりました。わざわざyarn devとか打たなくてよくなりました。まあリアルタイムプレビューが便利なときもあるので使い方次第ですね。たとえばgitlabのwebUIから編集した場合なんかでもプレビューできるので、プレビュー手段は多数あった方が便利ですね。

ちょっと話はずれますが、ブログの記事を出先の環境とかでうまいことする方法ですが、ほた氏がブログでPR（ないしMR）を使うことで公開する方法を編み出していました。思わず「なるほど、そう言う方法もあるのか」と感心してしまった。こちらの記事でもDeploy previewsについて少し触れています。
詳しくは2019年に読んだコミックを振り返る - ﾏﾂﾀﾞｲｱﾘｰのおまけを参照してください。

Netlifyはいいぞ。