Angularコンテナのデプロイ手順の詳細な説明-jsチュートリアル-php.cn

今回は、Angular コンテナのデプロイ手順について詳しく説明します。Angular コンテナのデプロイに関する注意事項について、実際のケースを見てみましょう。

以下では、Docker、Nginx、Let's Sencrypt 証明書などを含む ng-alain のプロセス全体を説明します。初心者がうまく読めるかどうかは保証できませんが、いくつかの記事のキーワード資料を通じて検索エンジンでさらに多くの情報を得ることができます。

Docker には、イメージとコンテナーという 2 つの非常に重要な概念があることはわかっています。 Anguar コンテナーのデプロイメントでは、Angular で構築された運用環境 (例: ng build -prod) によって生成されたディレクトリ dist を静的サーバーイメージ (例: Nginx) に書き込み、最後にこのイメージをインスタンス化するだけで済みます。

1. Angular イメージをビルドします

1. Angular をコンパイルします

一般的に、Angular ビルドは Angular プロジェクトのルートディレクトリに Dockerfile.compile ファイルを作成します。

FROM node:8
LABEL authors="cipchk <cipchk@qq.com>"
WORKDIR /usr/src/app
COPY package.json package.json
RUN npm config set registry https://registry.npm.taobao.org \
  && npm i
COPY . .
RUN ng build --prod

ログイン後にコピー

FROM は、Angular プロジェクトを構築する最も単純かつ基本的な方法であるノードベースイメージを指定します
LABEL 作成者情報などのイメージメタデータ
WORKDIR は、イメージ内の作業ディレクトリを指定します
COPY はプロジェクトパッケージ .json をコピーし、依存関係パッケージをインストールします
RUN プロジェクトファイルをコピーし、ng build コマンドを実行した後

最後に、build image コマンドを実行します:

docker build -f Dockerfile.build -t ng-app-build .

ログイン後にコピー

where ng -app-build はイメージ名を表します。

2. Angular ランタイム環境

Angular イメージのコンパイルに基づいて Angularr ランタイム環境イメージを構築することはありません。そのため、npm i によって生成された node_modules などの多くの意味のないファイルが含まれます。代わりに、上記のイメージから dist ディレクトリを抽出し、新しいイメージを生成します。Angular ランタイム環境はクリーンでシンプルなものになるはずです。

したがって、コンパイルされた Angular イメージから dist を抽出します:

# 运行编译 Angular 镜像
docker run --name ng-app-build ng-app-build
# 将 `dist` 复制到项目根目录下
docker cp ng-app-build:/usr/src/app/dist ./dist/
# 删除编译 Angular 镜像实例
docker rm -f ng-app-build

ログイン後にコピー

注: コンテナーのパスは、前の手順で Angular によってコンパイルされた WORKDIR パスである必要があります

最後に、Angular のルートディレクトリに Dockerfile.package ファイルを作成します。プロジェクト:

