입문

Firebase의 관리, 좋습니다.정적 내용은 말할 것도 없이 Node라니.심지어 js의 동적 내용을 위탁 관리할 수 있다.개발할 때나 작은 서비스라면 사실상 무료다.
이해를 위해 우리는 정적 내용과 동적 내용을 위탁 관리하는 가장 짧은 경로를 보게 될 것이다.
참고로 정태적인 내용만 있으면 아래의 공식 안내서를 참조하면 된다.
https://firebase.google.com/docs/hosting/quickstart?hl=ja

준비

Node.js와 npm를 설치하십시오.
https://nodejs.org/en/
이 글은 8.10.0 LTS로 검증되었습니다.

Firebase 프로젝트를 준비하십시오.

수중에 있는 컴퓨터에서 작업용 폴더를 만드십시오.

Firebase CLI를 설치하십시오.

$ npm install -g firebase-tools

Firebase 계정과 연결하십시오.

$ firebase login

애플리케이션 초기화

$ cd ＜作業用のフォルダ＞
$ firebase init

화면은 아래와 같다.호스트와 함수를 선택하십시오.

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

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

  ＜作業用のフォルダ＞

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. 
 ◯ 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

너는 답을 찾기 위해 약간의 선택을 할 것이다.아래와 같은 대답으로 나는 네가 말할 것을 건의한다.

? Select a default Firebase project for this directory: ＜Firebase のプロジェクト名＞
? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
? Do you want to install dependencies with npm now? Yes

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

작업이 완료되면 작업 폴더의 구조는 다음과 같습니다.

.
├── firebase.json
├── functions
│   ├── index.js
│   ├── node_modules
│   ├── package-lock.json
│   └── package.json
└── public
    ├── 404.html
    └── index.html

public 폴더는 정적 내용을 포함하는 폴더이고,functions는 동적 내용을 포함하는 폴더입니다.작업 폴더가 빈 상태에서 시작되면 Firebase-cli는 가상 내용을 포함해야 합니다.
functions/index.js는 아무것도 하지 않는 코드이기 때문에 편집기에서 열고 댓글을 빼고 다음 코드를 만드세요.

const functions = require('firebase-functions');
exports.helloWorld = functions.https.onRequest((request, response) => {
 response.send("Hello from Firebase!");
})

로컬 확인

Firebase는 로컬 시뮬레이션 기능을 가지고 있기 때문에 이때 확인해 보세요.

정적 내용

$ firebase serve

=== Serving from '＜作業用のフォルダ＞'...

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

http://localhost:5000 아래와 같습니다.

5000번 포트에서 정적 컨텐츠가 관리됩니다.

동적 내용

$ firebase serve --only functions

=== Serving from '＜作業用のフォルダ＞'...

i  functions: Preparing to emulate functions.
Warning: You're using Node.js v8.10.0 but Google Cloud Functions only supports v6.11.5.
✔  functions: helloWorld: http://localhost:5000/＜Firebase のプロジェクト名＞/us-central1/helloWorld

http://localhost:5000/＜Firebase 프로젝트 이름 >/us-central1/helloWorld는 다음과 같습니다.

동적 컨텐츠는 5000번 포트에서 관리됩니다.

index.js에서 export, exports를 진행합니다.URL에 HelloWorld라는 이름이 나타납니다.

Node.js의 버전이 너무 높아서 이런 경고를 보냈습니다.마음에 드는 사람은 v6.11.5로 Node를 진행한다.

혼합

$ firebase serve --only hosting,functions

=== Serving from '＜作業用のフォルダ＞'...

i  functions: Preparing to emulate functions.
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000

Warning: You're using Node.js v8.10.0 but Google Cloud Functions only supports v6.11.5.
✔  functions: helloWorld: http://localhost:5001/＜Firebase のプロジェクト名＞/us-central1/helloWorld

5000 포트에는 정적 컨텐트가 로드되고 5001 포트에는 동적 컨텐트가 로드됩니다.

배치

로컬에서 확인했을 때와 살짝 다른 옵션입니다!

본토

정적 컨텐츠 없음

동적 내용 - only functions

혼합-onlyhosting,functions

배치

정적 내용 - only hosting

동적 내용 - only functions

혼합 없음

$ firebase deploy 

=== Deploying to '＜Firebase のプロジェクト名＞'...

i  deploying functions, hosting
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (31.21 KB) for uploading
✔  functions: functions folder uploaded successfully
i  hosting: preparing public directory for upload...
✔  hosting: 2 files uploaded successfully
i  functions: updating function helloWorld...
✔  functions[helloWorld]: Successful update operation. 
Function URL (helloWorld): https://us-central1-＜Firebase のプロジェクト名＞.cloudfunctions.net/helloWorld

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/＜Firebase のプロジェクト名＞/overview
Hosting URL: https://＜Firebase のプロジェクト名＞.firebaseapp.com

다음 주소로 관리됩니다.
정적 내용은 https:/입니다.firebaseapp.com
동적 내용은 https://us-central1-＜Firebase 의 항목 이름입니다.cloudfunctions.net/helloWorld

마지막

여기까지 오면 퍼블릭과functions 폴더에 필요한 것을 자유롭게 넣을 수 있습니다.
익스프레스 등 중간 부분 등이 필요하다면 조금 더 깊이 들어가고 싶다면 이 문장 본가의 영상을 설명해 주기 때문에 이것도 참조할 수 있다.
그럼 안녕히 계세요.