Vercel CLIの基本的な使い方

November 4, 2023

Vercel CLIの基本的な使い方をまとめる。公式ドキュメント：https://vercel.com/docs/cli

コマンド集

インストール

まずはインストール。

$ npm install -g vercel

Vercelにログイン

以下はGitHubアカウントでのログイン。ブラウザが開いて認証を行う。

$ vercel login --github

プロジェクト一覧

$ vercel project ls

プロジェクトの作成

作成するだけ

$ vercel project add sample-project-by-cli
Vercel CLI 32.5.0
> Success! Project sample-project-by-cli added (your-username) [332ms]

デプロイも一緒に

https://vercel.com/docs/cli/project-linking

オプションなしでvercelコマンドを実行すると、プロジェクトの作成、デプロイを行うことができる。

$ vercel
Vercel CLI 32.5.0
? Set up and deploy “/workspaces/my-lovely-project”? [Y/n] y
? Which scope do you want to deploy to? <<your-username>>
? Link to existing project? [y/N] n
? What’s your project’s name? my-lovely-project
? In which directory is your code located? ./
Local settings detected in vercel.json:
Auto-detected Project Settings (Next.js):

Vercel公式のexampleからコードを持ってくる

ここで公開されているexampleからサンプルコードを引っ張ることができる。

$ vercel init nextjs new-directory-name

nextjsがサンプルコードの名前、new-directory-nameが引っ張ってくるローカルのディレクトリ名。

環境変数の設定

アプリケーションで用いるAPIキーなどの環境変数を設定する。環境変数はプロジェクト単位。vercel secretsは別物なので注意。

$ vercel env add
Vercel CLI 32.5.0
? What’s the name of the variable? API_KEY
? What’s the value of API_KEY? XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
? Add API_KEY to which Environments (select multiple)? Production, Preview, Development
✅  Added Environment Variable API_KEY to my-lovely-project [839ms]

pullするとローカル上の.envにも反映される。

$ vercel env pull

なお、環境変数の追加や変更を本番環境のアプリケーションで読めるようにするには、アプリのデプロイが必要。

Vercel CLIを用いたVercelプロジェクトの初期セットアップ

Next.jsの初期アプリをVercelにデプロイまでの順序をまとめる。

Vercel CLIのインストール

$ npm i -g vercel

VercelにGitHubアカウントでログイン

$ vercel login --github
> Success! GitHub authentication complete for your@email
Congratulations! You are now logged in. In order to deploy something, run `vercel`.
💡  Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).

Next.jsのプロジェクトを作成

$ npx create-next-app@latest

Vercel CLIを用いて一旦デプロイ

$ vercel
Vercel CLI 32.5.0
? Set up and deploy “/workspaces/projectname”? [Y/n] y
? Which scope do you want to deploy to? yken2257
? Link to existing project? [y/N] n
? What’s your project’s name? projectname
? In which directory is your code located? ./
Local settings detected in vercel.json:
Auto-detected Project Settings (Next.js):
- Build Command: next build
- Development Command: next dev --port $PORT
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: Next.js default
? Want to modify these settings? [y/N] n
🔍  Inspect: https://vercel.com/username/projectname/xxxxxxxxxxxxx [4s]
✅  Preview: https://projectpreviewname.vercel.app [4s]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/username/projectname/settings

環境変数の設定（もしあれば）

$ vercel env add
Vercel CLI 32.5.0
? What’s the name of the variable? TEST_VAR
? What’s the value of TEST_VAR? TEST_VAL
? Add TEST_VAR to which Environments (select multiple)? Production, Preview, Development
✅  Added Environment Variable TEST_VAR to Project sample-vercel-project-by-cli [243ms]

環境変数をローカルにpull

$ vercel env pull
Vercel CLI 32.5.0
> Downloading `development` Environment Variables for Project sample-vercel-project-by-cli
✅  Created .env.local file  [207ms]

GitHubリポジトリとVercelプロジェクトを紐付け

$ vercel git connect

アプリケーションを編集して、デプロイ

$ vercel --prod
Vercel CLI 32.5.0
🔍  Inspect: https://vercel.com/username/projectname/xxxxxxxxxxxxx [1s]
✅  Production: https://projectpreviewname.vercel.app [1s]

あるいは、GitHubリポジトリと連携済みなら普通にコミットすれば良い。