So stellen Sie Angular-Container bereit

Dieses Mal zeige ich Ihnen, wie Sie Angular-Container bereitstellen und welche Vorsichtsmaßnahmen für die Bereitstellung von Angular-Containern gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Wir wissen, dass Docker zwei sehr wichtige Konzepte hat: Image und Container. Bei der Anguar-Containerbereitstellung muss lediglich das von der von Angular erstellten Produktionsumgebung generierte Verzeichnis dist (z. B. ng build -prod) in ein statisches Server-Image (z. B. Nginx) geschrieben und dieses Image schließlich instanziiert werden.

1. Angular-Image erstellen

1. Angular-Bild kompilieren

Im Allgemeinen Angular-Building wird auch in einem Container abgeschlossen. Erstellen Sie eine Dockerfile.compile-Datei im Stammverzeichnis des Angular-Projekts:

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

1. FROM gibt ein Knoten-Basis-Image an, was die einfachste Möglichkeit zum Erstellen eines ist Angular-Projekt Grundlegende

2. LABEL-Bildmetadaten, wie z. B. Autoreninformationen des Autors

3. WORKDIR gibt das Arbeitsverzeichnis innerhalb des Bildes an

4. KOPIEREN Kopieren Sie das Projekt package.json und installieren Sie die abhängigen Pakete

5. RUN Kopieren Sie die Projektdatei und führen Sie den ng build-Befehl aus

Führen Sie abschließend den Befehl „build Mirror“ aus:

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

wobei ng-app-build für den Spiegelnamen steht.

2. Angular-Laufzeitumgebung

Wir werden das Angularr-Laufzeitumgebungs-Image nicht basierend auf der Kompilierung des Angular-Images erstellen, daher enthält es viele bedeutungslose Dateien, wie z. B. npm i generierte node_modules. Extrahieren Sie stattdessen das dist-Verzeichnis aus dem obigen Image und generieren Sie ein neues Image. Die Angular-Laufzeitumgebung sollte sauber und einfach sein.

Deshalb extrahieren Sie den dist aus dem kompilierten Angular-Image:

# 运行编译 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

Hinweis: Der Containerpfad muss der WORKDIR-Pfad sein, der von Angular im vorherigen Schritt kompiliert wurde

Schließlich erstellen eine Docker-Datei im Stammverzeichnis der .package-Datei des Angular-Projekts:

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;"]

Die Parameter ähneln denen im vorherigen Abschnitt, mit der Ausnahme, dass der extrahierte dist in das Nginx-Standardlaufverzeichnis im Image geschrieben wird.

Verwenden Sie gleichzeitig _nginx/default.conf des Angular-Projekts als Nginx-Konfigurationsdatei und fügen Sie die Nginx-Konfiguration in das Projekt ein. Wenn Sie beispielsweise die HTML5-Routing-Strategie verwenden, müssen Sie sich mit 404-Problemen befassen , GZip usw.

Aber ich bevorzuge, dass die Nginx-Konfiguration hier extrem einfach ist und einige GZip und SSL auf der Reverse-Proxy-Ebene vereinheitlicht werden sollten. Schließlich ist es unmöglich, nach der Containerisierung nur eine Anwendung auf einer Maschine bereitzustellen. .

Das Folgende sind die einfachsten Konfigurationsinformationen einer Angular-Anwendung:

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 kann sicherstellen, dass, wenn der Zugriffspfad die Datei nicht findet, stattdessen direkt die Datei index.html verwendet wird. Dies ist ein sehr wichtiger Teil der Angular-HTML5-Routing-Strategie.

Erstellen Sie abschließend das Image der Produktionsumgebung:

docker build -f Dockerfile -t ng-app .

Natürlich hat das kompilierte Angular-Image zu diesem Zeitpunkt keine existenzielle Bedeutung.

docker rmi -f ng-app-build

2. Run Angular

Wir können den vorhandenen Spiegel anzeigen:

docker images

Natürlich ist das Obige konfiguriert in Nginx Es verwendet einen Port 80, sodass er direkt verwendet werden kann:

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

Wenn Ihr Domainname an den Host gebunden ist, können Sie direkt darauf zugreifen. Bisher wurde alles nach der Angular-Containerisierung behandelt. Im Folgenden geht es um die Nginx-Reverse-Proxy-Docker-Anwendung. Wenn Sie dies bereits getan haben, ignorieren Sie einfach das nächste Kapitel.

Nginx-Reverse-Proxy

In den meisten Fällen wird ein Proxy-Server-Container zum Weiterleiten mehrerer Sites verwendet, sodass er selten direkt in einer Angular-Site verwendet wird. Verwenden Sie Port 80 direkt. aber leiten Sie es über eine andere Proxy-Ebene weiter.

Ich habe zuvor versucht, den jwilder/nginx-proxy-Spiegel zu verwenden, aber der SSL-Link hat mir große Probleme bereitet. Ich habe schließlich aufgegeben und bin auf die direkte Installation von Nginx auf dem Host umgestiegen. Fungiert als Reverse-Proxy.
Während des Angular-Containerisierungsprozesses haben wir kein SSL, GZip usw. konfiguriert, wir haben lediglich die für den Nginx-Dienst erforderlichen Konfigurationselemente beibehalten und können diesen Teil in der Reverse-Proxy-Schicht abschließen.

Dieser Prozess umfasst drei Schritte: Nginx installieren, acme.sh installieren, um das Let's Sencrypt-Zertifikat auszustellen, Nginx konfigurieren und ausführen.

1. Installieren Sie Nginx

Nehmen Sie CenOS7 als Beispiel:

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

2. sh Zertifikat ausstellen

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/;
  }
}

1. server 这里有两个分别对 80 和 443，前者强制跳转 https，当你不希望用户使用 http 访问你站点时。

2. server_name 指定监听的域名

3. 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 命令的设计文档。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用webpack设置反向代理

vue中有哪些循环遍历指令

Das obige ist der detaillierte Inhalt vonSo stellen Sie Angular-Container bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!