Firebase + Express + Pug로 동적 페이지를 localhost로 호스팅

　이 기사의 전제

node, npm, yarn 설치가 끝났다고 가정합니다.
아직의 사람은 이쪽의 페이지를 부디( yarn 설치 )

Firebase 계정 및 호스팅 프로젝트 생성이 완료되었다고 가정합니다.
아직의 사람은 이쪽의 페이지를 부디 ( Firebase 홈페이지 )

이 기사의 목적

기존 Express 프로젝트를 번거롭지 않고 Firebase에서 이동하고 싶습니다.

로컬 PC에서 Firebase를 테스트하는 환경을 원합니다

템플릿 엔진에 Pug를 사용하고 싶습니다

Firebase 프로젝트 준비

$ npm install --save firebase-functions@latest firebase-admin
$ npm install -g firebase-tools
$
$ mkdir 'あなたのプロジェクト用フォルダ名'
$ cd 'あなたのプロジェクト用フォルダ名'
$ firebase init

'firebase init' 뒤의 첫 번째 질문에서 'Functions'와 'Hosting'에 체크를 넣어두면, 나중의 질문은 모두 디폴트 그대로 건너뛸 수 있다.
그러면 이러한 폴더 구성이 가능합니다.

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

public직하의 index.html은 불필요하므로 삭제하고, pug파일로부터 참조하는 javascript나 image, stylesheet를 격납하기 위한 폴더를 작성했다. 기존 Express 프로젝트를 이식한다면 기존 public의 구성을 그대로 복사하면 된다.
다만, pug 파일을 저장하는 views 폴더는 functions 폴더내에 두기 때문에, 거기만 주의. 이쪽도 이식 목적이면 views 폴더 구성을 그대로 복사하면 된다.

$ rm public/index.html
$
$ mkdir public/javascript
$ mkdir public/image
$ mkdir public/stylesheet
$
$ mkdir functions/views

완성된 폴더 구성은 이런 느낌.

├── firebase.json
├── functions
│   ├── index.js
│   ├── node_modules [408 entries exceeds filelimit, not opening dir]
│   ├── package.json
│   └── views
└── public
    ├── 404.html
    ├── image
    ├── javascript
    └── stylesheet

Express 및 Pug 지원 추가

$ cd functions
$
$ yarn add express
$ yarn add pug

npm 패키지의 추가는, Functions 폴더내에서 「yarn add <추가하고 싶은 패키지명>」에서 OK.

Express 라우팅 코드 작성

functions/index.js

const functions = require("firebase-functions")
const express = require("express")
const path = require("path")

// Express Appを準備
const app = express()

// ExpressのView EngineにPUGを指定
// pugファイルを格納するフォルダ「views」を宣言
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// Expressルーティングルールの設定
// サイトルートへのリクエスト時にはindex.pugをレンダリングするように指定
app.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});


// CloudFunctionへのリクエストをExpressに引き継ぐためのコード
const api = functions.https.onRequest(app)
module.exports = {
  api
}

functions 바로 아래의 index.js를 위와 같이 다시 씁니다.
맨 아래에서 CloudFunction에 대한 요청을 Express로 이어받는 코드를 제외하고는 익숙한 Express 스타일이라고 생각합니다.
덧붙여서 module.export하고 있는 「api」는 CloudFunction 이름이므로, 좋아하는 이름을 붙여 주어도 좋다.

우선 Pug 파일

functions/views/index.pug

doctype html
html
  head
    title=  title
  body
    | Express on Firebase with PUG view engineの世界へようこそ

index.pug를 만들고 방금 만든 views 폴더에 넣어 둡니다.

정적 호스팅에 대한 요청을 CloudFunction에 보내기

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    //rewriteプロパティを追加する
    "rewrites": [ {
      "source": "**", "function": "api"
    } ]
  }
}

자동으로 생성된 firebase.json에 rewrite 속성을 추가합니다.
rewrite는 정적 호스팅을 향한 요청을 index.js에서 만든 CloudFunction에 전달하기 위해 설명합니다.

Firebase 서버를 로컬로 시작

$ firebase login
$
$ firebase use --add
$
$ firebase serve

firebase login으로 로그인 페이지로 건너뛰기 때문에 거기에서 로그인해 둔다.
firebase use --add라고 하면, 미리 작성해 둔 호스팅 프로젝트명이 표시되므로, 그것을 선택한다. (여기서 선택한 내용은 .firebaserc에 자동으로 기록되므로 관심이 있는 사람은 확인을)
마지막 firebase serve에서 로컬 서버가 시작됨

$ === 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 v7.2.0 but Google Cloud Functions only supports v6.11.5.
$ ✔  functions: api: http://localhost:5001/<あなたのプロジェクト名>/us-central1/api

Firebase가 지원하는 버전과 다른 nodejs가 로컬에서 동작하고 있다고 warning이 나오므로, 신경이 쓰이는 사람은 Firebase용으로 낡은 nodejs를 인스톨 해, 전환해 사용하면 좋다고 생각한다.

브라우저에서 액세스

브라우저에서 액세스하면 이런 느낌이다.

요약

Firebase에서는, Express나 PEG를 포함한 동적 컨텐츠의 루트는 functions 폴더가 되고, 정적 컨텐츠의 루트는 public가 된다.
즉 서버측은 functions 폴더내, 클라이언트측의 스타일 시트나 JavaScript, 이미지 파일등은 public 폴더내에서 붐비는 만들기가 되고 있다. 거기조차 억제해 버리면, 이번 조합 이외에서도 간단하게 짜넣어 버리는 것 같다.