この章では、作成したNext.jsアプリケーションをデプロイ(公開)する方法について学びます。Next.jsアプリケーションをデプロイするには、Vercel、Netlify、AWS、Dockerなど、様々な選択肢があります。それぞれの方法の特徴と手順を理解し、自分のアプリケーションに最適なデプロイ方法を選択しましょう。
1. Vercelへのデプロイ
Vercelは、Next.jsの開発元であるVercel社が提供するホスティングプラットフォームです。Next.jsとの親和性が高く、最も簡単にデプロイできる方法の一つです。
Vercelアカウントの作成
まず、Vercelの公式サイトにアクセスし、アカウントを作成します。GitHub、GitLab、Bitbucketのいずれかのアカウントを使ってサインアップできます。
GitHubとの連携
Vercelは、GitHubなどのGitリポジトリと連携して、デプロイを自動化できます。Vercelにログインしたら、ダッシュボードの「Import Project」から、デプロイしたいNext.jsアプリケーションのリポジトリを選択します。
プロジェクトのデプロイ
リポジトリを選択すると、プロジェクトの設定画面が表示されます。Next.jsアプリケーションをデプロイする場合、設定はほとんど自動的に行われるため、特に変更する必要はありません。「Deploy」ボタンをクリックすると、デプロイが開始されます。
デプロイが完了すると、VercelからデプロイされたアプリケーションのURLが提供されます。このURLにアクセスすると、公開されたアプリケーションを確認できます。
また、Vercelでは、GitHubリポジトリのメインブランチ(通常はmain
またはmaster
)にプッシュするたびに、自動的にデプロイが行われます。
2. その他のデプロイ方法
Vercel以外にも、Next.jsアプリケーションをデプロイする方法はいくつかあります。
Netlify
Netlifyも、Next.jsアプリケーションのデプロイによく使われるホスティングプラットフォームです。Vercelと同様に、GitHubなどのGitリポジトリと連携して、簡単にデプロイできます。
- Netlifyの公式サイトにアクセスし、アカウントを作成します。
- ダッシュボードの「New site from Git」をクリックし、GitHubなどのリポジトリプロバイダを選択します。
- デプロイしたいNext.jsアプリケーションのリポジトリを選択します。
- ビルド設定を確認し、「Deploy site」をクリックします。
Netlifyでも、リポジトリのメインブランチにプッシュするたびに、自動的にデプロイが行われます。
AWS
AWS(Amazon Web Services)は、Amazonが提供するクラウドコンピューティングプラットフォームです。AWSを使ってNext.jsアプリケーションをデプロイするには、いくつかの方法がありますが、ここでは代表的な方法として、AWS Amplifyを使う方法を紹介します。
- AWSマネジメントコンソールにログインし、AWS Amplifyのサービスページに移動します。
- 「Get started」をクリックし、「Deploy without Git provider」を選択します。
- アプリケーション名を入力し、「Manual deploy」を選択します。
- Next.jsアプリケーションのプロジェクトをzipファイルに圧縮し、アップロードします。
- 「Save and deploy」をクリックします。
AWS Amplifyでは、他にもS3とCloudFrontを使って静的サイトとしてデプロイする方法や、EC2やECSを使ってサーバーサイドレンダリングを行う方法などがあります。
自分でサーバーを立てる場合
Node.jsサーバーを自分で立てて、Next.jsアプリケーションをデプロイすることもできます。この方法は、より細かい制御が必要な場合や、特定のサーバー環境が必要な場合に適しています。
- サーバーにNode.jsをインストールします。
- Next.jsアプリケーションのプロジェクトをサーバーにアップロードします。
npm install
を実行して、依存関係をインストールします。npm run build
を実行して、アプリケーションをビルドします。npm start
を実行して、アプリケーションを起動します。
ただし、この方法では、サーバーのセットアップや管理、スケーリングなどを自分で行う必要があります。
3. デプロイ時の注意点
- Next.js のプロジェクトを本番環境にデプロイする前に、
next build
コマンドを使用して、最適化された本番ビルドを作成する必要があります。 - 機密情報 (API キーなど) をコードに直接含めないでください。代わりに、環境変数を使用してください。Vercel や Netlify などのプラットフォームでは、環境変数を設定する簡単な方法が提供されています。
- デプロイされたアプリケーションが正しく動作することを確認するために、本番環境でもテストを行うことをお勧めします。