ホームページ > 記事 > ウェブフロントエンド > Angularコンテナをデプロイする方法
今回は、Angular コンテナのデプロイ方法と、Angular コンテナをデプロイする際の注意点について説明します。以下は実際のケースです。
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 ビルド コマンドを実行した後
最後に、ビルド イメージ コマンドを実行します:
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 構成ファイルとして使用し、プロジェクトに 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 サービスに必要な構成項目のみを保持し、この部分はリバース プロキシ レイヤーで完了できます。
このプロセスには 3 つのステップが含まれます: 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: 这里我使用DNS来签发证书,目前支持几十种服务商,当然包括阿里云: Ali_Key 和 Ali_Secret 是对应的阿里云的 Access key,注意要给予 DNS 授权。 最后,利用 --installcert 来提取 Nginx 所需要的证书文件。 acme.sh 会纪录这行命令的所有细节,并且当自动续签触发后再一次执行它们。其中 service nginx force-reload 是指命令执行完成后重启 nginx 使启证书立刻生效。 整个过程我非常顺利,没有任何错误,acme.sh 也有很多说明文档,包括中文,有关更多细节请自行阅读。 3、运行 Nginx 之前在安装 Nginx 时我们就已经启动了,那么,我们只需要对 /etc/nginx/nginx.conf 编写一些 Nginx 配置即可。 有两个主要细节:SSL配置和代理转化Angular容器实例端口的配置。 对于前者,若你在运行上述命令时依然保持路径的话,则: 而对于代理转化,这其决于你映射Angular容器的端口,例如上述在运行容器的命令是这样: 我们可以重新换另一个映射端口,例如:8001。 然后在 Nginx 配置相应的代理转化: server 这里有两个分别对 80 和 443,前者强制跳转 https,当你不希望用户使用 http 访问你站点时。 server_name 指定监听的域名 proxy_pass 指定代理转发域,8001 端口就是上述 Angular 应用所处容器所映射的端口 配置文件保持后,你可以先执行 nginx -t 来校验配置文件是否正确。 最后,重启 Nginx。 三、持续部署 上述有系列的 Docker 命令甚是繁琐,应该把这一切自动化,有个专业名称叫:持续部署(简称:cd);ng-alain.com 现在是使用DaoCloud 完成这项工作。 DaoCloud 提供一种叫【安全镜像】的构建功能,分为三个步骤——编译、提取、打包;等同上述 Angular 项目的编译、提供和发布。 只需要在项目下创建 daocloud.yml;它是 DaoCloud 提供的一种自定义项目流程的定义文件,若你对上述已经了解,再来看它就不会非常陌生。以下是 ng-alain.com 完整的 daocloud.yml 内容: 注意: 其中 extract 务必包含完整路径。 四、总结 将生产环境容器化已经是一种架构标准,上述只是在部署ng-alain.com 的一些总结,实际可能遇到的问题会更多,大家可以通过以下找到答案: Docker — 从入门到实践 当然,未来Angular cli 也将会内置 Docker 部署,这里有一份来自 Angular 的相关ng docker 命令的设计文档。 相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章! 推荐阅读:curl https://get.acme.sh | sh
export Ali_Key="aaaaaaaaaaa"
export Ali_Secret="xxxxxxxxxxxxxxxx"
acme.sh --issue --dns dns_ali -d ng-alain.com -d *.ng-alain.com
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"
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;
docker run -d -p 80:80 \
--name web \
ng-app
docker kill web
docker run -d -p 8001:80 \
--name web \
ng-app
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/;
}
}
service nginx force-reload
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: ""
Docker 问答录(100 问)
DaoCloud Services 文档
以上がAngularコンテナをデプロイする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。