hsunny study blog

Firebase 무료 웹호스팅 사용하기 본문

programming/etc

Firebase 무료 웹호스팅 사용하기

헤써니 2023. 1. 18. 00:28

웹빌드 결과물을 확인하고 싶지만, 도메인이 없을 때 사용하면 좋을 웹호스팅 서비스를 소개한다.

 

1. https://console.firebase.google.com/ (Firebase Console) 로 이동한다. 로그인 필요

2. 프로젝트를 생성한다.

3. 우측 '빌드' 하위 메뉴에 있는 Hosting을 누르고, 나오는 화면에서 '시작하기' 버튼을 누른다.

4. Firebase 호스팅 설정에 따라 진행한다.

 

 

Firebase 호스팅 설정

1. 다음 npm 명령어를 실행하여 CLI를 설치하거나 최신 CLI 버전으로 업데이트한다.

npm install -g firebase-tools

2. 웹 앱의 루트 디렉터리로 이동하거나, 루트 디렉터리를 만든 후 아래 명령어를 실행한다.

  • 구글에 로그인
firebase login

이미 로그인을 해두었다면, 'Already logged in as {로그인한 메일주소}'가 화면에 나타날 것이고, 아니라면 구글 로그인 창이 웹으로 띄워진다.

 

  • 프로젝트 시작
firebase init

프로젝트 설정에 필요한 몇가지 선택과정이 있다.

 

단순 호스팅만 하는 경우, 

Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.  에 대한 답으로

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys 를 선택하면 된다.

 

 

이후 어느 프로젝트를 사용할 것인지 선택해주면 된다.

 

그 이후 호스팅을 위해 어떤 폴더명을 사용할 것인지 물어보는데, 그냥 enter를 친다면, 기본 설정인 'public'폴더가 된다.

  • 배포할 파일들을 'public'폴더에 넣어야 함

 

그 이후 설문 또한, 본인에게 맞게 답하면 된다.

 

이렇게 답을 마치면, 3개의 파일이 생성된다.

 

3. 웹 빌드결과물을 위에서 설정한 공개 폴더에 넣는다.

 

4. 앱의 루트 디렉터리에서 아래 명령어를 실행한다.

firebase deploy

배포가 완료되면 Hosting URL에 나오는 주소로 들어가서 배포된 내용을 확인할 수 있다.

프로젝트 콘솔에 들어가면 출시내역 등의 내용을 확인할 수 있다.

 

 

참고사이트

더보기

https://firebase.google.com/docs/hosting?authuser=0&hl=ko

'programming > etc' 카테고리의 다른 글

nvm 사용해보기 (MAC)  (0) 2021.09.02
[linux vim] vi, vim 문자열 찾기  (0) 2021.03.07
[linux vim] 파일의 맨 처음/맨 끝으로 이동하는 방법  (0) 2020.12.28
자주 사용하는 Playground  (0) 2020.12.27
zsh, oh-my-zsh  (0) 2020.08.30