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 ユニットテストに関する予備調査

推薦する

Linux yum コマンドを使用して mysql8.0 をインストールする方法の詳細なチュートリアル

1. 設置前によく掃除する rpm -pa | grep mysql または rpm -qa | g...

数十億のデータに対するMySQLページングの最適化に関する簡単な説明

目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...

HTML の空リンク href="#" と href="javascript:void(0)" の違い

# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...

Vueでブラウザタイトルを動的に設定する方法の詳細な説明

目次ナンセンス文章最初ルーター/index.js 2番目1. プラグインをインストールする2.mai...

Vueのwatch、computed、methodsの違いのまとめ

目次1 はじめに2 基本的な使い方2.1 方法2.2 計算プロパティ2.3 リスナーを見る3 3つの...

JavaScriptの知識ポイントの詳しい説明

目次1. JavaScriptの基礎2. 基本的なJavaScript構文3. JavaScript...

K3s 入門ガイド - Docker で K3s を実行するための詳細なチュートリアル

k3dとは何ですか? k3d は、Docker で K3s クラスターを実行するための小さなプログ...

Docker プライベートリポジトリの管理とローカルリポジトリ内のイメージの削除

1: Dockerプライベートウェアハウスのインストール1. イメージリポジトリからイメージをダウン...

ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...

JSの矢印関数におけるこのポイントの詳細な説明

矢印関数は ES6 の新機能です。独自の this はありません。その this ポイントは外部のコ...

Saltstack に Zabbix サービスをデプロイする方法を説明します

目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...

忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します

MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...

MySQLの起動と接続方法の例分析

目次mysqldの起動方法方法 1: mysqld方法 2: mysqld_safe方法3: mys...

HTML 5 プレビュー

<br />オリジナル: http://www.alistapart.com/artic...