Vercel は Serverless サービスを提供するプラットフォームで、静的ページのプロキシやシンプルな API の作成に特に適しています。無料プランは個人プロジェクトに非常に優しく、特に中国地域では優れた CDN サポートを利用できます。しかし、GitHub の組織下でホストされているプロジェクトの場合、Vercel は通常、有料の Pro プランへのアップグレードを要求します。この記事では、この制限を回避して、Vercel のサービスを無料で利用する方法を紹介します。

背景紹介

Vercel の Hobby プランは個人プロジェクト向けに無料のホスティングサービスを提供しており、開発者の間で広く支持されています。しかし、プロジェクトが GitHub 組織にホストされている場合、Vercel はデフォルトで有料アップグレードを要求します。これは小規模チームや予算に限りのある開発者にとって、間違いなく負担を増やします。そのため、GitHub に紐付かない Vercel プロジェクトを作成し、無料サービスを利用する方法を見つける必要があります。

GitHub に紐付かない Vercel プロジェクトの作成

まず、Vercel のコマンドラインツールを使って、GitHub から独立したプロジェクトを作成する必要があります。

Vercel CLI のインストール

ターミナルで以下のコマンドを実行し、Vercel CLI をグローバルにインストールします。

npm install -g vercel

Vercel プロジェクトの作成

プロジェクトディレクトリに移動し、以下のコマンドを実行します。

vercel login
vercel

この過程で、インタラクティブなターミナル操作画面が表示されます。指示に従って一つずつ進めると、GitHub のどのプロジェクトにも接続されていないサービスを Vercel 上に作成できます。デプロイに成功すると、Vercel のウェブインターフェースからデプロイ済みのサービスにアクセスできます。これで、作業の半分が完了しました。

自動デプロイの設定

次に、コードをコミットするたびに Vercel へ自動デプロイされるよう設定する必要があります。この機能には GitHub Actions を利用します。

GitHub Actions の設定

GitHub リポジトリに CI 設定ファイルを作成し、ビルド操作の後に以下のステップを追加します。

- name: Deploy to Vercel
  uses: amondnet/vercel-action@master
  env:
    VERSION: ${{ env.GITHUB_SHA }}
  with:
    vercel-token: ${{ secrets.VERCEL_TOKEN }}
    vercel-org-id: ${{ secrets.ORG_ID }}
    vercel-project-id: ${{ secrets.PROJECT_ID }}
    working-directory: ./
    vercel-args: '--prod' # 可选参数

GitHub Secrets の準備

上記の GitHub Action を使用する前に、GitHub Secrets に以下のパラメータを設定する必要があります。

• VERCEL_TOKEN: Vercel アカウントページ で作成します。
• ORG_ID と PROJECT_ID: プロジェクトルートディレクトリの .vercel/project.json ファイルで確認できます。

以上の手順により、チームプロジェクトの自動デプロイを実現し、Vercel のサービスを完全に無料で利用できるようになります。

まとめ

Vercel CLI と GitHub Actions を巧みに利用することで、Vercel による GitHub 組織プロジェクトへの有料制限を回避できます。この方法はコストを節約できるだけでなく、プロジェクトの自動デプロイ効率も向上させられるため、小規模チームや個人開発者に非常に適しています。この記事が、予算を増やすことなくチームプロジェクトを迅速に公開する助けになれば幸いです。