Angular 컨테이너를 배포하는 방법

이번에는 Angular 컨테이너 배포 방법과 Angular 컨테이너 배포 시 주의사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

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

1. FROM은 Angular 프로젝트를 빌드하는 가장 간단하고 기본적인 방법인 노드 기본 이미지를 지정합니다.

2. LABEL 이미지 메타데이터(예: 작성자 정보)

3. WORKDIR은 이미지 내의 작업 디렉터리를 지정합니다.

4. COPY는 프로젝트 패키지 .json을 복사하고 종속성 패키지를 설치합니다.

5. 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이 역방향 프록시 계층에서 통합되어야 한다는 점을 선호합니다. 결국 컨테이너화 후에 하나의 시스템에 하나의 애플리케이션만 배포하는 것은 불가능합니다.

다음은 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 是国内一大牛写的用于简化申请 Let's Sencrypt 证书，并自动续签证书，几乎上第一次安装完全后，后续都无须人工干预。

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: ""

위 내용은 Angular 컨테이너를 배포하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!