Docker イメージの削減: 1.43G から 22.4MB へ

[[420174]]

画像はBaotu.comより

以下は、ReactJS プログラムの簡単なオンライン スリム化体験です。画像スリム化の方向性とインスピレーションを見つけるのに役立つことを願っています。

Web 開発関連の作業を行っている場合は、コンテナ化の概念やその強力な機能などをすでにご存知かもしれません。

しかし、Docker を使用する場合、イメージ サイズは重要です。 create-react-app (https://reactjs.org/docs/create-a-new-react-app.html) から取得する定型プロジェクトは、通常 1.43 GB を超えます。

今日は、ReactJS アプリケーションをコンテナ化し、画像サイズを縮小してパフォーマンスを向上させる方法についていくつかのヒントを学びます。

ここでは ReactJS を例として使用しますが、これはあらゆるタイプの NodeJS アプリケーションに適用できます。

ステップ1: プロジェクトを作成する

①scaffoldingを利用してコマンドラインモードを使用してReactプロジェクトを作成します。

 npx作成-react-app docker-image-test

②コマンドが正常に実行されると、基本的なReactアプリケーションアーキテクチャが生成されます。

③プロジェクトディレクトリに入り、依存関係をインストールしてプロジェクトを実行します。

 cd docker-image-test
糸のインストール
糸の始まり

④http://localhost:3000にアクセスすると起動したアプリケーションにアクセスできます。

ステップ2: 最初のイメージを作成する

①プロジェクトのルートディレクトリにDockerfileというファイルを作成し、次のコードを貼り付けます。

ノード:12から
 
ワークディレクトリ /app 
 
 package.json をコピーします。/ 
 
糸のインストールを実行する
 
コピー 。 。 
 
エクスポーズ3000 
 
 CMD [ "yarn" 、 "start" ]

② ここでは、Docker リポジトリからベースイメージ Node:12 を取得し、依存関係をインストールして基本コマンドを実行することに注意してください。 （ここではDockerコマンドの詳細については説明しません）

③ターミナルからコンテナのイメージをビルドできるようになりました。

ビルド -t docker-image-test を実行します。

④Dockerがイメージのビルドを完了したら、次のコマンドを使用してビルドされたイメージを表示できます。

 Docker イメージ

クエリ結果リストの上部には新しく作成された画像が表示され、右端には画像のサイズが表示されます。現在は1.43GBです。

⑤以下のコマンドでイメージを実行します。

 docker run --rm -it -p 3000:3000/tcp docker-image-test:latest  

ブラウザを開いてページを更新し、動作することを確認します。

ステップ3: ベースイメージを変更する

① 前回の構成では、node:12をベースイメージとして使用しました。しかし、従来の Node イメージは Ubuntu をベースにしており、これは私たちのシンプルな React アプリケーションには必要ありません。

② DockerHub（公式Dockerイメージレジストリ）から、alpineベースのNodeイメージはUbuntuベースのイメージよりもはるかに小さく、依存関係が非常に低いことがわかります。

③これらの基本画像のサイズ比較は以下の通りです。

ここで、node:12-alpine をベースイメージとして使用し、何が起こるかを確認します。

ノード:12-alpineから
 
ワークディレクトリ /app 
 
 package.json をコピーします。/ 
 
糸のインストールを実行する
 
コピー 。 。 
 
エクスポーズ3000 
 
 CMD [ "yarn" 、 "start" ]

次に、これを基にイメージを構築し、以前のイメージと比較します。

おお！画像サイズはわずか 580 MB に縮小され、大きな改善が見られました。しかし、もっと良くなる可能性はあるでしょうか?

ステップ4: 多段階構築

① 先ほどの設定では、すべてのソースコードも作業ディレクトリにコピーします。

② しかし、公開と実行の観点からは、適切な実行ディレクトリを構築するだけでよいため、これは必要ありません。したがって、ここでは、最終イメージ内の不要なコードと依存関係を削減するためのマルチステージ ビルドの概念を紹介します。

③構成は以下のとおりです。

 # ステージ1 
 
ノード:12-alpine ASビルドから
 
ワークディレクトリ /app 
 
 package.json をコピーします。/ 
 
糸のインストールを実行する
 
コピー ./app 
 
 RUNヤーンビルド
 
 
 # ステージ2 
 
ノード:12-alpineから
 
ワークディレクトリ /app 
 
 npm install -g webserver.localを実行します。   
 
コピー--from=build /app/build ./build   
 
エクスポーズ3000 
 
 CMD ウェブサーバー。ローカル-d ./build

④最初の段階では、依存関係をインストールし、プロジェクトをビルドします。

⑤第2段階では、前の段階からビルド製品ディレクトリをコピーし、それを使用してアプリケーションを実行します。

⑥ この方法により、最終イメージに不要な依存関係やコードが含まれなくなります。

次に、イメージが正常にビルドされたら、リストからイメージを表示します。

現在、画像サイズはわずか 97.5 MB です。これは本当に素晴らしいです。

ステップ5: Nginxを使用する

①ReactJS アプリケーションの静的アセットを実行するために Node サーバーを使用していますが、これは静的アセットを実行するための最適な選択ではありません。

② リソースアプリケーションを実行するために、Nginx などのより効率的で軽量なサーバーを使用するようにしています。これにより、パフォーマンスを可能な限り向上させ、イメージの量を削減することもできます。

③最終的な Docker 構成ファイルは次のようになります。

 # ステージ1 
 
ノード:12-alpine ASビルドから
 
ワークディレクトリ /app 
 
 package.json をコピーします。/ 
 
糸のインストールを実行する
 
コピー ./app 
 
 RUNヤーンビルド
 
 # ステージ2 
 
 nginx:stable-alpineから
 
コピー--from=build /app/build /usr/share/nginx/html   
 
エクスポーズ80 
 
 CMD [ "nginx" 、 "-g" 、 "デーモンオフ;" ]

④Docker構成の第2段階を変更して、Nginxを使用してアプリケーションを提供します。

⑤次に、現在の構成を使用してイメージをビルドします。

⑥画像サイズはわずか22.4MBに縮小！

⑦同時に、優れたアプリケーションを提供するために、よりパフォーマンスの高いサーバーを使用しています。

⑧以下のコマンドを使用して、アプリケーションがまだ動作していることを確認できます。

 docker run --rm -it -p 3000:80/tcp docker-image-test:latest  

⑨ デフォルトではコンテナ内のポート 80 で Nginx が利用可能になるため、コンテナのポート 80 を外部に公開することに注意してください。

これらは、画像サイズを大幅に削減するために、あらゆる NodeJS プロジェクトに適用できる簡単なヒントです。

これで、コンテナはよりポータブルかつ効率的になりました。今日はこれで終わりです。楽しいコーディングを！

著者：張亜龍訳

編集者：タオ・ジアロン

出典: 公開アカウント Distributed Laboratory (ID: dockerone) から転載

出典: https://javascript.plainenglish.io/how-i-reduced-docker-image-size-from-1-43-gb-to-22-4-mb-84058d70574b