1) firebase로 React 빌드 결과 배포하기

개인 홈페이지를 직접 만들어 보고 싶다는 생각을 한 지는 좀 되었는데, 새해를 맞아서 실행에 옮게 됐음

1. 집에 서버용으로 컴을 켜두는건 부담스럽다.

2. 클라우드 자원을 사용하고는 싶은데, 과금을 걱정하고 싶지 않다. (물론 free tier가 있지만... 기간 제한이 있기도 하고 기간 내에라도 내가 모르는 사이에 과금 기준을 넘어버리는 불상사가 발생하지 않으면 좋겠다 ㅜㅜ)

 

요 두 가지가 어떻게 홈페이지를 구축할 지 결정하는 데에 가장 중요한 포인트였다. 

 

글을 쓰거나 파일을 업로드 하는 등의 기능은 구현하지 않을 생각이라 static 파일만 호스팅 하면 되는 상황이어서

무료 요금제 사용 중에 나도 모르게 과금이 될 우려가 없는 firebase 를 사용하기로 결정했다 :)

 

1. 레포지토리 생성     

bitbucket.org/idoll8984/dkbk-ui

 

2. create-react-app

생성한 레포지토리의 root에 react 프로젝트를 신규 생성

npx create-react-app my-app --template typescript
npm add node-sass

그리고 default로 생성된 css파일 확장자를 scss로 모두 변경해준다. 

 

3. cra로 생성한 프로젝트 정상 빌드 확인

npm run start

명령어 한 줄이라 문제 없이 뜰 줄 알았는데 

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

요런게 뜨면서 빌드가 안됨 ㅎㅎㅎ 찾아보니까 내가 들고 있는 sass-loader는 node-sass ^4.0.0버전을 쓰는 놈이어서 그런 것 

( 최신 sass-loader 버전은 node-sass 5.0.0 대응이 완료된 듯 : github.com/webpack-contrib/sass-loader/issues/898 )

둘 중 하나의 버전을 변경해서 맞춰주면 되는데, 나는 node-sass 버전을 낮추기로 함

npm uninstall node-sass
npm install node-sass@4.14.1
npm run start

여기까지 하면 정상 빌드 확인 완료

 

4. firebase 프로젝트 생성
console.firebase.google.com/

난 이미 만들어서 하나 있음 ㅎㅎ 

프로젝트 만들때 구글 애널리틱스 사용할거나고 물어보는데, 나는 사용하지 않음 체크함. 어떤 페이지에서 오래 머무르고, 어디서 유입했는지 관리해주는 서비스인데 나중에 프로젝트 설정에서 변경 가능함 

 

5. 생성한 firebase 프로젝트에 앱 생성

ios, 안드로이드, 웹 앱 모두 추가 가능함. 나는 웹 앱이니까 </> 요 버튼 클릭

 

5-1. 앱 닉네임 및 호스팅 설정

외부 접근 가능하도록 호스팅 설정 추가

* 과금이 걱정돼서 아래 페이지를 계속 확인하면서 옵션을 선택했다 ㅜㅜ 나는 쫄보다 ㅜㅜ

firebase.google.com/pricing

Firebase Pricing

5-2. 다음, 다음, 완료

sdk를 사용하고자 한다면 body tag 하단에 붙여넣으라고 코드 몇줄을 주는데, 나는 단순 deploy만 하고 app내에서 firebase project관련 정보를 사용할 일이 없기 때문에 안했음

 

6. 생성한 firebase 앱에 cra로 만든 샘플 프로젝트 deploy

npm install -g firebase-tools
firebase login 
firebase init --> 어떤 기능을 사용할 지 물어보는데, 나는 Hosting 옵션만 선택함
firebase deploy

 

짜잔! init 과정 및 결과

dkbk-s-webpage.web.app/

 단계를 모두 진행하고 deploy 명령어도 입력해주면 위와같은 주소를 뱉어준다 ㅎㅎ 이렇게 deploy가 완료되었다!

React App

 

 

 

 

 

 

* 개인 컴에서 typescript로 create-reac-app을 첨해봤는데,

specify jsx code generation: 'preserve', 'react', 'react-jsx', 'react-jsxdev' or'react-native'. requires typescript version 2.2 or later.

이런 에러가 났다. 찾아보니 현재 workspace와 vscode의 ts version이 달라서 난다고 하는듯. 
맥 기준 cmd + p 를 누르면 상단에 메뉴입력창이 나오는데 그냥 텍스트 입력 시 파일탐색이되고, > 를 입력한 뒤에는 명령어들을 검색할 수 있음.

요 명령을 입력하면 어느 ts버전을 사용할 지 물어보는데, workspace의 ts버전을 선택한다고 하면 위의 에러는 바로 해결된다.