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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Docker-compose を使用して Django アプリケーションをオフラインでデプロイする方法
  • Docker+Nginx を使ってシングルページアプリケーションをデプロイする
  • Docker で Tomcat を使用して Web アプリケーションを迅速にデプロイする方法の例
  • Docker で Django アプリケーションをデプロイする例
  • Docker Cloudにアプリケーションをデプロイする方法の詳細な説明
  • Docker を使用して Spring Boot アプリケーションをデプロイする例
  • Go をセットアップして Docker でアプリケーションをデプロイする方法の詳細な説明
  • Docker 実践 - Nodejs アプリケーションのデプロイ

<<:  mysql 5.7.19 最新バイナリインストール

>>:  Vue ユニットテストに関する予備調査

推薦する

MySQL ルートパスワードを変更する複数の方法 (推奨)

方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...

インターフェース設計の10の一般的なルール

<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...

Dockerはnextcloudを使用してプライベートBaiduクラウドディスクを構築します

突然、ドキュメントの保存と共同作業のためのプライベート サービスを構築する必要がありました。多くの場...

Linux で Oracle データベースをバックアップするためのスケジュールされたタスクの設定に関するチュートリアル

1. データベースの文字セットを確認するデータベースの文字セットは、Linux で設定された環境変数...

Filebeat を使用して Nginx ログを収集する方法

Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...

フロントエンド開発における一般的なテクニックのまとめ

1. 記事タイトルリストの右側に日付を表​​示する方法:コードをコピーコードは次のとおりです。 &l...

MySQLコマンドラインでSQLファイルを実行するいくつかの方法

目次最初の方法: MySQLデータベースが接続されていない場合2 番目の方法: データベースがすでに...

MySQLデータベースが大きすぎる場合にバックアップと復元を行う方法

コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...

npm 淘宝ミラー変更説明

1. トップレベルの使用法1. cnpmをインストールする npm i -g cnpm --regi...

Dockerカスタムブリッジdocker0とdockerのコマンド操作の開始、終了、再起動

質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...

MySQL の行レベルロックの詳細な例

序文ロックは、複数のスレッドを実行するときにリソースへのアクセスを強制的に制限するために使用される同...

MySQL 圧縮の使用シナリオとソリューション

導入圧縮トランスポート プロトコル、圧縮列ソリューション、圧縮テーブル ソリューションなど、MySQ...

ブラウザ内でHTMLタグを中央に配置するCSSスタイル

CSS スタイル:コードをコピーコードは次のとおりです。 <スタイル タイプ="te...

H5ウェイクアップアプリの実装方法と注意点のまとめ

目次序文APPメソッドにジャンプURLスキームメタタグユニバーサルリンクさまざまな使い方URLスキー...

Alibaba Cloud ホストが IP を使用して Web サイトにアクセスできない問題の解決策 (セキュリティ グループ ルールを構成することで解決)

Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...