(Vercel使いたいのに) organizationでサイト作った瞬間終わったわ - OUCRC | 岡山大学電子計算機研究会

トップ画像

(Vercel使いたいのに) organizationでサイト作った瞬間終わったわ

執筆者: あんどう

最終更新: 2023/09/10

カテゴリー

プログラミング

デプロイしたいリポジトリ

共同で何か作ったが、Next.jsの機能に依存してしまった。Vercelにデプロイしたい。

(※このフレームワークは開発元がインフラも同時に提供しており、ここじゃないとフルに機能が使えない)

デプロイしようとしたら、人数分の料金を払えと言われた。

GitHub 組織からデプロイするため、他のユーザーと共同作業するには Vercel チームを作成する必要があります。
の14日間の試用版が含まれていますプロプラン

これを突破する。

※以下、非商用サイトである前提で説明する。商用ならおとなしく契約すること。

やること

組織リポジトリ
  --> GitHub連携でコードを送信
  --> ❌ Vercel「お前組織やん、金を払え」

組織リポジトリ
  --> GitHub Actionsでビルド
  --> 個人アカウントのトークンで成果物を送信
  --> ✅ Vercel「いいよ」

こんな感じで、トークンで権限を与えて、CIからデプロイする。

	今回の方法	通常の方法
料金	0	*$20 開発者数 * 月**
デプロイかかる時間	GitHub Actionsに依存する	Vercelに依存する（通常こちらが早い）
設定	面倒	かんたん
PRのプレビューURL	❌ 担当者が共有するか、GitHubの結果画面を見に行く面倒	✅ コメントに書いてくれる

1_リポジトリシークレットの設定画面を開く

デプロイしたいリポジトリの、シークレット画面を開きっぱなしにしておく。あとで使う

2_Vercelアカウントの情報を取得

次に、デプロイするためのアカウントでVercelにログインする。

無料で使いたいためチームは作らない。

担当者が、Vercel個人アカウントの設定画面を開く。

General画面に「Your ID」がある。デプロイしたい組織リポジトリの、Actions secretsに VERCEL_ORG_ID として設定する。

トークンを作成する。権限の選択肢が2023年9月10日現在「フルアカウント」しかない。

デプロイしたい組織リポジトリの、Actions secretsに VERCEL_TOKEN として設定する。

3_空のリポジトリを作成してデプロイ

https://repo.new

個人アカウントで空のリポジトリを作成。

Vercelでプロジェクトとして追加する。

空なので404になるが「おめでとう」といわれる。

Continue to Dashboard▶ Settingsでプロジェクト設定を開く。

Git▶ Disconnect でリポジトリ連携を解除する。そもそもデプロイしたいリポジトリと関係ないので問題ない。

4_プロジェクトの設定

デプロイ前に設定を済ませる必要がある。

起動コマンド

General画面を開く。フレームワークを選ぶと起動コマンドが決まる。場合に応じて設定を変える。いくらビルドが通っても、ここが違っていると動かない。

プロジェクトのID

GitHub連携を捨てたので、CIにプロジェクトのIDを伝える必要がある。

Generalの下の方を見るとProject IDがある。デプロイしたい組織リポジトリの、Actions secretsに VERCEL_PROJECT_ID として設定する。

リージョン

Functionsページを開く。ユーザーに近い場所にリージョンを設定する。基本的にエンドポイントはここに配置される。

ビルド用環境変数

もしビルド用の環境変数が必要な場合、左の「Environment Variables」で設定する。.envファイルをコピペすれば埋まる。

なお、これらをGitHubのリポジトリシークレットに設定する必要はない。ビルド前に取得される。

※つまり、さっきのトークンとプロジェクトIDが流出すれば、第三者が本番の環境変数を取得できてしまう。厳重に管理すること。

5_ワークフローを作成

あとはビルドの成果物をVercelに投げればいい。

git switch -c feat/vercel-deployment
mkdir -p .github/workflows
touch .github/workflows/deploy-{preview,production}.yml

name: プレビューデプロイ
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches-ignore:
      - main
jobs:
  deploy-preview:
    runs-on: ubuntu-latest
    environment:
      name: "preview"
      url: ${{ steps.deploy.outputs.url }}
    steps:
      - name: チェックアウト
        uses: actions/checkout@v3

      - name: Node.jsのインストール
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - uses: pnpm/action-setup@v2
        name: pnpmのインストール
        with:
          version: 8
          run_install: false
      - name: pnpm storeのパスを取得
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
      - uses: actions/cache@v3
        name: pnpm storeのキャッシュ
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      - name: パッケージのインストール
        run: pnpm install

      - name: Vercel CLIのインストール
        run: pnpm install -g vercel@latest
      - name: Vercelからプレビュー環境用設定を取得
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - name: プレビュー用ビルド
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - name: 成果物をプレビュー環境でデプロイ
        id: deploy
        run: echo "url=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT

