ホームページ > 記事 > ウェブフロントエンド > Angular をコンパイルしてパッケージ化する方法について簡単に説明します。 Dockerを使用して公開するにはどうすればよいですか?
この記事では、Angular のコンパイル、パッケージ化、Docker パブリッシュの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
#環境:Angular CLI: 11.0.6
- Angular: 11.0.7
- ノード: 12.18.3
- npm : 6.14.6
- IDE: Visual Studio コード
angular チュートリアル"]
2.1. 基本的なパッケージ化コマンド
Angular CLI に基づいて生成された Angular プロジェクトには、デフォルトで 2 つの環境設定ファイルがあります。└──myProject/src/environments/ └──environment.ts └──environment.prod.ts
production: falseという文があることがわかります。なぜなら、Angularは本番環境ではコンパイル時の効率などを考慮する必要があるのに対し、開発環境では開発者がデバッグする際の利便性を考慮する必要があり、焦点が異なります。
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
3. Angular サイトの公開、
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 が見つかりません。
パッケージ化後、生成されるファイルは純粋な静的ファイル (html、css、js、写真、など)、パッケージ化された問題は、iis、nginx、apache tomcat などの Web サーバーのディレクトリ、または、node.js、java などの静的ファイルを表示できるプログラムに直接コピーできます。
3.2. docker を使用して公開するdocker にデプロイした場合は、基本的な nginx docker をベースにし、コンパイルされたangular プロジェクトを作成し、それを docker の nginx ディレクトリにコピーします。
基本手順: Dockerfile ファイルを準備します。Docker は、/usr/share/nginx/html
FROM nginx:alpine COPY . /usr/share/nginx/html
.Docker をコンパイルします。 Dockerfile ディレクトリで、3 つのコマンドは現在のパスを表し、
/usr/share/nginx/htmlは docker のターゲット ディレクトリです
docker build -t your-docker-name . docker save your-docker-name > your-docker-name.tar gzip your-docker-name.tar:
docker load < your-docker-name.tar を実行して、docker イメージをターゲット マシンにロードするだけです。
以上がAngular をコンパイルしてパッケージ化する方法について簡単に説明します。 Dockerを使用して公開するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。