Angular 컨테이너 배포 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

이번에는 Angular 컨테이너 배포 단계에 대한 자세한 설명을 가져왔습니다. Angular 컨테이너 배포 시 주의 사항은 무엇인가요?

아래에서는 Docker, Nginx, Let's Sencrypt 인증서 등을 포함하여 ng-alain의 전체 프로세스를 설명합니다. 초보자가 잘 읽을 수 있다고 보장할 수는 없지만 일부 기사 키워드 자료를 통해 검색 엔진에서 더 많은 정보를 얻을 수 있습니다.

Docker에는 이미지와 컨테이너라는 두 가지 매우 중요한 개념이 있다는 것을 알고 있습니다. 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 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 라우팅 전략을 사용할 때와 같이 프로젝트에 Nginx 구성을 포함하면 404 문제를 처리해야 합니다. GZip 등

하지만 여기서는 Nginx 구성이 매우 간단하고 일부 GZip과 SSL이 역방향 프록시 계층에서 통합되어야 한다는 점을 선호합니다. 결국 컨테이너화 후에 하나의 애플리케이션만 머신에 배포하는 것은 불가능합니다.

다음은 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

로그인 후 복사

도메인 이름 호스트를 알고 있으면 직접 액세스할 수 있습니다. 지금까지 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 命令的设计文档。

위 코드는 모두 드론에서 확인하실 수 있으며, 개인 경로는 다를 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!