ソース更新時におけるCI/CD動作の確認
初回のセットアップは終わりましたが、ここからソースが修正された場合、どのように動作するかを確認していきます。
Next.jsのようなJavaScriptのプロジェクトは依存するライブラリが多数あり、セキュリティFixが頻繁に起こります。GitHubではこうしたセキュリティFixを、ソース修正まである程度自動化してくれる機能を持っています。
今回作ったプロジェクトに関しても、GitHubがセキュリティ問題を自動検知し、プルリクエストを作成しました。
詳細を確認すると、GitHubが自動でソースを修正しており、minimistのバージョンが1.2.6に上がっています。
このようなGitHubのセキュリティFixの機能は便利ですが、ソース修正のたびにビルド／デプロイを手動で行っていてはとても手間です。
Vercelを利用していれば、CI/CDの機能にてこのプルリクエストのビルドはすでに終わっており、プレビュー環境へのデプロイまで完了しています。なにもしなくても既にプレビュー環境にてサイトの確認ができるようになっています。
「Inspect」をクリックするとビルドの結果が確認できます。
「Preview」をクリックするとプレビュー環境が確認できます。先ほどの本番環境とは別のURLとなっていることが確認できます。
ライブラリのバージョンが上がり、ブラウザで確認したところ正常に動作しているようですので、「Merge pull request」をクリックします。
マージが完了すると、不要になったブランチは自動で削除されます。
マージしたタイミングでマージ先の本番環境であるmainブランチのビルドとデプロイも自動で行われます。詳細を確認したい場合は、「Code」のトップに戻り、最新のコミットをクリックします。
VercelによってデプロイされたURLを確認できます。
このようにCI/CDを使うことでサイトの更新の自動化が可能で、運用の手間を大幅に削減することが可能です。
まとめ
今回はVercelとNext.jsを使った簡単なサンプルをご紹介しました。次回はVercelとNext.jsのより詳しい使い方をご紹介する予定です。
