-
Node.js에서 Firebase 사용하기 | KOSMOFront-end/개발환경 2020. 3. 11. 22:02반응형
1.명령어 툴 설치
> npm i -g firebase-tools
> firebase --version
2.파이어베이스 프로젝트 폴더 초기화
> firebase login
> firebase init hosting
3. 파이어베이스 functions 폴더 설치
> firebase init functions (처음 firebase init 할때 functions 체크 했다면 생략)
> cd functions
> npm install firebase-admin --save
> npm i express --save
> npm install consolidate --save
> npm install ejs --save
> cd ..
4. 코드 편집기를 열어서 확인 해 보면 public 폴더와 functions 폴더가 보임
- 동적 설정을 위해서는 functions 폴더가 필요 함.
- funcitons 폴더의 index.js 파일 수정
const functions = require('firebase-functions'); const express = require('express'); const app = express(); app.get('/timestamp', (request, response) => { response.send(`${Date.now()}`); }); exports.app = functions.https.onRequest(app);5. firebase.json 파일 수정
- timestamp 경로의 url과 앱의 이름이 매핑 되도록 설정.
{ "hosting": { "public": "public", "rewrites": [ { "source": "/timestamp", "function": "app" } ] } }6. 파이어베이스에 서비스할 에뮬레이터를 실행하고 로컬에서 테스트 한다.
> firebase serve --only functions,hosting *주의: functions,hosting 붙여서 작성
- 웹브라우저 주소창에 http://localhost:5000/timestamp 입력하면 결과 확인 가능.
7.파이어베이스 서버에 올리기 위해 캐쉬 설정을 추가한다.
- 서버가 원거리에 있을 경우 응답 시간이 오래 걸리는것을 해결하기 위해 캐쉬 설정을 한다.
- 사용자의 컴퓨터의 얼마나 오래 머무를지 CDN은 얼마나 오래 유지 할지를 설정.
- 결과는 서버에 접속해서 크롬 개발자 도두의 네트워크 탭에서 응답시간 확인 가능.
const functions = require('firebase-functions'); const express = require('express'); const app = express(); app.get('/timestamp', (request, response) => { response.send(`${Date.now()}`); }); app.get('/timestamp-cached', (request, response) => { response.set('Cache-Control', 'public, max-age=300, s-maxage=600'); response.send(`${Date.now()}`); }); exports.app = functions.https.onRequest(app);8. 배포하기 전에 firebase.json 수정
- redo나 rewrite를 해야 한다.
- "source" 키 값을 "**"로 쓰면 모든 경로 사용 가능
{ "hosting": { "public": "public", "rewrites": [ { "source": "**", "function": "app" } ] } }
9. 파이어베이스 서버 호스팅에 배포
> firebase deploy
- 파이어베이스 호스팅 URL을 복사해서 브라우저로 결과 확인.
10. functions 폴더 안에 실제 서비스 할 views 폴더 생성하고 index.ejs 파일 생성
- Express 뷰 엔진을 사용하기 위해 handlebars용 뷰엔진 설치
> cd functions
> npm install ejs --save
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <% //var cars = [{name:'SM5',price:3000,year:1999,company:'SAMSUNG'},{name:'SM7',price:5000,year:2013,company:'SAMSUNG'}] %> <h1>자동차 목록</h1> <table> <% for(var i in cars) { %> <tr> <td><%=cars[i].name%></td> <td><%=cars[i].price%></td> <td><%=cars[i].year%></td> <td><%=cars[i].company%></td> </tr> <% } %> </table> </body> </html>
11. index.js 파일 수정
- consolidate 엔진 생성 및 설정
const functions = require('firebase-functions'); const firebase = require('firebase-admin'); const express = require('express'); const engines = require('consolidate'); const ejs = require('ejs'); const fs = require('fs'); const app = express(); app.get('/home', (request, response) => { response.set('Cache-Control', 'public, max-age=300, s-maxage=600'); fs.readFile('./views/index.ejs', 'utf8', function(error, data) { response.writeHead(200, {'Content-Type':'text/html'}); response.end(ejs.render(data,{cars:[{name:'SM3',price:2000,year:1999,company:'SAMSUNG'},{name:'SM9',price:6000,year:2013,company:'SAMSUNG'}]})); }) }); exports.app = functions.https.onRequest(app);
12. 파이어 베이스에 서비스할 에뮬레이터를 실행하고 로컬에서 테스트 한다.
> firebase serve --only functions,hosting *주의: functions,hosting 붙여서 작성
- 웹브라우저 주소창에 http://localhost:5000/home 입력하면 결과 확인 가능.
- 초기 정적 페이지가 보이게 된다.
- 동적 페이지가 보이게 하려면 public 폴더의 index.html을 수정 해 주어야 한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> location.href="home"; </script> </body> </html>13-1. 서버에 재 배포
> firebase deploy
13-2. 배포 시 에러가 발생하면 package.js 파일을 확인하고 다시 배포한다
> npm install
> firebase deploy
{ "name": "functions", "description": "Cloud Functions for Firebase", "scripts": { "lint": "eslint .", "serve": "firebase serve --only functions", "shell": "firebase functions:shell", "start": "npm run shell", "deploy": "firebase deploy --only functions", "logs": "firebase functions:log" }, "dependencies": { "consolidate": "^0.15.1", "ejs": "^2.6.1", "express": "^4.16.3", "firebase-admin": "~5.13.0", "firebase-functions": "^2.0.0", "handlebars": "^4.0.11" }, "devDependencies": { "eslint": "^4.12.0", "eslint-plugin-promise": "^3.6.0" }, "private": true }반응형'Front-end > 개발환경' 카테고리의 다른 글
로더 - 웹팩(Webpack) 기본편 | 김정환 (0) 2020.06.04 엔트리/아웃풋 - 웹팩(Webpack) 기본편 | 김정환 (0) 2020.06.02 웹팩이 필요한 이유와 기본 동작 - 웹팩(Webpack) 기본편 | 김정환 (0) 2020.03.19 프로젝트 생성 -NPM | 김정환 (0) 2020.03.10 Node.js 프로그래밍 | KOSMO (0) 2020.03.04