Angular をコンパイルしてパッケージ化する方法について簡単に説明します。 Dockerを使用して公開するにはどうすればよいですか?

この記事では、Angular のコンパイル、パッケージ化、Docker パブリッシュの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#環境:

Angular CLI: 11.0.6
• Angular: 11.0.7
• ノード: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio コード

1.概要

angular の開発が完了したら、それをサーバーにデプロイするにはどうすればよいでしょうか? [推奨関連チュートリアル: "

angular チュートリアル"]

2. コンパイルとパッケージ

2.1. 基本的なパッケージ化コマンド

Angular CLI に基づいて生成された Angular プロジェクトには、デフォルトで 2 つの環境設定ファイルがあります。

└──myProject/src/environments/
               └──environment.ts
               └──environment.prod.ts

• environment.ts: 開発に使用される環境環境ファイル

• environment.prod.ts: 運用環境用にコンパイルする場合、元のenvironment.tsは置き換えられてパッケージ化されます。 (ルート ディレクトリの angular.json はこのデフォルトの動作を定義しており、必要に応じて変更できます)

AngularCLI が 2 つのファイルを生成した後、開いて 2 つのファイルの違いを比較すると、開発環境で使用するenvironment.tsファイルに、

production: falseという文があることがわかります。なぜなら、Angularは本番環境ではコンパイル時の効率などを考慮する必要があるのに対し、開発環境では開発者がデバッグする際の利便性を考慮する必要があり、焦点が異なります。

それでは、実稼働環境用にコンパイルするにはどうすればよいでしょうか? Angular CLI は、コマンド

ng build --prod

も提供します。このコマンドでは、パラメータ

--prod がコンパイル環境に運用環境パッケージにコンパイルするように指示します。同様に、デフォルトのコンパイル パラメーターは angular.json で定義されており、必要に応じて変更できます。主な設定パラメータは次のとおりです

"configurations": {
    "production": {
        "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": false,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": false,
        "budgets": [
        {
            "type": "initial",
            "maximumWarning": "5mb",
            "maximumError": "10mb"
        }
        ]
    }
}

Angular は、デフォルトでルート ディレクトリの下の

dist ディレクトリにパッケージ化されます。生成されるファイルは純粋な静的ファイル (html、css、js) と画像ですファイル。

2.2. パッケージ化してセカンダリ ディレクトリにデプロイする

Angular Web サイトをルート ディレクトリに直接デプロイできない状況は数多くあります。 Web サイトの 2 番目のディレクトリに展開する必要があります。たとえば、http://abc.com にはデプロイできず、セカンダリ ディレクトリ http://abc.com/demo にデプロイする必要があります。この状況に対応して、コンパイル パラメータを次のように変更する必要があります:

ng build --prod --deploy-url /demo/ --base-href /demo/

Add

--deploy-url と --base-href。

使用シナリオ: たとえば、複数のサイトがあり、同じリバース プロキシ、

http://site1、http://site2## を使用したいと考えています。 # 、それぞれ http://abc.com/site1、http://abc.com/site2/ にマッピングされます。次に、構成を容易にするために、site1 と site2 を http://site1/site1、http://site2/site2 などのセカンダリ ディレクトリに展開する必要があります。 http://site1/site1 は http://abc.com/site1 へのプロキシ、http://site2/site2 は # へのプロキシです## http://abc.com/site2/ なので、ディレクトリ レベルの問題により css と js が見つかりません。

3. Angular サイトの公開

Angular サイトをコンパイルしてパッケージ化した後、既存の Web サーバーに簡単に公開したり、 docker イメージを作成して解放します。

3.1. Web サーバーの公開

パッケージ化後、生成されるファイルは純粋な静的ファイル (html、css、js、写真、など)、パッケージ化された問題は、iis、nginx、apache tomcat などの Web サーバーのディレクトリ、または、node.js、java などの静的ファイルを表示できるプログラムに直接コピーできます。

3.2. docker を使用して公開する

docker にデプロイした場合は、基本的な nginx docker をベースにし、コンパイルされたangular プロジェクトを作成し、それを docker の nginx ディレクトリにコピーします。

基本手順:

Dockerfile ファイルを準備します。Docker は、

nginx:alpine
• デフォルト ディレクトリに基づいて、コンパイルされた Angular サイト ファイルを Docker の nginx にコピーできます。

  /usr/share/nginx/html

  FROM nginx:alpine
  COPY . /usr/share/nginx/html

手順: 1) Angular パッケージ化ファイルが Dockerfile ファイルと同じディレクトリにあると仮定します

2) COPY ./usr/share/nginx/html、2 つのパラメータ

.

は現在のパスを表し、
/usr/share/nginx/html は docker のターゲット ディレクトリです

Docker をコンパイルします。 Dockerfile ディレクトリで、3 つのコマンド

• docker build -t your-docker-name .
  docker save your-docker-name > your-docker-name.tar
  gzip your-docker-name.tar

  :
を実行します。
• Docker イメージを生成します。名前 (名前) は your-docker-name です。
• Docker イメージをローカル ファイルとしてエクスポートします。ファイル名は your-docker-name.tar です。
Docker イメージの圧縮
ご覧のとおり、angular は純粋な静的ファイルにコンパイルされるため、docker を使用した公開は非常に簡単です。デプロイするときは、docker ファイルをターゲット マシンにコピーして解凍し、

docker load < your-docker-name.tar を実行して、docker イメージをターゲット マシンにロードするだけです。

#4. 概要
## 運用環境用にコンパイルするには、パラメータを必ず追加してください
--prod

• セカンダリ ディレクトリにデプロイする場合は、コンパイル時にパラメータを追加します。 /demo セカンダリ ディレクトリにデプロイされている場合は、パラメータを追加します:
--deploy-url /demo/ --base-href /demo/

• docker を使用して公開します、基本的な nginx docker を選択し、コンパイルされた angular ファイルを nginx ディレクトリにコピーできます。

• プログラミング関連の知識について詳しくは、
プログラミング ビデオ
をご覧ください。 ！

以上がAngular をコンパイルしてパッケージ化する方法について簡単に説明します。 Dockerを使用して公開するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。