あなたの次のDockerizing.反応アプリケーション!

何がDockerですか？

Dockerはサーバーを構築するためのソフトウェアフレームワークです.DockerをCLIと考えるが、クラウドについて考える.
このチュートリアルではNext.js サンプルアプリケーションと作成Dockerfile それをDockerizeするために.

要件

を完了するにはNext.js アプリケーションは、次の必要があります.

Docker お使いのコンピュータにインストールされます.

Node.js and npm/yarn 次のアプリを作成するには、システム上にインストールされます.

次のサンプルを作成します。jsアプリ

あなたが既にDockerizeにしたいアプリケーションがあるならば、あなたは更なる手順で進むことができますnext.js アプリ.
端末に次のコマンドを実行します.

yarn create next-app 

このコマンドはファイルを作成して、あなたのnext.js アプリケーション.

Dockerfileの作成

まず、私たちのアプリをVSコードやお好みの任意のコードエディタで開きましょう.
次のコマンドを実行します.

cd <your app name>

code . 

( vscodeが設定されている場合)
ここでは、アプリケーションのディレクトリが表示されます.それはこのように似ています.
[注]私はあなたが見ている理由ですtsconfig.json と.ts ]

新しいファイルを作成し、名前を付けてくださいDockerfile . デフォルトでは、このファイルはdocker そして、それは我々が提供するコマンドと命令の束を実行します.
注意:コマンドはどのように書かれているかの順序で実行されます.
インサイドDockerfile これらのコードを書きます.チュートリアルの最後にどのように動作するかを説明します.
注意:私は使用していますyarn このチュートリアルでは、npm しかし、それらを交換する必要がありますyarn 実行可能コードnpm ]

FROM node:lts as dependencies
WORKDIR /<your-app-name>
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

FROM node:lts as builder
WORKDIR /<your-app-name>
COPY . .
COPY --from=dependencies /<your-app-name>/node_modules ./node_modules
RUN yarn build

FROM node:lts as runner
WORKDIR /<your-app-name>
ENV NODE_ENV production

COPY --from=builder /<your-app-name>/public ./public
COPY --from=builder /<your-app-name>/package.json ./package.json
COPY --from=builder /<your-app-name>/.next ./.next
COPY --from=builder /<your-app-name>/node_modules ./node_modules

EXPOSE 3000
CMD ["yarn", "start"]

建築家イメージの構築

次のコマンドを実行して、Docker イメージ.

docker build . -t <project-name>

このコマンドはDocker 名前のイメージ<project-name> .
ランニングDocker 画像がビルドされると、次のコマンドが実行されます.

docker run -p 3000:3000 <project-name>

さて、ブラウザを開いて

http://localhost:3000 

プロジェクトを表示するには

おめでとう！あなたのアプリケーションをDockerized正常に！

Dockerfileの訪問内容

さあ、コードの内容を見てみましょうDockerfile .
覚えておきましょう.top-down アプローチ.
トップダウンアプローチで3つの異なる段階でコードを実行できます.

依存関係のインストール

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

アプリケーションのランタイム環境の構成

依存性のインストール

FROM node:lts as dependencies
WORKDIR /<your-app-name>
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

このコードで何が起こっているかについて話しましょう.
まず最初に、我々は我々が最新のものを使用しているものから我々が何をビルドしたいかを定義したいですnode バージョンnode:lts
ノードの特定のバージョンを使用することができます.例えば、FROM node:16 ノードバージョン16でイメージをビルドします.私たちはas dependencies ので、我々はこのコードをエクスポートすることができますし、後で私たちのアプリケーションを構築するときに再利用するdocker .
次に、アプリケーションコードを保持するアプリケーションディレクトリを作成しますWORKDIR .
第三に、私たちはpackage.json and yarn.lock キャッシュされたDocker層を利用できるファイルです.Dockerキャッシュの良い説明はhere .
最後に、我々は我々の実行することができますyarn install これらの依存関係をインストールするには私たちは--frozen-lockfile 何故ならyarn.lock or package-lock.json 実行時に更新を取得するyarn install ( or npm install ). これらの変更をチェックしたくない.
あなたが使っているならばnpm 使えますnpm ci ( CIは、クリーンインストール/使用のためにそれを使用しますRUN npm install )
For yarn ITS--frozen-lockfile

2 .次のビルド。アプリケーション

FROM node:lts as builder
WORKDIR /<your-app-name>
COPY --from=dependencies /<your-app-name>/node_modules ./node_modules
RUN yarn build

その建物を見ましょう.
ここでは、我々のアプリケーションのnodeoundモジュールからの依存関係をコピーを構築します.
あなたが使っているならばnpm その後使用RUN npm build .

FROM node:lts as runner
WORKDIR /<your-app-name>
ENV NODE_ENV production

我々のプロジェクトを構築した後、我々はそれを実行することができます.

アプリケーションのランタイム環境の構成

COPY --from=builder /<your-app-name>/public ./public
COPY --from=builder /<your-app-name>/package.json ./package.json
COPY --from=builder /<your-app-name>/.next ./.next
COPY --from=builder /<your-app-name>/node_modules ./node_modules

EXPOSE 3000
CMD ["yarn", "start"]

ここでは、我々は我々が使用している理由である私たちのDocker画像の中にアプリのソースコードをバンドルすることができますCOPY .
最後に、我々のアプリケーションを実行するコマンドを定義したいCMD これはランタイムを定義します.
我々のランタイムのためにyarn コマンド.
あなたがいるならばDocker インストールされたアプリケーションでは、ダッシュボードにコンテナーを表示することができます.


あなたはそれをやった!
読書ありがとう.何か質問があれば、Twitterで私のやり方を送ってください