angular ng deploy 의 실현

Angular CLI 는 8.3.0 에서 새로운 명령 인 ng deploy 를 발 표 했 습 니 다.Angular 응용 프로그램 을 원 격 서버 나 클 라 우 드 저장 소 에 배치 할 수 있 습 니 다.예 를 들 어Firebase hosting,Azure,GitHub pages등 이 있 습 니 다.이것 은 Angular CLI 가 마지막 으로 Angular 응용 프로그램 을 개발 에서 부서 에 전 능 선수 도구 로 연결 한 셈 입 니 다.
쾌속 입문
여기 서 저 는ng-deploy-oss을 예 로 들 어 Angular 응용 을 7 우 운 에 어떻게 배치 하 는 지 보 여 드 리 겠 습 니 다.
1.새 항목 만 들 기

ng new hello-world --defaults

2.ng-deploy-oss 추가

ng add ng-deploy-oss

명령 길드 에서 몇 개의 인 자 를 입력 하 라 고 합 니 다:

?       ？    
?     AccessKey： test
?     SecretKey： test
?       ： qiniu.zone.Zone_z0 -   
?     Bucket： ng-test
?        ，             ： 
?            NPM    （  ：npm run build），          angular.json        
UPDATE angular.json (3925 bytes)
UPDATE package.json (1511 bytes)

3.배치

ng deploy

마지막 으로 브 라 우 저 를 직접 열 면 ng build-prod 후의 효 과 를 직접 방문 할 수 있 습 니 다.
의 원리
사실 ng deploy 는 다른 Angular schematics 명령 인 ng add,ng g 등 과 같 습 니 다.저 는Angular Cli SchematicsSchematics 에 대해 소 개 를 한 적 이 있 습 니 다.ng deploy 를 사용자 정의 하려 면 두 부분 만 완성 해 야 합 니 다.

angular.json 을 수정 하기 위해 ng-add 를 작성 하여 어떤 Angular Libary 를 사용 하 는 지 알려 줍 니 다.

업로드 동작 createBuilder 를 작성 합 니 다.

ng-add
angular.json 에 deploy 노드 추가:

{
  "serve": {},
+  "deploy": {
+    "builder": "ng-deploy-oss:deploy",
+    "options": {}
+  }
}

그리고 package.json 의 devDependencies 의존 패키지 증가:

+ "ng-deploy-oss": "~1.0.0",

관심 이 있 으 면 ng-deploy-oss 의 ng-add 의 전체 쓰기 방법 을 참고 할 수 있 습 니 다.
createBuilder
그것 은 고정된 방법 이다.

export default createBuilder<any>(async (schema: {}, context: BuilderContext): Promise<BuilderOutput> => {
  return { success: true };
});

업로드 와 관련 된 모든 동작 을 이 방법 에 쓰기;이것 은 Promise<BuilderOutput>을 되 돌려 줍 니 다.ng deploy 가 끝나 면 반드시 되 돌아 오 라 고 알려 야 합 니 다.return { success: true };。어떻게 다른 목표 에 배치 합 니까?
현재ng deploy 는 하나의 목표 배치 만 지원 하고 가끔 은 여러 개의 원 격 배치 도 필요 합 니 다.예 를 들 어 당신 이 개원 할 때 국내,외국 을 돌 봐 야 할 때 항상 H-pages 와 7 우 운(무료 한도)을 원 합 니 다.우 리 는 수정 만 해 야 합 니 다angular.json.

{
  "serve": {},
+  "deploy-qiniu": {
+    "builder": "ng-deploy-oss:deploy",
+    "options": {}
+  },
+  "deploy-gh-pages": {
+    "builder": "angular-cli-ghpages:deploy",
+    "options": {}
+  }
}

메모:angular-cli-ghpages:deploy 는angular-cli-ghpages의존 팩 을 참조 합 니 다.
그리고 ng run 를 사용 하여 이 두 가지 다른 목 표를 호출 합 니 다.

ng run <project name>:deploy-qiniu
ng run <project name>:deploy-gh-pages

결론.
Angular 는 국내 에서 약간의 곤경 이 있 었 다.ng deploy 가 발표 한 지 이렇게 오래 되 었 는데 국내 일부 클 라 우 드 저장 소 에 적합 한 것 을 보지 못 했다.사실 ng deploy 를 직접 이용 하여 원 격 서버 에 애플 리 케 이 션 을 배치 하 는 것 은 점점 더 많은 Docker 애플 리 케 이 션 이후 그리 중요 하지 않 을 수 있 지만 오픈 소스 를 자주 쓰 는 사람들 에 게 Angular 애플 리 케 이 션 을 국내 에서 흔히 볼 수 있 는 몇 개의 클 라 우 드 저장 소 에 신속하게 배치 할 수 있다 는 것 은 의도 적 이다.
여기 서 angular ng deploy 의 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 angular ng deploy 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!