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

Next.js

 

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

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

 

Terraformでの設定方法はこちら

 

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のアカウントがある

 

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

 

 

参考記事

 

GitHub等のリポジトリを連携してデプロイする手順が公式ドキュメントにあったので、
それを参考にします

Import an existing project
Create a new project on Vercel by importing your existing frontend project, built on any of our supported frameworks.

 

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」をクリックします

 

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

 

デプロイ

 

ホーム画面にて、

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

 

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

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

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

 

 

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

Importをクリックし、デプロイ設定画面に遷移します

 

フレームワークやルートディレクトリ、ビルド設定、環境変数に変更はないため、

Deployをクリックします

 

デプロイがスタートしました!!!

デプロイが完了すると画面が変わります!

 

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

 

先ほどの画面にて、Continue to Dashboard をクリックしてダッシュボードに遷移します

右上の 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!! と表示されるはず。。。)

 

削除

 

今回は、Vercelを触ってみる目的でデプロイしたので、削除していきます。

ProjectのSettingsにいき、Deleteをクリックします

 

プロジェクト名などなどを記載して、Continueをクリックしたら削除完了です

 

まとめ

 

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

 

さらに

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

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

 

コメント

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