Vue.js 앱을 Firebase에 호스팅 할 때 주의점

Vue.js로 만든 웹앱을 Firebase에 호스팅하면 당황스러운 상황에 처하게 된다. 분명히 Firebase에서 알려준 내 웹앱의 URL에 접속했는데, 화면에 아무 것도 안뜬다!

그 원인은 다음과 같다.

1. 호스팅 디렉트리를 지정하지 않았다. Firebase의 기본 호스팅 디렉트리는 public이다. 그래서 웹앱의 URL에 접속하면 public 디렉토리의 index.html만 뜬다. 물론 빈 화면이다.
2. npm run build를 하지 않았을 수 있다.

해결책은 다음과 같다.

1. 호스팅 디렉토리 지정: firebase.json의 hosting.public의 값을 dist로 변경한다.
2. npm run build를 한다.
   • 로컬 환경의 콘솔에서 바로 firebase deploy를 한다면 그냥 로컬에서 npm run build만 하면 된다.
   • github action을 이용한다면(firebase init을 할 때 기본 설정된다. origin repo의 master 브랜치에 push가 오거나, PR이 되면 github action이 발동한다) .github/workflows 디렉토리의 github action 설정 파일(*.yml)을 아래와 같이 수정한다.

# ...
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build # build 추가!
      - uses: FirebaseExtended/action-hosting-deploy@v0
# ...

위와 같이 - run: npm ci && npm run build만 추가하면 된다!

참고: https://github.com/FirebaseExtended/action-hosting-deploy