Vercel × GitLabで試す、Vercel基本操作のチュートリアル

こんにちは、豊島です。

はじめに

Vercelは、フロントエンドアプリケーションのホスティングや自動デプロイに特化したプラットフォームです。
複雑な設定を作成することなく、Gitリポジトリと連携し、コードをプッシュするだけでデプロイが完了するという快適な開発体験を提供してくれます。
今回はGitLabとの連携を試しながら、Vercelの魅力のひとつである「プレビュー環境（Preview Deployments）」を使ってコミット → マージの流れを確認していきます。
なお、Vercel公式ドキュメントにあるSvelteKitのサンプルを使いながら進めていきます。

GitLabにプロジェクトを作成

まずはサンプルにあるSvelteKitのDeployからGitLabへリポジトリを作成しつつ、Vercel上でプロジェクトを作成していきます。

しばらく待つと、Vercel側でプロジェクトが作成できました。
次に、GitLab側の状態を確認していきます。

GitLab側でもプロジェクトを確認できました。

Vercel側のデプロイ画面にあるDomainsからデプロイされたサイトを確認することができます。

今回はテンプレートをベースにサクッとデプロイしましたが、新規プロジェクトを立ち上げる場合も、シンプルな設定から始めることができます。（別の記事で詳しく解説しようと思います）

コードの変更とブランチの作成

ここから実際に変更を加えてみます（GitLabのWeb IDEを使ってみます）

適当な変更を加えてブランチを切ってみます（余談ですがWebIDEはターミナルが使えないのですね）

Vercel側のDeploymentsを確認すると、新しく切ったブランチが表示されています。

プレビュー環境（Preview Deployments）

Vercelの大きな特徴のひとつが、自動で生成されるプレビュー環境です。
ブランチ単位、コミット単位で独立したURLが発行され、変更を確認・共有できます。

変更内容が反映されています。

エンジニアだけでなく、PMやデザイナーの方々も、環境を構築することなくリンクを開くだけで更新内容を確認できるのは非常に便利です。

（補足）コメント機能

プレビューでは、ページ上の任意の位置にコメントを残すこともでき、レビューやデザインの確認に役立ちます。

①ツールチップからコメントを選択して、②好きな位置にコメントを追加します。

他ユーザーから見た様子

マージリクエストの作成

次に、GitLab側でマージリクエストを作成していきます。

Vercelと連携している場合、マージリクエスト内にアクティビティが自動で挿入され、プレビュー環境のURLやコメント内容を直接確認できます。（GitHubでも同様です）
未解決のコメント（unresolved）を選択し、確認していきます。

解決にするとコメント全体がグレーアウトします。

マージリクエスト側もresolvedに変わっていますね。

ついでに全てのコメントが解決済でなければマージできない設定も追加しておこうと思います。
色々な方法はあると思うのですが、GitLabの設定からマージリクエスト -> マージチェックの項目で

• パイプラインが完了している
• すべてのスレッドが解決している

にチェックをいれておきます

未解決のコメントがある場合、パイプラインが失敗し、マージがブロックされます。

解決するとマージ可能になります。

（補足）プレビュー環境のアクセス保護

「このプレビュー環境って、誰でも見れるのでは...？」と不安に感じた方もいるかもしれません。
Vercelにはデプロイされた環境に対して複数のアクセス保護機能が用意されています（プレビュー環境だけでなく、本番環境を含めた全てのデプロイで利用可能）
代表的な設定は以下のとおりです。

• Vercel Authentication（全プラン共通）
  • Vercelユーザーかつ、許可されたユーザーのみ閲覧可能
• Password Protection（Enterpriseプラン or Proプラン + Add-Onのみ）
  • 簡易的なパスワード機能をつけることができる
  • Vercelユーザーではなくてもパスワードで閲覧可能になる
• Trusted IPs（Enterpriseプランのみ）
  • アクセスを許可するIPアドレスを制限可能（最大20件）

マージとデプロイ

最後にGitLab側でマージしていきます。

Vercel側ではDeploymentsのCurrent(青文字の箇所)が直近マージしたmainブランチに更新されています。

Vercelでのブランチ運用とロールバック

Vercelの強みは、ブランチごとに独立したデプロイ環境を持てる点にあります。
これにより、

• mainブランチでは本番環境（Production）
• feature/~ ブランチではプレビュー環境（Preview）

のように各環境が自動生成されます。
また、デプロイ後の運用を効率化するために、Vercelには2つの便利な管理機能が用意されています。

• Promote
  プレビュー環境としてデプロイされたリビジョンを、そのまま本番（Production）に昇格できます。
  「問題なく動作しているのでこれを公開したい」といったとき、再度ビルドを行うことなく、既存のデプロイ済みの成果物をそのまま本番へ切り替えられます。

• Instant Rollback
  直前のデプロイに問題があった場合、以前の本番バージョンへ即座に戻す機能です。

The rollback happens instantaneously
Vercel公式ドキュメント: Instant Rollback

とある通り、再ビルドは行われずダウンタイムも発生しません。誤ってバグをリリースしてしまった場合や、外部サービス連携で不具合が発覚した際にも、ワンクリックで即時復旧できるのは安心です。

まとめ

GitLab連携でのVercel運用を通じて、プッシュ → プレビュー → マージ → デプロイまでの流れが、複雑な設定を行うことなくシームレスにつながることを確認できました。
特に、プレビュー環境によるレビュー効率の向上や、Promote、Instant Rollbackによる安全なリリース運用は実務でも活用価値が高いと感じます。
この記事がどなたかの参考になれば幸いです。