Hugo を firebase にホスティングして firebase/app を import する

Hugo firebase

はじめに

これまで Hugo で webpackの導入 と typescript の導入 をまとめました。
aws amplify か firebase か迷うところですが今回は firebase にホスティングして firebase/app を import する方法をまとめます。

Hugo を firebase にホスティング

firebase のツールセットをインストールします。
Firestore や Functions も利用する前提でインストールしておきます。

$ npm install -g firebase-tools
$ firebase login
$ firebase init
? Which Firebase CLI features do you want to set up for this folder? Press Space to select fea
tures, 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
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: hugo-firebase
? What file should be used for Firestore Rules? firestore.rules
? What file should be used for Firestore indexes? firestore.indexes.json
? What language would you like to use to write Cloud Functions? TypeScript
? Do you want to use TSLint to catch probable bugs and enforce style? Yes
✔  Wrote functions/package.json
✔  Wrote functions/tslint.json
✔  Wrote functions/tsconfig.json
✔  Wrote functions/src/index.ts
✔  Wrote functions/.gitignore
? 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
✔  Wrote public/404.html
✔  Wrote public/index.html
? What file should be used for Storage Rules? storage.rules
i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

Hugo を firebase にホスティングする

この時点で Firebase にホスティングができます。
package.json の scripts に deploy として npm run build && firebase deploy と記載します。

...
  "scripts": {
    "start": "run-p start:**",
    "start:hugo": "hugo server -t example -w --environment dev",
    "start:webpack": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run build:webpack && npm run build:hugo",
    "build:webpack": "webpack",
    "build:hugo": "hugo -t example --minify --environment production",
    "deploy": "npm run build && firebase deploy"
  },
...

以下のコマンドで deploy ができるようになります。

$ npm run deploy

Hugo を firebase 機能を使う

firebase をインストールします。

$ npm install --save firebase

node_modules から import するので tsconfig.json に "moduleResolution": "node" を追加する必要があります。

{
  "compileOnSave": false,
  "compilerOptions": {
    "sourceMap": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "module": "es2015"
  }
}

上記設定が完了すると typescript から以下のようにインポートすることができます。

import * as firebase from 'firebase/app';
import 'firebase/auth';

まとめ

Hugo を firebase にホスティングする方法をまとめました。