Thief of Wealth
article thumbnail
Published 2021. 3. 5. 20:01
Firebase 사용하기 개발/Web Programming

1. firebase CLI 설치

firebase.google.com/docs/cli?hl=ko#install_the_firebase_cli

 

Firebase CLI 참조

firebase.ml.naturallanguage.translate

firebase.google.com

위 사이트를 참고하여 설치한다.

max, linux는 터미널에 아래 코드 입력하면 된다.

curl -sL https://firebase.tools | bash

 

2. firebase 로그인

firebase login

터미널에 위 명령어 입력하여 로그인한다. (구글 로그인)

 

3. 호스팅하고자 하는 폴더로 이동한다.

cd javascript-youtube-classroom/

 

4. 호스팅 세팅 명령어를 입력한다.

firebase init hosting

 

5. firebase 설정

 

1) 프로젝트 선택 

지금은 firebase에 따로 만들어준 것이 없으므로 새 프로젝트 생성

 

 

2) unique project id(나중에 수정못함)와 프로젝트를 어떻게 부를건지 설정

특별히 이유가 없다면 둘다 같게 해줘도 될듯하다..

(저는 doby-classroom-mission으로 통일)

이어서 아래 질문들은 엔터로 다 넘어간다.

3) What do you want to use as your public directory? (public) 

=> 디폴트 폴더가 public인가? (나중에 firebase.json에서 수정가능)

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

=> SPA 설정 할것인가?

5) Set up automatic builds and deploys with GitHub?

=> 깃허브 사용할 것인가?

 

6. 설정완료되면 사이트 배포

1) 아까전에 디폴트 폴더를 public으로 해줬으므로, src폴더와 index.html를 public에 넣는다. (싫으면 firebase.json 수정)

2) 아래 명령어를 실행하여 호스팅

- 파일을 변경했으면 아래 명령어 한번더 수행하여 다시 deploy해줘야함

- 파일변경하고 deploy했는데 반영이 안되었다? 캐시문제일듯하니 크롬에서 강력 새로고침 수행 (맥: CMD+SHIFT+R) 

firebase deploy --only hosting

 

7. 호스팅성공

 

 

* 삭제해서 호스팅 취소하고 싶으면? Project Console에서 프로젝트 설정에서 삭제해준다.

 

'개발 > Web Programming' 카테고리의 다른 글

[CSS] box-sizing (content-box, border-box)  (0) 2021.03.07
Debounce, Throttling  (0) 2021.03.07
[redux] 리덕스 액션/리뷰서/스토어 역할 정리  (0) 2021.02.25
[React] babel 이란?  (0) 2021.01.23
[D3.js] D3의 기본형식  (0) 2021.01.21
profile on loading

Loading...