Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易にすることができます。開発者にとっても、開発、テスト、展開がより便利になります。 DevOps の概念は、最近非常に重要視されています。私は「DevOps」という 5 つの大きな単語をコンピューターのデスクトップに置き、一日中それを研究しました。突然、DevOps とはアプリケーションを実行するための Dockerfile を書くことを意味するのだということに気付きました (冗談です)。 ここでは、Docker を使用してフロントエンド アプリケーションをデプロイする方法を紹介します。千里の道も一歩から。一歩とは、まず動き出すことです。 まずは実行してみましょう まず、一般的なフロントエンド アプリケーションのデプロイメント プロセスを簡単に紹介します。
デプロイメントプロセスを導入したら、Dockerfileを書くだけです ノード:alpineから # 本番環境を表す ENV PROJECT_ENV production WORKDIR /コード ./コードを追加 npm install && npm run build && npm install -g http-server を実行します。 エクスポーズ80 コマンド http-server ./public -p 80 これでフロントエンドサービスが実行中です。その後、展開の他の段階を完了できます。一般的には、以下のようなことが運用・保守の作業になりますが、常に知識の境界を広げておくことは良いことです。
現時点ではイメージに 2 つの問題があり、各展開に時間がかかりすぎて、製品の迅速な提供につながりません。
依存関係と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 デプロイメントのプロセスを検討してください。
当然のことながら、画像サイズが大きいと、伝送効率が低下し、各展開の遅延が増加します。 ビルド サーバーと本番サーバーが同じノード上にある場合でも、遅延の問題は発生しません。画像のサイズを小さくするとディスク容量も節約できる 画像のサイズが大きすぎる原因の大部分は、node_modules の悪名高いサイズによるものです。 しかし、最終的に必要なのは public フォルダー以下のコンテンツだけです。ソース ファイルと node_modules 下のファイルはスペースを占有しすぎて不要であり、無駄が生じます。 公式ドキュメントを参照してください 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つの部分に分類できます。
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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...
<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...
突然、ドキュメントの保存と共同作業のためのプライベート サービスを構築する必要がありました。多くの場...
1. データベースの文字セットを確認するデータベースの文字セットは、Linux で設定された環境変数...
Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...
1. 記事タイトルリストの右側に日付を表示する方法:コードをコピーコードは次のとおりです。 &l...
目次最初の方法: MySQLデータベースが接続されていない場合2 番目の方法: データベースがすでに...
コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...
1. トップレベルの使用法1. cnpmをインストールする npm i -g cnpm --regi...
質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...
序文ロックは、複数のスレッドを実行するときにリソースへのアクセスを強制的に制限するために使用される同...
導入圧縮トランスポート プロトコル、圧縮列ソリューション、圧縮テーブル ソリューションなど、MySQ...
CSS スタイル:コードをコピーコードは次のとおりです。 <スタイル タイプ="te...
目次序文APPメソッドにジャンプURLスキームメタタグユニバーサルリンクさまざまな使い方URLスキー...
Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...