VercelのCI/CD設定をAIと進めた手順：デプロイ自動化の実装記録
CI/CDとは何か
「CI/CD」という言葉を聞いたことがない方のために、この記事では最初にその意味を説明します。
CI（継続的インテグレーション） は、コードの変更を確認・統合する作業を自動化する仕組みです。CD（継続的デリバリー） は、確認済みのコードを本番環境（公開サイト）に反映する作業を自動化する仕組みです。
わかりやすく言うと、「コードを変更してGitHubにアップロードしたら、自動でサイトが更新される」という状態がCI/CDが整った状態です。これを整える前は、コードを変更するたびに手動で公開作業をする必要がありました。
自動化前の手順と問題
Vercelでサイトを運用し始めた当初、コードに変更を加えるたびに次の手順を繰り返していました。
- コードを変更する
- 変更をGitHubにアップロードする
- Vercelの管理画面を開く
- 「再デプロイ」のボタンを押す
- デプロイが完了するまで待つ
- ブラウザでサイトを確認する
手順4が毎回必要だったため、小さな修正を繰り返す作業が手間でした。GitHubにアップロードしたら自動でサイトが更新されるように設定したい、というのがこの作業の目的です。
AIと進めた設定手順
現状の確認
まずAIに「Vercelでデプロイを自動化するにはどうすればよいか」と尋ねました。AIの説明によると、VercelとGitHubを連携させることで、GitHubに変更をアップロードするたびに自動でデプロイが実行されるようになるとのことでした。
確認したところ、私のサイトはすでにVercelとGitHubが接続されていましたが、自動デプロイの設定が正しく構成されていませんでした。
設定ファイルの追加
AIに「Vercelの自動デプロイを設定するために必要なファイルを教えてほしい」と問いました。AIは vercel.json という設定ファイルの内容を提示してくれました。私はその内容の意味をAIに説明してもらい、理解した上でプロジェクトに追加しました。
設定ファイルの中でビルドコマンドとデプロイの対象ブランチを指定する箇所があります。どのブランチの変更を本番環境に反映するかは、自分で判断して指定しました。
エラーへの対処
設定後、テストのためにGitHubにコードをアップロードしたところ、デプロイが失敗しました。エラーメッセージをAIに渡すと、「ビルドコマンドの記述に問題がある」という説明と、修正方法を提示してくれました。
修正を適用して再度アップロードしたところ、デプロイが成功しました。その後、ブラウザでサイトを開いて変更が反映されていることを確認しました。
設定完了後の確認手順
自動デプロイが機能していることを確認するために、次の手順で検証しました。
- テキストを1行変更してGitHubにアップロードする
- Vercelの管理画面でデプロイが自動で開始されているか確認する
- デプロイ完了後、ブラウザでサイトを開き、変更が反映されているか確認する
この検証を行わずに「設定できた」と判断することはしませんでした。
Google Analytics設定との関連
このサイトではGoogle Analyticsも設定しています。デプロイの自動化を設定した後、Vercelの環境変数（測定IDなど）が自動デプロイでも正しく引き継がれるかを確認しました。環境変数はVercelの管理画面で設定するものであり、コードの変更とは別に管理されます。自動デプロイを設定した後も環境変数の設定は保持されていることを確認しています。
まとめ
Vercelの自動デプロイ設定は、AIと一緒に進めることで設定ファイルの記述とエラーの解読を効率化できました。ただし、どのブランチを本番環境とするかの判断、設定後の動作検証、環境変数の確認は自分で行いました。
設定の自動化によって、毎回の手動デプロイ作業がなくなり、コードを変更してGitHubにアップロードするだけでサイトが更新されるようになりました。