앵 귤 러 용기 배치

많은 사람들 이 Github Page 에 접근 하기 어렵 다 는 반응 을 보 여 ng - alain. com 이 알 리 클 라 우 드 서버 로 옮 겨 져 완전한 Angular 용기 배 치 를 했다.
다음은 g - alain 의 전체 과정 을 논술 하 겠 습 니 다. 그 중에서 Docker, Nginx, Let 's Sencrypt 인증서 등 범 타 오 를 포함 합 니 다. 초보 자 들 이 그녀 를 잘 읽 을 수 있 을 것 이 라 고 장담 할 수 는 없 지만 일부 글 키 워드 를 통 해 검색엔진 에서 더 많은 자 료 를 얻 을 수 있 습 니 다.
우 리 는 Docker 가 미 러, 용기 라 는 두 가지 중요 한 개념 을 가지 고 있다 는 것 을 안다.한편, Anguar 용기 배 치 는 Angular 가 구축 한 생산 환경 (예 를 들 어 ng build -prod 에서 생 성 된 디 렉 터 리 dist 를 정적 서버 미 러 (예 를 들 어 Nginx) 에 기록 하고 마지막 으로 이 미 러 를 인 스 턴 스 해 야 합 니 다.
1. 각도 미 러 구축
1. 각도 컴 파일
일반적으로 Angular 구축 도 하나의 용기 에서 이 루어 집 니 다. Angular 프로젝트 루트 디 렉 터 리 에 파일 을 만 듭 니 다 Dockerfile.compile.

FROM node:8

LABEL authors="cipchk "

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 하나의 node 기초 미 러 를 지정 하 는데 이것 은 Angular 프로젝트 를 구축 하 는 가장 간단 한 기본

이다.

LABEL 미 러 메타 데이터, 예 를 들 어 authors 작가 정보

WORKDIR 미 러 내 작업 디 렉 터 리 지정

COPY 프로젝트 package. json 을 복사 하고 의존 패키지 설치

RUN 프로젝트 파일 을 복사 한 후 실행 ng build 명령

마지막 으로 미 러 구축 명령 을 실행 합 니 다:

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

그 중에서 ng-app-build 미 러 이름 을 나타 낸다.
2. Angular 운영 환경
저 희 는 Angular 미 러 를 컴 파일 하 는 토대 에서 Angualr 운영 환경 미 러 를 구축 하지 않 기 때문에 의미 없 는 파일 이 많이 포함 되 어 있 습 니 다. 예 를 들 어 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 설정 을 포함 합 니 다. 예 를 들 어 HTML 5 경로 정책 을 사용 할 때 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 HTML 5 경로 정책 의 중요 한 일환 입 니 다.
마지막 으로 생산 환경 미 러 구축:

docker build -f Dockerfile -t ng-app .

물론 이때 의 컴 파일 Angular 미 러 는 이미 존재 하 는 의미 가 없다.

docker rmi -f ng-app-build

2. 앵 귤 러 실행
우 리 는 이미 존재 하 는 미 러 를 볼 수 있 습 니 다:

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 설치
CenOS 7 을 예 로 들 면, 더 많은 시스템 은 자체 구 글 을 사용 하 세 요:

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

3. 지속 적 인 배치
상기 일련의 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 에서 찾 을 수 있 습 니 다. 개인 경로 가 다 를 수 있 습 니 다.
(끝)