name: 本番デプロイ
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - main
jobs:
  deploy-production:
    runs-on: ubuntu-latest
    environment:
      name: "production"
    steps:
      - name: チェックアウト
        uses: actions/checkout@v3

      - name: Node.jsのインストール
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - uses: pnpm/action-setup@v2
        name: pnpmのインストール
        with:
          version: 8
          run_install: false
      - name: pnpm storeのパスを取得
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
      - uses: actions/cache@v3
        name: pnpm storeのキャッシュ
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      - name: パッケージのインストール
        run: pnpm install

      - name: Vercel CLIのインストール
        run: pnpm install -g vercel@latest
      - name: Vercelから本番環境用設定を取得
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: 本番用ビルド
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: 成果物を本番環境でデプロイ
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

解説

How can I use GitHub Actions with Vercel

公式が公開している方法に、pnpmのパッケージをキャッシュするステップを追加した。pnpmじゃない場合は適当に変えてくだちい。

VercelへのデプロイをGitHub Actions経由で行うことでVercelチームメンバー以外でも開発に参加できるようにする

また、プレビューURLを取得する方法は上記記事を参考にした。上記記事では1ファイルで済んでいるが、~~yamlのインデントを未だに間違えまくるし~~分岐を多用したくないためファイルを分けた。

6_main以外でプッシュ

git add .
git commit -m "ci: vercelにデプロイするワークフローを追加"
git push origin HEAD

main以外のプッシュで、deploy-previewジョブが起動する。

上記のように、Vercelから環境変数を取ってenvファイルに書き出し、GitHub Actions上でビルドして、成果物をVercelに送信する。

めんどくせ～～～二度手間！本来は全部Vercelで完結するはずが、組織の制限を突破するため手間がかかっている。

せめてもの時短のため、pnpmのstore部分をキャッシュしている。キャッシュが有効な限り、再ダウンロードは行われない。

今回、例としてnodeとpnpmを使っているが、そもそもnode使わなければいいんだよな。next以外ならCloudflareとかdeno deployを選ぼう。

7_プレビューをメンバーに共有

Vercel担当者のみ、デプロイ画面を閲覧できる。チームを作成していないので、ここは仕方ない。

プレビューなので毎回新しい環境が作られ、さっきのリージョンにエンドポイントが作られる。東京を選んだので HND1 (羽田1) になっている。

※GitHub連携を捨てたので、この画面からPRに戻れず、地味に不便。ここは仕方ないので我慢。

Vercel担当者がPRを作成した場合の共有

ブランチ名に基づいたURLが割り振られるので、Share▶ 「Anyone」を選んでチームメンバーに共有する。

メンバーが各自のVercelアカウントでログインすることで、コメントを残せるようになる。

※無料プランなので、同時に1パターンのURLしか共有できない。

PR作者がVercelに入れない場合の共有

そもそも、Vercel担当者以外がPRを作ると、上記のデプロイ画面が開けない。GitHub連携を捨てたので、コメントもしてくれない。

※コメントもしてくれるvercel-actionは自由度の低さから採用しなかった

Vercel担当者以外がPRを出した場合、リポジトリの「(Environ|Deploy)ments」画面を開く。(なぜか表記が揺れている)

新しいタブで開くアイコンを押せば、プレビューを閲覧できる。ここから担当者以外がコメントできるかは未確認。2023年9月10日現在、レイアウトの改善中らしい (ここ分かりづらいんよな)

8_mainにマージ

プレビューがOKならmainにマージする。mainの更新でdeploy-productionジョブが起動し、本番環境にデプロイされる。

404だった画面が、実際のサイトに置き換わる。

以上の方法で、組織のリポジトリを無料で公開できる。

取得に失敗しました

2021年度入部

GitHub

418 I'm a teapot

この人が書いた記事

記事「null」のサムネイル

Polygon

プログラミング

スタートメニューからWSLを終了させ、RAM使用率を表示

内容を見る

記事「null」のサムネイル

Polygon

プログラミング

RAMが足りないので、Dockerだけ別PCのWSLに任せてリモート開発する

内容を見る

記事「null」のサムネイル

Polygon

プログラミング

MacのChromeで学校用プロフィールのショートカットを作る

内容を見る

最新のオススメ記事

記事「null」のサムネイル

Polygon

プログラミング

TypeScript + webpack の環境を雰囲気で構築する。

内容を見る

記事「null」のサムネイル

Polygon

私の11/11(VRC)

内容を見る

記事「null」のサムネイル

Polygon

プログラミング

particle lifeの世界

内容を見る

記事「null」のサムネイル

Polygon

デザイン/グラフィック

タコメイド🐙ちゃん・イラストメイキング

内容を見る