🚀

【Next.js和訳】Deployment

2021/10/02に公開

Next.js

tech

この記事について

この記事は、Deploymentの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Deployment

Vercel (推奨)

Next.js を本番環境にデプロイする最も簡単な方法は、Next.js の開発者が提供するVercel プラットフォームを使用することです。Vercelは、静的サイト、ハイブリッドアプリ、サーバーレス機能のためのクラウドプラットフォームです。

始めるにあたって

まだやっていない場合、Next.js のアプリを Git プロバイダーにプッシュします：GitHub、GitLab、またはBitBucketです。リポジトリはプライベートでもパブリックでも構いません。

次に、以下の手順を実行します。

Vercel にサインアップします（クレジットカードは不要です）。
サインアップすると、"Import Project"ページが表示されます。"From Git Repository"で、使用している Git プロバイダーを選択し、統合を設定します。(手順：GitHub / GitLab / BitBucket)。
設定が完了したら、「Import Project From ...」をクリックして、Next.js アプリをインポートします。このアプリが Next.js を使用していることが自動検出され、ビルド構成が設定されます。何も変更する必要はありません。ー全部うまくいくはずです。
インポートが終わると、Next.js アプリがデプロイされ、デプロイ用の URL が表示されます。"Visit"をクリックすると、アプリが本番環境に配置されます。

おめでとうございます。Next.js アプリのデプロイが完了しました。ご不明な点があれば、Vercel ドキュメントをご覧ください。

DPS：開発、プレビュー、出荷

推奨するワークフローについて説明します。Vercelでは、DPS と呼ばれるワークフローをサポートしています。DPSとは、Develop(開発)、Preview(プレビュー)、Ship(出荷)のことです。

開発：Next.js でコードを書きます。開発サーバーを稼働させ、React Fast Refreshを活用します。
プレビュー：GitHub / GitLab / BitBucket 上のブランチに変更をプッシュするたびに、Vercel は一意の URL を持つ新しいデプロイメントを自動的に作成します。これらのデプロイメントは、GitHub でプルリクエストを開いたときに見ることができますし、Vercel の自分のプロジェクトページの「Preview Deployments」で見ることもできます。詳しくはこちらをご覧ください。
出荷：出荷の準備ができたら、プルリクエストをデフォルトブランチ（例：main）にマージします。Vercel は自動的に本番デプロイを作成します。

DPS のワークフローを使用することで、コードレビューに加えて、デプロイメントのプレビューを行うことができます。各デプロイメントには、共有したり統合テストに使用できる固有の URL が作成されます。

Next.js に最適化

Vercelは Next.js のクリエーターによって作られており、Next.js に対するファーストクラスのサポートを備えています。

例えば、ハイブリッドページのアプローチは完全にサポートされています。

すべてのページは、静的生成かサーバーサイドレンダリングのいずれかを使用できます。
静的生成を使用するページとアセット（JS、CSS、画像、フォントなど）は、Vercel のエッジネットワークから自動的に提供され、非常に高速に処理されます。
サーバーサイドレンダリングとAPI ルートを使用するページは、自動的に孤立したサーバーレス・ファンクションになります。これにより、ページレンダリングや API リクエストを無限に拡張することができます。

カスタムドメイン、環境変数、自動 HTTPS など

カスタムドメイン：Vercelにデプロイすると、Next.js アプリにカスタムドメインを割り当てることができます。詳細はこちらのドキュメントをご覧ください。
環境変数：Vercel では、環境変数を設定することもできます。こちらのドキュメントをご参照ください。環境変数は、Next.js アプリで使用することができます。
自動 HTTPS： HTTPS はデフォルトで有効になっており（カスタムドメインを含む）、追加の設定は必要ありません。SSL 証明書は自動更新されます。
もっと見る：Vercel プラットフォームの詳細については、ドキュメントをご覧ください。

自動アップデート

Next.js のアプリケーションをデプロイする際には、リロードすることなく最新のバージョンを表示したいものです。

Next.js は、ルーティング時にバックグラウンドでアプリケーションの最新バージョンを自動的にロードします。クライアントサイドのナビゲーションでは、next/linkは一時的に通常の<a>タグとして機能します。

注意：（古いバージョンの）新しいページがすでにnext/linkでプリフェッチされている場合、Next.js は古いバージョンを使用します。その後、ページを完全に更新するか、クライアント側で複数回ページを遷移させると、Next.js は最新バージョンを表示します。

その他のホスティングオプション

Node.js サーバー

Next.js は、Node.js をサポートするすべてのホスティングプロバイダーに導入できます。カスタムサーバーを使用している場合は、このようなアプローチになります。

package.jsonに "build"と "start"のスクリプトが含まれていることを確認してください。

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

next buildは、.nextフォルダ内の本番アプリケーションをビルドします。ビルド後、next startは、静的に生成されたページとサーバーサイドでレンダリングされたページの両方を提供する、ハイブリッドページをサポートする Node.js サーバーを起動します。

Docker Image

例

with-docker

Next.js は、Dockerコンテナをサポートするあらゆるホスティングプロバイダーにデプロイできます。この方法は、KubernetesやHashiCorp Nomadなどのコンテナオーケストレーターにデプロイする際にも、あらゆるクラウドプロバイダーの単一ノード内で実行する際にも使用できます。

ここでは、node:alpineを使用したマルチステージのDockerfileをご紹介します。

# 必要なときだけ依存関係をインストール
FROM node:alpine AS deps
# チェック https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine libc6-compatが必要な理由を理解するために.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# 必要なときだけソースコードを再構築する
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build && yarn install --production --ignore-scripts --prefer-offline
# プロダクション・イメージで、すべてのファイルをコピーし、次を動かす
FROM node:alpine AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
# next.config.jsをコピーする必要があるのは、デフォルトの設定を使用していない場合のみです。
# コピー --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
USER nextjs
EXPOSE 3000
# Next.jsは、一般的な使用状況に関する完全に匿名の遠隔測定データを収集します。
# 詳しくはこちら: https://nextjs.org/telemetry
# 遠隔測定を無効にする場合は、次の行のコメントを外してください。
# ENV NEXT_TELEMETRY_DISABLED 1
CMD ["yarn", "start"]

この Dockerfile は、必ずプロジェクトのルートフォルダーに置いてください。

docker build . -t my-next-js-appでコンテナをビルドし、docker run -p 3000:3000 my-next-js-appで実行します。

静的な HTML のエクスポート

Next.js アプリの静的な HTML エクスポートを行いたい場合は、ドキュメントの指示に従ってください。

Discussion

ログインするとコメントできます