[구름 IDE] firebase에서 react와 express로 hosting 해보기 - 1

구름 IDE를 활용해서 firebase hosting을 해보려 합니다.

react로 프론트, nodejs, express를 백엔드로 사용할 예정입니다.

 

저는 개발자가 아니라 많이 서툴지만 삽질하면서 해볼 예정이고,

삽질하는 과정도 올려보려고 합니다.

 

---

 

node를 사용하려면 google cloud function을 사용해야하고,

google cloud function은 nodejs 8 버전을 지원 합니다.

 

하지만 구름 IDE에서 node프로젝트를 선택하면 기본 10버전으로 설치되어 있습니다.

따라서, google cloud function을 사용하기 위해서는 nodejs 버전을 8로 낮춰줘야 합니다.

 

node를 설치한 후 firebase에서 hosting을 어떻게 할 수 있는지,

구름 위에서 설정 후 실행 확인까지 해보도록 하겠습니다.

 

 

---

 

구름에서 프로젝트 생성

 

 

 

 

---

구름 node 버전 다운그레이드 설치

 - 생성된 프로젝트 콘솔에서 다음과 같이 실행하여 node 버전을 8로 다운그레이드 합니다.

 

1. 현재 버전 확인

root@goorm:/workspace/ipick_fire# node -v
v10.15.3

 

2. node 캐쉬 삭제

root@goorm:/workspace/ipick_fire# npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.

 

3. node 버전관리 프로그램 설치

root@goorm:/workspace/ipick_fire# npm install -g n
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n

    n@5.0.2
    added 1 package from 4 contributors in 0.237s

 

4. node 8 버전 설치

root@goorm:/workspace/ipick_fire# n 8

installing : node-v8.16.0
mkdir : /usr/local/n/versions/node/8.16.0
fetch : https://nodejs.org/dist/v8.16.0/node-v8.16.0-linux-x64.tar.gz
installed : v8.16.0

 

5. node 버전이 여러개일 경우 내가 사용할 버전 선택 (8버전 선택)

root@goorm:/workspace/ipick_fire# n
installed : v8.16.0
root@goorm:/workspace/ipick_fire#

 

---

구름에 firebase 설치 하기

 - firebase 공식 사이트에 가면 node를 이용한 firebase 설치 방법을 자세하게 보실 수 있습니다.

 - 필요한 부분만 따라서 설치합니다.

 - https://firebase.google.com/docs/cli?hl=ko

 

1. firebase tool 설치

root@goorm:/workspace/ipick_fire# npm install -g firebase-tools
/usr/local/bin/firebase -> /usr/local/lib/node_modules/firebase-tools/lib/bin/firebase.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.0.7 (node_modules/firebase-tools/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.0.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x
64"})

+ firebase-tools@7.2.2
added 408 packages from 241 contributors in 15.709s

 

2. firebase login 하기

 - 명령을 실행하면 로그인할 수 있는 경로가 나옴

 - 해당 링크로 가서 로그인

 - 리다이렉트가 localhost로 되기 때문에 goorm ide 콘솔에서 해당 경로를 wget으로 호출해주면 인증 완료

root@goorm:/workspace/ipick_fire# firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? No

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A
%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fa
uth%2Fcloud-platform&response_type=code&state=145620372&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...

✔  Success! Logged in as usergmailid@gmail.com​

root@goorm:/workspace/ipick_fire# wget "http://localhost:9005/?state=145620372&code=4/nQETFCg1RRWYUvm5iKu_14O4s-APtjXzIz2kgimpLmJazuYDjXe0HE69093tPQrLm
5Zvjy1AlEgBIRN0zPk8AXo&scope=email%20https://www.googleapis.com/auth/userinfo.email%20openid%20https://www.googleapis.com/auth/cloudplatformprojects.re
adonly%20https://www.googleapis.com/auth/firebase%20https://www.googleapis.com/auth/cloud-platform&authuser=2&session_state=c6ded141cff068ac9f7697bf1ff
115ef4cca1f57..064e&prompt=consent"

 

3. firebase 콘솔에서 프로젝트 만들기

 - https://console.firebase.google.com/u/0/?hl=ko 로 접속하여 firebase 프로젝트를 생성합니다.

 

4. 구름에서 생성한 프로젝트 조회

root@goorm:/workspace/ipick_fire# firebase list
┌─────────────┬───────────────────────┬─────────────┐
│ Name        │ Project ID / Instance │ Permissions │
├─────────────┼───────────────────────┼─────────────┤
│ i-fire-test │ i-fire-test           │ Owner       │
└─────────────┴───────────────────────┴─────────────┘
root@goorm:/workspace/ipick_fire#

 

5. firebase 프로젝트 초기화

 - hosting 선택

 - 나머지는 기본 설정으로

 

root@goorm:/workspace/ipick_fire# firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /workspace/ipick_fire

Before we get started, keep in mind:

  * You are currently outside your home directory

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press  to s
elect,  to toggle all,  to invert selection)
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules



? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure
and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: i-fire-test (i-fire-test)
i  Using project i-fire-test (i-fire-test)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote public/404.html
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...


✔  Firebase initialization complete!
root@goorm:/workspace/ipick_fire#

 

6. 외부에서 접속가능 하도록 firebase 로컬에서 실행

root@goorm:/workspace/ipick_fire# firebase serve --host 0.0.0.0

=== Serving from '/workspace/ipick_fire'...

i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://0.0.0.0:5000

 

7. 실행된 로컬서버 구름 URL 로 연결

 

 

8. 연결된 구름 URL 로 접속

 

 

 

9. firebase 서버로 프로젝트 배포

root@goorm:/workspace/ipick_fire# firebase deploy

=== Deploying to 'i-fire-test'...

i  deploying hosting
i  hosting[i-fire-test]: beginning deploy...
i  hosting[i-fire-test]: found 2 files in public
✔  hosting[i-fire-test]: file upload complete
i  hosting[i-fire-test]: finalizing version... ✔  hosting[i-fire-test]: version finalized
i  hosting[i-fire-test]: releasing new version...
✔  hosting[i-fire-test]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/i-fire-test/overview
Hosting URL: https://i-fire-test.firebaseapp.com

 

10. firebase 서버에서 접속 확인

 

 

 

---

구름 ide 에서 index.html 수정 및 반영 확인 해보기

 

1. 로컬에서 서버 실행

root@goorm:/workspace/ipick_fire# firebase serve --host 0.0.0.0

=== Serving from '/workspace/ipick_fire'...

i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://0.0.0.0:5000

 

2. 구름에서 public/index.html  수정하기

 

 

3. 반영확인

 

 

4. firebase 서버로 배포 및 반영 확인