NetlifyでさくっとDevOpsをはじめよう

「Netlify便利！」ってよく聞くけど実際のところどう使うのが便利なの？という声を受け、さる某日、社内で勉強会が開催されました。

4DのService Design div.でTechnical Consultantをやっている石塚です。Netlifyはもともとプライベートで使い倒していたこともあり、開発プロジェクトで採用しようか？という話が挙がった際、いの一番に『やります！』と手を上げ、ウキウキで導入しました。今回はそのNetlify愛が社内で評価されたのか、勉強会で登壇する機会をいただきました。

Service Design div.での開発プロジェクトは比較的大きめの規模のSPAサイトなどを構築する機会も多く、そういった開発環境下でNetlifyはどのように活用できるか？に焦点を当ててお話したところ社内エンジニアからもご好評をいただき、今回こちらの記事でその一部をご紹介することとなりました。

Netlifyのことをざっくりかんたんに

まず、Netlifyとはなにか？をかんたんにご紹介します。

Netlifyは大手Hosting & CDNサービスのひとつで、Githubなどのリモートリポジトリサービスと連携することで、サクッと手軽に自動デプロイ環境をセットアップできるのが大きな特徴に挙げられます。

ホスティングだけではなく、SSL対応やカスタムドメイン設定が非常にかんたんに行えたり、Webhook連携で様々なHeadless CMSと連携できたりと、その開発者フレンドリーさが素晴らしいサービスです。かゆいところにサッと手が届く感覚ですね！

Netlifyでサイトをホスティングする際は、旧来のウェブサイト資材を手動でアップロードするスタイルも可能ですが、上述したGit操作をきっかけとした自動デプロイが非常〜に便利です。本来であればCIプログラムを自前で設定しなければいけない部分を、ほぼ特別な設定なしで手軽に代行してくれるのが、Netlifyの大きな魅力でしょう。

発表時に使用したスライドの一部。ゆるいクオリティなのはご了承ください。

実際のところどう使う？

では、実際の開発環境上ではどのようなユースケースがあるのでしょう？事例に沿って、そのメリットを紹介します。

1. ステージング環境のプレビューとして
SPAの構築プロジェクトの開発フェーズでは、日々多くの更新がマスターブランチにマージされます。開発進度のチーム共有のために、内部確認用のプレビューサイトをステージング環境に用意するのはごく一般的な手法かと思いますが、そうした日進月歩の開発状況に合わせて手動でデプロイしていくのはなかなか骨が折れます。最新だと思っていたステージング環境下のサイトが、実は何世代か前の状態だったために作業の手戻りが発生してしまった...というトラブルを防ぐためにも、自動デプロイはぜひとも整備したいところです。

Netlifyを利用すると、指定のブランチに更新があった際に自動でサイトをビルド、デプロイを行ってくれるため、特に気にせずともステージング環境の鮮度を保ってくれます。よくある使い方だとは思いますが、これだけでもかなりの効率化が期待できますね。

2. Storybook（コンポーネントカタログ）の並行デプロイ
現在、Service Design div. での開発にはReactが採用されることが多く、併せてStorybookを利用するケースが増えています。Storybookはコンポーネントカタログで、コンポーネント仕様などをまとめたカタログサイトを構築してくれるため、チーム開発において非常に重宝します。

このStorybookですが、あくまで内部確認用のため、開発者が手元でローカルホストにホスティング、確認する運用だけでも便利といえば便利です。しかし、Netlifyは一つのリモートリポジトリに対して複数のプロジェクトを連携できるため、リモートリポジトリを更新したタイミングで同時に２つのサイトを最新に更新、ということもできるんですね！これを利用して、上述したステージング環境へのプレビューデプロイと並行して、Storybookの確認用サイトをNetlifyでホスティング、自動デプロイするとさらに便利に利用できます。
　
3. PRデプロイ
個人的に感じているNetlifyの最もイケてる部分が、「デフォルトでPRデプロイに対応している」ところです。

Web開発、特にマークアップのコーディングにおいてPRのレビューは結構骨の折れる作業になりがちです。なぜならHTML / CSSの書きぶりだけ見ても、狙い通りにレンダーされているかがわかりにくいから...。結局、PRブランチをローカルにcheckoutしてきて、手元でビルドして確認...というひと手間が必要になることが多いですね。

そんなときの救世主がPRデプロイです。PRの作成を自動で検知して、その変更差分を反映したプレビューをデプロイしてくれます。もちろん、そのたびにユニークなプレビュー用URLを払い出してくれるため、PRが複数あっても並行してプレビュー環境を用意してくれます。これがめちゃくちゃ便利！もはやPRデプロイなしでのPRレビューは考えられなくなってしまいました。

Netlify as DevOps

Netlifyはかんたん・お手軽なホスティングサービスですが、その実力はシンプルな静的サイト（最近ではJAM stackという呼称が広まってきましたね）の運用だけにとどまらず、大規模SPAサイトの構築プロジェクトにおける開発インフラとしても十分に発揮できるポテンシャルを秘めています。

開発フローにおけるさまざまな「ちょっとしたコスト」の効率化は、積もり積もって大きな差となるはずです。開発と運用のライフサイクルを効率化によって短縮し、より良くシステムをデリバリーしよう！という「DevOps」の概念が定着して久しいですが、これを実現するためのイニシャルコストの捻出やノウハウの稀薄さがネックとなってなかなか改善に手を出せず...というチームも少なくないです。そういったチームにとって、かなり手軽に手を出せるNetlifyは「DevOpsはじめの一歩」となり得るのではないでしょうか？