841-biborokuWebフロントエンドの備忘録

Next.jsのプロジェクトを作成してCLIを使ってVercelへデプロイしてみる

VercelNext.js

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

シェア

Category