Angular 프로젝트를 Firebase hosting 으로 배포하기

Angular 프로젝트를 firebase 호스팅 서비스에 배포하는 방법을 진행해보겠습니다.

사전준비

node ( >= v.10 )

Angular CLI

firebase 계정 ( 구글 계정 )

Angular 프로젝트 생성하기

일단 기본적인 Angular 프로젝트를 생성해주세요.

# angular cli 로 프로젝트 생성
$ ng new firebase-project1

# 프로젝트 폴더로 이동
$ cd firebase-project1

Firebase 콘솔에서 프로젝트 생성하기

필수 사항은 아니지만 기본으로 생성되는 2차 도메인이 맘에 안든다면 별도로 사이트를 추가해서 원하는 명칭으로 설정이 가능합니다. ( 물론 다른사람이 쓰지 않은 명칭만 사용가능합니다. )

Angular 프로젝트에 Firebase 설정하기

firebase 호스팅 서비스에 배포하기 위해서는 firebase cli 를 이용하여 인증 및 권한 획득이 필요합니다.

먼저 아래 명령어 입력 후 현재 firebase 프로젝트를 관리하는 계정으로 로그인을 해주세요.

$ firebase login

firebase 계정 인증을 완료하였으면, 아래 명령어로 프로젝트에 firebase 사용을 위한 기본 설정을 진행해줍니다. ( Angular 프로젝트 폴더내에서 실행하세요. )

$ firebase init

명령어 실행시 몇가지 항목들을 어떻게 할건지 물어보는데 위 예시처럼 설정해주시면 됩니다

( Select a default Firebase project for this directory << 이부분은 위에서 만든 프로젝트명을 참고하셔서 선택하시고 나머지는 예시와 동일하게 해주세요. )

Angular 프로덕션 환경 빌드하기

완료되시면 다음으로는 Angular 프로젝트를 프로덕션 환경으로 빌드해줍니다.

( 호스팅은 소스가 올라가는게아닌 빌드된 결과물을 올려야하기 때문입니다. )

다만 빌드전에 설정파일을 하나 변경해야합니다.

angular.json 파일을 열어보시면 outputPath 항목이 있습니다.

이부분을 dist 로 변경해주세요. ( ex: “dist/firebase-project1” >>> “dist” )

그리고 Angular CLI 의 build 명령어를 실행해주세요

$ ng build --prod

빌드 후 결과물은 dist 폴더에 생성이된걸 확인 하실 수 있습니다.

( 이제 이 dist 폴더의 파일들을 호스팅 서비스에 배포하면 됩니다. )

Firebase 호스팅에 배포하기

하나의 사이트에 배포

하나의 사이트(기본 사이트)에 배포하는 경우 바로 아래 명령어를 실행시켜주시면 됩니다.

$ firebase deploy

여러개의 사이트에 배포

여러 사이트에 배포를 위해 몇가지 설정들을 해줘야합니다.

우선 편하게 사용하시는 에디터로 Angular 프로젝트를 열어주세요.

저는 VS Code 를 이용하겠습니다.

프로젝트를 여시면 firebase 관련 파일들이 보이실 겁니다. ( firebaserc, firebase.json )

이 두개의 파일을 열어보시면 아래와 같이 기본 값이 설정 되어있습니다.

{
   "hosting":{
      "public":"dist",
      "ignore":[
         "firebase.json",
         "**/.*",
         "**/node_modules/**"
      ],
      "rewrites":[
         {
            "source":"**",
            "destination":"/index.html"
         }
      ]
   }
}

{
   "projects":{
      "default":"fir-project1-35ffe"
   }
}

내가 원하는 사이트에 배포하기 위해 설정하는 방법은 두가지로 나뉩니다.

firebase.json 에 site 항목 ( 권장되지 않음 )

firebaserc 파일에 target 설정 후 firebase.json 에 target 지정 ( 권장함 )

첫번째

firebase.json에 site 항목을 추가하는 방법입니다.

위에 보여드린 파일중 firebase.json 파일을 열고 site 항목을 추가합니다.

제가 현재 생성한 사이트는 총 2개이며 각 사이트별로 리소스명이 있습니다.( 빨간 네모 박스친 부분 )

위와같이 site 항목을 각 사이트별 명칭으로 설정하셨으면 이제 deploy 해봅시다.

$ firebase deploy

두번째

firebaserc 파일과 firebase.json 파일에 target 을 설정하는 방법입니다. ( 첫번째 방법보다는 번거로운데 두가지 방법이 있는 이유는 있지 않을까요?.. 하지만 저도 이유는 잘 모르겠네요 ^^; )

공식 문서(https://firebase.google.com/docs/hosting/multisites?hl=ko#deploy_or_serve-locally)에서는 파일자체를 수정하는 방법보다는 명령어를 활용하는 방법을 권장하는듯 합니다.

터미널을 열어 아래 명령어를 입력해주세요.

$ firebase target:apply hosting site1 [프로젝트명 1]
$ firebase target:apply hosting site2 [프로젝트명 2]

프로젝트명 1, 프로젝트명 2 항목에는 각각의 사이트의 리소스명을 입력해주시면 됩니다.

위 명령어를 잘 입력하셨으면 아래 같이 firebaserc 파일이 변경되어있을것입니다.

이제 firebase.json 파일을 열어 target을 추가해주세요.

자 이제 deploy 해 봅시다.

$ firebase deploy

이상으로 firebase 사이트별로 배포하는 방법을 알아보았습니다.

기본적인 설정으로 진행하였지만 추후 다양한 설정들로 개발/스테이징/라이브 서버로 구분해서 처리하면 유용할 듯 합니다.

감사합니다. 👻