Dockerを使用してAngularプロジェクトをデプロイする方法

Dockerを使用してAngularプロジェクトをデプロイする方法

Docker を使用して Angular プロジェクトをデプロイする方法は 2 つあります。1 つは、公式ドキュメントに記載されているサーバー側レンダリングです。もう 1 つは、ノード イメージをコンパイルして Web サーバーに配置する方法です。ノード環境なので、Express を使用するのが最も便利です。

server.jsを作成する

定数 express = require('express');

express() は、定数です。
定数設定 = {
  ルート: __dirname + '/dist',
  ポート: process.env.PORT || 4200
};

//静的リソース app.use('/', express.static(config.root));

//すべてのルートはindex.htmlに移動します
app.all('*', 関数(req, res) {
  res.sendfile(config.root + '/index.html');
});
app.listen(config.port, () => {
  console.log("実行中……");
})

Dockerfileを作成する

ノード:13.3.0-alpine3.10 から

環境変数ポート=4200\
  NODE_ENV=本番

# expressとangular/cliをインストールします
npm install [email protected] -g \ を実行します。
  && npm インストール -g @angular/cli
# アプリディレクトリを作成する RUN mkdir -p /app
# コードをAppディレクトリにコピーします。COPY ./app
ワークディレクトリ /app

# 依存関係をインストールしてプログラムをビルドします。サブディレクトリにリバースプロキシする必要があるため、base-hrefパラメータを追加します。RUN npm install && ng build --base-href /manage/ --prod

${PORT} を公開する

エントリポイント ["node", "/app/server.js"]

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Docker で Tomcat および Java アプリケーションをデプロイする詳細な手順
  • Docker を使用して Web プロジェクトをデプロイし、イメージ ファイルにパッケージ化する方法の詳細な説明
  • Docker に Node.js アプリケーションを素早くデプロイするための詳細な手順
  • Docker に Python の Flask フレームワークをデプロイするチュートリアル
  • Docker 学習ノート k8s デプロイ方法
  • Docker で MySQL サービスをデプロイする方法と、遭遇する落とし穴
  • tomcatのDocker自動デプロイの詳しい説明
  • Go をセットアップして Docker でアプリケーションをデプロイする方法の詳細な説明
  • Dockerを使用してNextCloudネットワークディスクを展開する方法
  • Docker ベースの Zabbix のインストールと展開

<<:  Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する

>>:  WeChatアプレットwebViewにH5を埋め込む方法の例

推薦する

JavaScript関数の詳細な紹介

任意の数のステートメントを関数を通じてカプセル化することができ、いつでもどこでも呼び出して実行できま...

Vueのコンポーネントの詳細な説明

目次1. コンポーネントの登録2. コンポーネントの使用3. 父から息子へ4. 息子から父へ5. ス...

Vue フロントエンドの Excel ファイルのエクスポートの詳細な実装計画

目次1. 技術の選択2. 技術的な実装vue-json-excelプラグインを使用して実装1. vu...

CSS3 は本当に SCSS に取って代わるのでしょうか?

Web ページのスタイル設定に関しては、プロジェクトで純粋な CSS または SCSS (および他...

IDEA が Docker を統合してリモート展開を実現するための詳細な手順

1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...

JavaScript マウスイベントのケーススタディ

マウスイベントマウスが特定の操作を実行すると、イベント オブジェクトが生成され、イベントがトリガーさ...

line-height=height要素の高さだがテキストが垂直方向に中央揃えされない問題を解決する

まず、行の高さが要素の高さと等しい場合にテキストが垂直方向に中央揃えにならない理由を説明します。実際...

VUEはトークンログイン認証を実装

この記事では、トークンログイン認証を実装するためのVUEの具体的なコードを例として紹介します。具体的...

CentOS7 に MySQL データベースをインストールしてデバッグする詳細な手順 [例]

この例では、デバッグ用の MySQL データベースをダウンロードしてインストールする必要があります。...

Docker を使用した war パッケージ プロジェクトのデプロイの実装

Docker で war をデプロイするには、コンテナを使用する必要があります。ここでは tomca...

Vue開発の詳細な説明 ソートコンポーネントコード

目次 <テンプレート> <ul class="コンテナ">...

VueはExcelデータをエクスポートするパブリック関数メソッドをカプセル化します

vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル...

Vue.js フロントエンドフレームワークにおけるイベント処理の概要

1. v-onイベント監視DOM イベントをリッスンするには、v-on ディレクティブを使用します。...

Docker を使用した MySQL のデプロイの詳細説明 (データ永続化)

この記事では、Docker を使用して MySQL をデプロイし、データを保持する方法について簡単に...