Next.jsのプロジェクトを作成してCLIを使ってVercelへデプロイしてみる
Next.jsプロジェクトの立ち上げからVercelへCLIを使ってデプロイするまでの一連の流れをまとめた備忘録です。
<前提>
GitHubとVercelのアカウントは作成済み。
GitHub CLIはインストール済み。
Next.jsの編集は省略します。
まずはGitHubにリポジトリの準備
GitHubにリポジトリを作ります。(GitHub CLIを使っています)
gh repo create sample --private
sample = プロジェクト名
--private = 非公開リポジトリ
作成したリポジトリをローカルにクローンします。
gh repo clone sample .
末尾の「.(ドット)」なしの場合、プロジェクト名のフォルダが作成されます。
今回は作成せずに実行中のフォルダにクローンしたかったので「.」を付けました。
Next.jsプロジェクトの作成
Next.jsのプロジェクトも現在のディレクトリに作成するため末尾に「.」を付けています。
npx create-next-app@latest .
今回は、デプロイまでの一連の流れだけなのでNext.jsの編集はせずにコミット・プッシュしました。
リポジトリが紐づいたか確認してみます。
gh browse
GitHubのリポジトリページが開き、データが反映されていることが確認できました。
リポジトリの準備が完了しました。
Vercel CLIの導入からデプロイ
Vercel CLIをインストールします。(すでにインストール済みの場合は不要です)
npm i -g vercel
Vercelにログインしてみる
ブラウザが起動してVercelへのログインが成功するとSuccess!と表示されます。
vercel login
● Continue with GitHub
○ Continue with GitLab
○ Continue with Bitbucket
○ Continue with Email
○ Continue with SAML Single Sign-On
> Success! ~
ローカルで実行してみる
初回、いくつかVercelの設定を聞かれます。
設定が終わるとVercelにプロジェクトが作成されます。
vercel dev
作成されたプロジェクトを確認する場合、以下を実行すると一覧が表示されます。
vercel project list
ローカルのプロジェクトとVercelのプロジェクトを紐づけます。
vercel link
? Set up “~\sample”? [Y/n] y
? Which scope should contain your project? xxxxx projects
? Found project “xxxxx-projects/sample”. Link to it? [Y/n] y
✅ Linked to xxxxx-projects/sample(created .vercel)
いよいよデプロイ
シンプルすぎて少々心配になりますが、以下でデプロイが実行されます。
何も編集してないデフォルトのままのNext.jsなのであっと言う間にデプロイが完了しました。
vercel
🔍 Inspect: https://vercel.com/xxxxx-projects/sample/ass7s6dasd4fsa6dfasdf5s [1s]
✅ Preview: https://sample-ws7ae6afs-xxxxx-projects.vercel.app [1s]
📝 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/xxxxx-projects/sample/settings
番外編:環境変数をVercelCLIで簡単設定
環境変数名「BASE_URL」、値「https://xxx.com」を本番・プレビュー・開発環境に設定する。
vercel env add
? What’s the name of the variable? BASE_URL
? What’s the value of BASE_URL? https://xxx.com
? Add BASE_URL to which Environments (select multiple)? (Press <space> to select, <a> to toggle all, <i> to invert selection)
› ▪︎ Production
▪︎ Preview
▪︎ Development
設定した環境変数を確認する。
値は暗号化されるので表示されません。ダッシュボードから確認できます。
vercel env list
name value environments created
BASE_URL Encrypted Production, Preview, Development 12s ago