このブログ投稿では、Docker について詳しく説明し、シンプルな Nginx アプリケーションを使用してマルチステージ Docker ビルドを作成する手順を説明します。 Docker を使い始めたばかりの場合でも、心配しないでください。すべてを段階的に説明していきますので、フォローしていただけます。

Dockerfile

これが作業する Dockerfile です:

FROM node:18-alpine AS installer

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest AS deployer

COPY --from=installer /app/build /usr/share/nginx/html

Dockerfileの解凍

それでは、この Dockerfile で何が起こっているのかを段階的に見ていきましょう:

1. FROM ノード:18-alpine AS インストーラー

この行は、Docker Hub から公式の Node.js イメージ (Alpine Linux のバージョン 18) をプルします。 Docker Hub はイメージのライブラリと考えてください。この行を使用して、ビルドの最初の段階のベース イメージとして Node.js を使用することを指定します。

2. WORKDIR /app

このコマンドは、コンテナ内の作業ディレクトリを /app に設定します。これは、デスクトップ上でファイルを整理するのと同じように、コンテナ内にアプリケーション専用のフォルダーを作成すると考えることができます。

3. パッケージ*.json ./をコピーします

ここでは、package.json ファイルと package-lock.json ファイルをローカル ディレクトリからコンテナーの作業ディレクトリにコピーします。これらのファイルには、アプリケーションに必要な依存関係に関する情報が含まれています。

4. npm installを実行

このコマンドは npm install を実行し、package.json で指定されたすべての依存関係をインストールします。

5. コピー 。 .

この行は、残りのアプリケーション ファイルをコンテナーにコピーします。これにより、ローカル ディレクトリのすべてがコンテナ内の /app ディレクトリに取り込まれます。

6. npm run buildを実行します

ここで、コマンド npm run build を使用してアプリケーションをコンパイルします。通常、このステップではコード (この場合は React が多い) を静的バンドルに変換し、ユーザーに提供できるようにします。このコマンドの出力は、/app.

7. nginx から:最新の AS デプロイヤー

この行では、新しいベースイメージ Nginx に切り替えます。 Nginx は、先ほど構築したような静的ファイルを提供できる強力な Web サーバーです。これは、複数段階のビルド プロセスの第 2 段階の始まりです。

8. COPY --from=installer /app/build /usr/share/nginx/html

ここでは、前の段階 (インストーラー) からビルドされたアプリケーション ファイルを Nginx 提供ディレクトリにコピーします。 --from=installer フラグは、定義したばかりのインストーラー ステージからファイルを取得するように Docker に指示します。

Dockerコンテナの実行

Dockerfile がセットアップされたら、次のコマンドを使用して Docker コンテナを構築して実行できます。

docker build -t your-app-name .
docker run -dp 3000:80 your-app-name

your-app-name を選択した名前に置き換えてください。 -dp フラグはコンテナを切り離し、ホスト マシンのポート 3000 をコンテナのポート 80 にマップし、http://localhost:3000 にあるアプリにアクセスできるようにします。

結論

そして、これで完成です！ Nginx を使用してアプリケーションを開発から本番環境に移行するマルチステージ Docker ビルドを作成しました。このプロセスについてご質問やご意見がございましたら、お気軽に以下にコメントを残してください。

注意事項: 注意すべきこと

この設定で作業するときによくある問題の 1 つは、正しいポート番号をマッピングするのを忘れることです。 Nginx は通常、コンテナ内のポート 80 でリッスンしますが、ローカル マシン上のアプリにアクセスしようとしている場合は、コンテナからマシンに正しいポートを転送する必要があります。たとえば、localhost:3000 上のアプリにアクセスしたい場合は、フラグ -p 3000:80 を指定してコンテナーを実行し、マシン上のポート 3000 をコンテナー内のポート 80 にマップする必要があります。

このステップを怠ると、すべてが完璧に構築されているのに、なぜブラウザでアプリにアクセスできないのか不思議に思うことになります。

タグとメンション

@piyushsachdeva
3 日目のビデオ