Skip to content

デプロイ

公開日:December 10, 2024更新日:December 10, 2024
NextjsTypeScriptCoding📄

この章では、作成した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リポジトリと連携して、簡単にデプロイできます。

  1. Netlifyの公式サイトにアクセスし、アカウントを作成します。
  2. ダッシュボードの「New site from Git」をクリックし、GitHubなどのリポジトリプロバイダを選択します。
  3. デプロイしたいNext.jsアプリケーションのリポジトリを選択します。
  4. ビルド設定を確認し、「Deploy site」をクリックします。

Netlifyでも、リポジトリのメインブランチにプッシュするたびに、自動的にデプロイが行われます。

AWS

AWS(Amazon Web Services)は、Amazonが提供するクラウドコンピューティングプラットフォームです。AWSを使ってNext.jsアプリケーションをデプロイするには、いくつかの方法がありますが、ここでは代表的な方法として、AWS Amplifyを使う方法を紹介します。

  1. AWSマネジメントコンソールにログインし、AWS Amplifyのサービスページに移動します。
  2. 「Get started」をクリックし、「Deploy without Git provider」を選択します。
  3. アプリケーション名を入力し、「Manual deploy」を選択します。
  4. Next.jsアプリケーションのプロジェクトをzipファイルに圧縮し、アップロードします。
  5. 「Save and deploy」をクリックします。

AWS Amplifyでは、他にもS3とCloudFrontを使って静的サイトとしてデプロイする方法や、EC2やECSを使ってサーバーサイドレンダリングを行う方法などがあります。

自分でサーバーを立てる場合

Node.jsサーバーを自分で立てて、Next.jsアプリケーションをデプロイすることもできます。この方法は、より細かい制御が必要な場合や、特定のサーバー環境が必要な場合に適しています。

  1. サーバーにNode.jsをインストールします。
  2. Next.jsアプリケーションのプロジェクトをサーバーにアップロードします。
  3. npm installを実行して、依存関係をインストールします。
  4. npm run buildを実行して、アプリケーションをビルドします。
  5. npm startを実行して、アプリケーションを起動します。

ただし、この方法では、サーバーのセットアップや管理、スケーリングなどを自分で行う必要があります。

3. デプロイ時の注意点

  • Next.js のプロジェクトを本番環境にデプロイする前に、next build コマンドを使用して、最適化された本番ビルドを作成する必要があります。
  • 機密情報 (API キーなど) をコードに直接含めないでください。代わりに、環境変数を使用してください。Vercel や Netlify などのプラットフォームでは、環境変数を設定する簡単な方法が提供されています。
  • デプロイされたアプリケーションが正しく動作することを確認するために、本番環境でもテストを行うことをお勧めします。