목적

초보자가 angular9에서 firebase에 배포 (firebase에서는 hosting이라고 함)했을 때 주저했기 때문에 공유합니다.

배경

이하의 환경에서 angular 프로젝트 제작이 끝난 상태, angular single-page 앱 제작이 끝난 (angular 프로젝트 신규 제작시에 제작되는 default 앱에서도 OK), firebase 설정이 끝난 것으로 한다.
- Windows10 PRO
- 노드 v12.16.1
- Angular v9.0.5
- Firebase v7.13.2

이하의 양기사도 참고로.
Angular9와 Firebase로 블로그를 만들어 보자 1

방법

명령 프롬프트를 시작합니다.

cd 또는 cd/d 명령으로 Angular 프로젝트의 폴더로 이동합니다. 입력 예) cd C :\XXXX\XXXX\XXXX (← cd 다음은 실제 디렉토리로 변경)

Angular 프로젝트를 빌드한다. 입력 예) ng build

Angular 프로젝트의 디렉토리에 dist 폴더가 있는지 확인합니다.

Firebase에 로그인(브라우저가 시작되고 계정 및 비밀번호 입력). 입력 예) firebase login

Firebase 초기화(Figure 1). 입력 예) firebase init

Are you ready proceed? 라고 들었으므로, 「Y」라고 입력한다.

Which Firebase CLI features do you want to set up for this folder?

Firebase 프로젝트가 여러 개 있는 경우 대상 프로젝트를 듣기 때문에 선택합니다. 과거에 한 번 Firebase 프로젝트를 선택했을 때 default로 설정되었습니다 (.firebaserc 파일에 채워져 있음).

What do you want to use as your public directory? 입력 예) dist\XXXX 를 입력한다 (←dist\아래는 당신의 실제 directory를 입력).

Configure as a single-page app (rewrite all urls to/index.html)? .

File dist\XXXX/index.html already exists. Overwrite?

배포(Figure 2). 입력 예) firebase deploy

그림 1


그림 2

결과 및 고찰

내가 성공했을 때 24 파일이 배포되었습니다. 쓸모 없었을 때는 0파일이거나 3파일 밖에 배포되지 않았다 (firebase적으로는 성공으로서 취급되고 있었지만). 안 되었을 때는 public directory의 지정이 잘 되어 있지 않았을지도 모른다. Angular 또는 Firebase의 버전에 따라 설문이 바뀌는 것처럼 주의. 1회째로 성공해도 실패해도, 2회째 이후는 firebase 프로젝트의 default 설정이 끝나거나 여러 가지 설정이 고정되어 버리므로, .firebaserc 파일이나 firebase.json 파일의 내용을 확인할 필요가 나온다 올지도.