【Vercel】【Terraform】Next.jsアプリをデプロイしてみる

Next.js

 

Next.jsで作ったアプリをVercelへデプロイしてみます。

今回はVercelのコンソールではなく、Terraformを使用して構築していきます

 

Vercel コンソールでの設定方法はこちら

 

Vercelとは??

 

公式HP

Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel
Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.

 

Vercelとは、ゼロコンフィグでWEBアプリケーションをデプロイできるサービスです。

 

Angular、React、Vue など様々なフレームワークに対応しています。

 

特に、サービスの提供元であるVercel社が開発してるNext.jsを簡単にデプロイできます。

なんと、GitHub等のリポジトリを連携するだけでデプロイでき、

PRをもとにアプリのプレビューを作成したり、自動デプロイが可能です!

 

本記事のゴール

 

・Next.jsのアプリを作成し、Vercelにデプロイする。

・ブラウザからアクセスできることを確認する

・自動デプロイできることを確認する。

 

前提

想定読者

 

  • Node.jsがインストールされている
  • Next.jsについて詳細な解説がなくても大丈夫
  • GitHubのアカウントがある
  • Terraformが使える

 

本記事で使用しているバージョン

 

 

参考記事

 

手順が公式ドキュメントにあったので、それを参考にします

How to Integrate Terraform with Vercel
Learn how to integrate Terraform with Vercel and the benefits of using an IaC solution like Terraform.

 

また、Terraformの公式ドキュメントやZennの記事も参考にして、進めていきます。

Terraform Registry
TerraformでVercelの環境を作ってみる

 

Next.js のアプリケーション

アプリケーション作成

 

Blog Starter Kit – Vercel
A statically generated blog example using Next.js and Markdown.

こちらのテンプレートを使用してデプロイするアプリを作成します!

 

 

作成出来たら、動作確認しておきましょう

 

ブラウザから、http://localhost:3000 にアクセスして下記が表示されればOK!

 

確認ができたら、Ctrl + c でアプリを停止させましょう。

 

GitHubのリポジトリを作成

 

Build software better, together
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

この画面でリポジトリを作成します。

 

GitHubへpush

 

リポジトリの画面を参考にGitへpushします。

 

 

Vercelでの事前準備

サインアップ

 

Sign Up – Vercel
Vercel's frontend cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.

アカウントがない方は、こちらからサインアップしていきます。

 

今回は試しにデプロイしてみるだけなので、プランは「Hobby」※無料 を選択します。

アカウント名を入力したら、Continue をクリックし次に進みます。

 

GitHubのリポジトリを使用したいので、「Continue with GitHub」を選択

VercelからGitHubをアクセスできるよう、「Authorize Vercel」をクリックします

 

アカウントの作成が完了し、ホーム画面(?)に遷移します

 

VercelからGitHubへアクセスできるようにする

 

ホーム画面にて、

Import Git Repository > Select a Git Namespace > Add GitHub Account を選択

 

今回は、先ほど作成したGitHubリポジトリのみをImportしていきます。

Only select repositories」を選び、Select repositories にてGitHubリポジトリを選択。

選択できたら、Install をクリックします。

 

 

GitHubのパスワードを入力すると、ホーム画面に遷移しリポジトリが表示されていればOK!

 

Tokenを発行する

 

TerraformからVercelへアクセスできるようTokenを発行しておきます。

手順は公式ドキュメントを参考にします。

How to Create and Use Vercel API Access Tokens
Learn how to create a Vercel API Access Token and how to use the Access Token in both personal account and team API calls.

 

Dashboard

こちらにアクセスし、Tokenを発行していきます。

 

入力情報は下記を参考にし、Create をクリックします。

プロパティ 説明
TOKEN NAME Tokenの名前。
わかりやすいものを設定。
VERCEL_API_TOKEN
SCOPE Tokenの権限。
絞ったほうがいいが、今回はフルでつける。
Full Account
EXPIRATION Tokenの有効期限。
セキュリティ的には設定したほうが良いが、今回は期限なし。
No Expiration

 

 

Tokenが表示されるため、メモしておきます。後ほど使います!

※後からTokenの値を確認できないため、注意

 

 

これで事前準備は完了しました!なので、Terraformでコードを書いていきます。

 

Terraform

 

ファイルは次のものを作成しました

.
├── deployment.tf
├── main.tf
├── project.tf
├── provider.tf
├── terraform.tfvars
└── variables.tf

 

コード

main.tf

 

Vercelを使うことを定義します。

 

provider.tf

 

Vercel 固有の設定をしておきます。今回は先ほど取得したTokenを設定します。

Tokenの値を直書きするのはよくないので、変数を読み取ります。

実際の値は、後ほど出てくるterraform.tfvars に記述します。

 

variables.tf

 

使う変数を定義します。Vercel Tokenの変数を用意しておきます。

 

terraform.tfvars

 

ここで、VercelのTokenの値を定義します。

 

Gitで管理する場合、このファイルだけはコミットしないよう注意してください!

 

project.tf

 

Vercelに作成するProjectを定義します

 

プロパティ 説明
name
プロジェクト名。自分がわかりやすいものなら何でもいい。
framework
アプリのフレームワーク。
git_repository
連携させるリポジトリを定義。
 type
GitHub、GitLab、BitBucket のどれと連携させるか。
 repo
連携させるリポジトリ。

 

deployment.tf

 

デプロイの内容を定義します。

特別なデプロイ設定は今回しないので、これぐらいのプロパティでOKです!

 

プロパティ 説明
project_id デプロイするプロジェクトのID
ref デプロイ対象のブランチやコミット。
GitHub、GitLab、BitBucket からデプロイさせる場合は必須。
production 本番環境かどうか

 

init

 

 

plan

 

 

apply

 

 

エラーが出なければOKです!

 

ブラウザからアクセスして動作確認

 

https://vercel.com/<アカウント名>/<プロジェクト名>
※アカウント名、プロジェクト名は各々

上記のようなURLからVercelのダッシュボードに遷移し、右上の Visit をクリックします

 

下記のように表示されればOKです!

 

自動デプロイ

commit

 

テスト用のブランチ(test)を切り、checkoutします

 

components/intro.tsx に少し変更を加えます(ハイライト部)

 

commit および push します

 

PRを作成

 

GitHubのリポジトリの画面からPRを作成していきます

Compare & pull request をクリックします

 

適当にコメントして、Create pull request をクリックし、PRを作成します

 

Previewを確認

 

PRを作成すると、vercel の bot がコメントを残してくれます

そこからPRマージ後のプレビューを確認できます。

 

Visit Preview をクリックし、下記のように表示されればOKです!

(Auto Deploy Test Success!! と表示されるはず。。。)

 

コメントを残せるなど、見るだけではなくレビューしやすいものとなっています

 

PRをマージ

 

プレビューにて確認できたので、PRをマージしていきます。

Merge pull request → Confirm merge をクリックします。

 

マージ出来たら、Delete branch でマージ元のブランチを消しておきましょう

 

自動デプロイを確認

 

ダッシュボードの Visit からデプロイの結果を確認します。

Created が更新されていれば、デプロイが成功しています。

 

下記のように表示されればOKです!

(Auto Deploy Test Success!! と表示されるはず。。。)

 

削除

 

 

まとめ

 

すごい簡単にデプロイできましたー!!

 

さらに

  • カスタムドメインを使用する
  • スピードインサイトを有効にする

などをしていきたいと思いますー。

 

コメント

タイトルとURLをコピーしました