FROM nginx
COPY _nginx/default.conf /etc/nginx/conf.d/
RUN rm -rf /usr/share/nginx/html/*
COPY /dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

ログイン後にコピー

パラメータと前のセクション抽出された dist がイメージ内の Nginx のデフォルトの実行ディレクトリに書き込まれることを除いて、これはわずかに同じです。

同時に、Angular プロジェクトの _nginx/default.conf を Nginx の設定ファイルとして使用します。HTML5 ルーティング戦略を使用する場合など、404 の問題に対処する必要があります。 GZipなど

しかし、私はここでの Nginx 構成が非常にシンプルであることを好み、一部の GZip と SSL はリバースプロキシ層で統合されるべきです。結局のところ、コンテナ化後に 1 台のマシンに 1 つのアプリケーションだけをデプロイすることは不可能です。

以下は、Angular アプリケーションの最も単純化された構成情報です。

server {
  listen    80;
  server_name localhost;
  location / {
    root  /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page  500 502 503 504 /50x.html;
  location = /50x.html {
    root  /usr/share/nginx/html;
  }
}

ログイン後にコピー

try_files は、アクセスされたパスでファイルが見つからない場合に、代わりに Index.html ファイルが直接使用されることを保証します。これは、 Angular HTML5 ルーティング戦略。

最後に本番環境イメージを構築します:

docker build -f Dockerfile -t ng-app .

ログイン後にコピー

もちろん、この時点でコンパイルされたAngularイメージは存在する意味がありません。

docker rmi -f ng-app-build

ログイン後にコピー

2. Angular を実行します

既存のイメージを表示できます:

docker images

ログイン後にコピー

もちろん、Nginx での上記の設定はポート 80 を使用しているため、直接使用できます:

docker run -d -p 80:80 \
  --name web \
  ng-app

ログイン後にコピー

If you bindingドメイン名ホストがわかっている場合は、そのホストに直接アクセスできます。これまでのところ、Angular コンテナー化後のすべてが説明されています。以下は Nginx リバースプロキシ Docker アプリケーションに関する部分です。すでにこれを行っている場合は、次の章を無視してください。

Nginx リバースプロキシ

ほとんどの場合、複数のサイトの転送にプロキシサーバーコンテナが使用されるため、Angular サイトでポート 80 を直接使用することはまれですが、転送には別のプロキシ層を経由します。

在之前我尝试使用jwilder/nginx-proxy 镜像来处理，它真的非常方便，但是在SSL环节让我吃了很多苦头，最后放弃之，而改用直接在主机上安装 Nginx 作为反向代理。
在Angular容器化过程中，我们并未配置任何 SSL、GZip 等，只是保留 Nginx 服务所需的配置项而已，而这一部分我们可以放在反向代理层完成。

这个过程包括三个步骤：安装 Nginx、安装 acme.sh 签发 Let's Sencrypt 证书、配置并运行 Nginx。

1、安装Nginx

以 CenOS7 为例，更多系统请自行Google：

sudo yum install epel-release
sudo yum install nginx
# 启动Nginx
sudo systemctl start nginx

ログイン後にコピー

2、通过acme.sh签发证书

acme.sh 是国内一大牛写的用于简化申请 Let's Sencrypt 证书，并自动续签证书，几乎上第一次安装完全后，后续都无须人工干预。

Let's Sencrypt 不久前发布支持泛域，因此这一次也是申请了 *.ng-alain.com 泛域证书。

安装 acem.sh：

curl https://get.acme.sh | sh

ログイン後にコピー

这里我使用DNS来签发证书，目前支持几十种服务商，当然包括阿里云：

export Ali_Key="aaaaaaaaaaa"
export Ali_Secret="xxxxxxxxxxxxxxxx"
acme.sh --issue --dns dns_ali -d ng-alain.com -d *.ng-alain.com

ログイン後にコピー

Ali_Key 和 Ali_Secret 是对应的阿里云的 Access key，注意要给予 DNS 授权。

最后，利用 --installcert 来提取 Nginx 所需要的证书文件。

acme.sh --installcert \
  -d ng-alain.com \
  --key-file $(pwd)/proxy/certs/ng-alain.com.key \
  --fullchain-file $(pwd)/proxy/certs/fullchain.cer \
  --reloadcmd "service nginx force-reload"

ログイン後にコピー

acme.sh 会纪录这行命令的所有细节，并且当自动续签触发后再一次执行它们。其中 service nginx force-reload 是指命令执行完成后重启 nginx 使启证书立刻生效。

整个过程我非常顺利，没有任何错误，acme.sh 也有很多说明文档，包括中文，有关更多细节请自行阅读。

3、运行 Nginx

之前在安装 Nginx 时我们就已经启动了，那么，我们只需要对 /etc/nginx/nginx.conf 编写一些 Nginx 配置即可。

有两个主要细节：SSL配置和代理转化Angular容器实例端口的配置。

对于前者，若你在运行上述命令时依然保持路径的话，则：

ssl_certificate /root/proxy/certs/fullchain.cer;
ssl_certificate_key /root/proxy/certs/ng-alain.com.key;
ssl_session_timeout 30m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDH+AESGCM:DH+AESGCM:ECDH+AES256:DH+AES256:ECDH+AES128:DH+AES:ECDH+3DES:DH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!MD5:!DSS;
ssl_session_cache shared:SSL:10m;
ssl_prefer_server_ciphers on;

ログイン後にコピー

而对于代理转化，这其决于你映射Angular容器的端口，例如上述在运行容器的命令是这样：

docker run -d -p 80:80 \
  --name web \
  ng-app

ログイン後にコピー

我们可以重新换另一个映射端口，例如：8001。

docker kill web
docker run -d -p 8001:80 \
  --name web \
  ng-app

ログイン後にコピー

然后在 Nginx 配置相应的代理转化：

server {
  listen 80;
  server_name ng-alain.com www.ng-alain.com;
  return 301 https://$server_name$request_uri;
}
server {
  listen 443 ssl http2;
  server_name ng-alain.com www.ng-alain.com;
  location / {
    proxy_pass http://127.0.0.1:8001/;
  }
}

ログイン後にコピー

server 这里有两个分别对 80 和 443，前者强制跳转 https，当你不希望用户使用 http 访问你站点时。
server_name 指定监听的域名
proxy_pass 指定代理转发域，8001 端口就是上述 Angular 应用所处容器所映射的端口

配置文件保持后，你可以先执行 nginx -t 来校验配置文件是否正确。

最后，重启 Nginx。

service nginx force-reload

ログイン後にコピー

三、持续部署

上述有系列的 Docker 命令甚是繁琐，应该把这一切自动化，有个专业名称叫：持续部署（简称：cd）；ng-alain.com 现在是使用DaoCloud 完成这项工作。

DaoCloud 提供一种叫【安全镜像】的构建功能，分为三个步骤——编译、提取、打包；等同上述 Angular 项目的编译、提供和发布。

只需要在项目下创建 daocloud.yml；它是 DaoCloud 提供的一种自定义项目流程的定义文件，若你对上述已经了解，再来看它就不会非常陌生。以下是 ng-alain.com 完整的 daocloud.yml 内容：

version: 3
stages:
- compile
- deploy
release:
 stage: compile
 job_type: lite_image_build
 only:
  branches:
  - master
 allow_failure: false
 compile:
  build_dir: /
  cache: false
  dockerfile_path: /Dockerfile.compile
 extract:
 - /usr/src/app/dist
 - /usr/src/app/_nginx/default.conf
 package:
  build_dir: /
  cache: false
  dockerfile_path: /Dockerfile.package
self:
 stage: deploy
 job_type: DCS_deploy
 only:
  branches:
  - master
 allow_failure: false
 dependencies:
 - release
 app_name: web
 cluster_id: ""

ログイン後にコピー

注意：其中 extract 务必包含完整路径。

四、总结

将生产环境容器化已经是一种架构标准，上述只是在部署ng-alain.com 的一些总结，实际可能遇到的问题会更多，大家可以通过以下找到答案：

Docker — 从入门到实践
Docker 问答录（100 问）
DaoCloud Services 文档

当然，未来Angular cli 也将会内置 Docker 部署，这里有一份来自 Angular 的相关ng docker 命令的设计文档。

上記のコードはすべて delon にありますが、個人のパスは異なる場合があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jsでel式の空でない判定を行う方法

VUEはElTableColumnを拡張します

以上がAngularコンテナのデプロイ手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。