Docker を使用してフロントエンド アプリケーションをデプロイする方法

Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易にすることができます。開発者にとっても、開発、テスト、展開がより便利になります。
最も重要なことは、なじみのないプロジェクトに直面したときに、ドキュメントを読まなくても Dockerfile に従ってすぐにローカルで実行できることです (ドキュメントは完全ではない可能性があり、正確ではない可能性があります)。

DevOps の概念は、最近非常に重要視されています。私は「DevOps」という 5 つの大きな単語をコンピューターのデスクトップに置き、一日中それを研究しました。突然、DevOps とはアプリケーションを実行するための Dockerfile を書くことを意味するのだということに気付きました (冗談です)。

ここでは、Docker を使用してフロントエンド アプリケーションをデプロイする方法を紹介します。千里の道も一歩から。一歩とは、まず動き出すことです。

まずは実行してみましょう

まず、一般的なフロントエンド アプリケーションのデプロイメント プロセスを簡単に紹介します。

1. npm install、依存関係をインストール
2. npm はビルド、コンパイル、パッケージ化、静的リソースの生成を実行します。
3. 静的リソースを提供する

デプロイメントプロセスを導入したら、Dockerfileを書くだけです

ノード:alpineから

# 本番環境を表す ENV PROJECT_ENV production
WORKDIR /コード
./コードを追加
npm install && npm run build && npm install -g http-server を実行します。
エクスポーズ80

コマンド http-server ./public -p 80

これでフロントエンドサービスが実行中です。その後、展開の他の段階を完了できます。一般的には、以下のようなことが運用・保守の作業になりますが、常に知識の境界を広げておくことは良いことです。

• リバースプロキシとしてnginxまたはtraefikを使用する
• オーケストレーションには Kubernetes または Compose を使用します。
• CI/CDにはgitlab ciまたはdrone ciを使用する

現時点ではイメージに 2 つの問題があり、各展開に時間がかかりすぎて、製品の迅速な提供につながりません。

• イメージの構築に時間がかかりすぎる
• ビルドされたイメージのサイズが大きすぎます。1G以上

依存関係とdevDependenciesから始める

Lu Xiaofeng 氏はかつて、フロントエンド プログラマーが 1 日 8 時間働くと、少なくとも 2 時間は無駄になると述べました。 npm install に 1 時間、npm run build にさらに 1 時間かかります。

デプロイメントごとに、無駄なパッケージのダウンロードを減らすことができれば、イメージ構築にかかる時間を大幅に節約できます。 eslint、mocha、chai などのコード スタイル テスト モジュールを devDependencies に配置できます。 npm install --production を使用して、本番環境にパッケージをインストールします。

両者の違いについては、ドキュメント https://docs.npmjs.com/files/package.json.html#dependencies を参照してください。

ノード:alpineから

ENV PROJECT_ENV プロダクション
WORKDIR /コード
./コードを追加
npm install --production && npm run build && npm install -g http-server を実行します。
エクスポーズ80

コマンド http-server ./public -p 80

少し速くなったようです。

package.json はプロジェクトのソース ファイルと比較して比較的安定していることに気付きました。ダウンロードする新しいインストール パッケージがない場合は、イメージを再度ビルドするときにパッケージを再インストールする必要はありません。 npm インストールにかかる時間を半分に節約できます。

画像キャッシュを活用する

ADD の場合、追加するコンテンツが変更されていない場合は、キャッシュを使用できます。 package.json をソース ファイルから分離してイメージに書き込むことをお勧めします。現在、新しいインストールパッケージの更新がない場合は、時間を半分に節約できます

ノード:alpineから

ENV PROJECT_ENV プロダクション

# http-server は変更されていない場合はキャッシュも使用できます。 RUN npm install -g http-server

WORKDIR /コード

package.json /code を追加します
npm install --production を実行します。

./コードを追加
実行 npm run build
エクスポーズ80

コマンド http-server ./public -p 80

キャッシュの使用に関する詳細は、RUN git clone <repo>のキャッシュなど、特別な注意が必要です。

公式ドキュメントを参照してください https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#leverage-build-cache

多段階ビルド

キャッシュのおかげで、イメージのビルド時間が大幅に短縮されました。ただし、イメージのサイズがまだ大きすぎるため、各デプロイメントの時間が長くなります。各 CI デプロイメントのプロセスを検討してください。

1. ビルドサーバーでイメージをビルドする
2. イメージをイメージリポジトリサーバーにプッシュし、
3. 本番サーバーにイメージをプルし、コンテナを起動します。

当然のことながら、画像サイズが大きいと、伝送効率が低下し、各展開の遅延が増加します。

ビルド サーバーと本番サーバーが同じノード上にある場合でも、遅延の問題は発生しません。画像のサイズを小さくするとディスク容量も節約できる

画像のサイズが大きすぎる原因の大部分は、node_modules の悪名高いサイズによるものです。

しかし、最終的に必要なのは public フォルダー以下のコンテンツだけです。ソース ファイルと node_modules 下のファイルはスペースを占有しすぎて不要であり、無駄が生じます。
この時点で、Dockerのマルチステージビルドを使用して、コンパイルされたファイルのみを抽出できます。

公式ドキュメントを参照してください https://docs.docker.com/develop/develop-images/multistage-build/

node:alpine からビルダーとして

ENV PROJECT_ENV プロダクション

# http-server は変更されず、キャッシュも使用できます WORKDIR /code

package.json /code を追加します
npm install --production を実行します。

./コードを追加
実行 npm run build

# nginx:alpineから小さいベースイメージを選択
コピー --from=builder /code/public /usr/share/nginx/html

この時点で、画像サイズは1G以上から50M以上に増加しました。

CDNを使用する

50M以上のイメージサイズを分析すると、nginx:alpineイメージは16Mで、残りの40Mは静的リソースです。

静的リソースを CDN にアップロードする場合は、イメージ内に配置する必要がありません。この場合、イメージサイズは 20M 以下に抑えられます。

静的リソースに関しては、2つの部分に分類できます。

• /static などのファイルはプロジェクトのルートパスを直接参照し、パッケージ化中に /public にコピーされ、イメージに含める必要があります。
• /build では、このようなファイルは必須であり、webpack によってパッケージ化され、ハッシュ値が追加され、リソース アドレスは publicPath を通じて変更できます。このようなファイルは CDN にアップロードでき、ミラーリングする必要なく永続的にキャッシュできます。

node:alpine からビルダーとして

ENV PROJECT_ENV プロダクション

# http-server は変更されず、キャッシュも使用できます WORKDIR /code

package.json /code を追加します
npm install --production を実行します。

./コードを追加
# npm run uploadCdn は、静的リソースを CDN にアップロードするスクリプト ファイルです。RUN npm run build && npm run uploadCdn


# nginx:alpineから小さいベースイメージを選択
コピー --from=builder code/public/index.html code/public/favicon.ico /usr/share/nginx/html/
コピー --from=builder code/public/static /usr/share/nginx/html/static

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。