Firebase HostingでMarkdownで書いたファイルをHTMLとして公開する

こんにちは。趣味グラマのNobuです。

アプリに掲載するプライバシーポリシーや利用規約は、追加や修正を気軽に行えるようWebページとして管理する事が多いのですが、今までは適当なWordPressの固定ページを使ったり、APIサーバとして動かしているRailsにそれ用のページを用意する形で対応していました。

しかし、アプリと無関係のWordPressを使うのは何か違和感ありますし、APIサーバのRailsにHTMLを置くと言うのも、やっぱり何か違和感があります。
そこで何か良い方法は無いものかと考えた結果、アプリに組み込むAdmobで毎回Firebaseを使っているので、FirebaseのHostingを使う事にしました。

まずはHostingを使えるようにする
MarkdownをHTMLとして公開出来るようにする
まとめ

まずはHostingを使えるようにする

Hostingを使えるようにするのはいたって簡単。
Firebaseのドキュメント通りにするだけです。

Firebase Hosting を使ってみる

ちなみに、firebase loginでAlready〜って出るのに、firebase initすると「Error: HTTP Error: 401, Request had invalid authentication credentials.〜」みたいになる時は、「firebase login -reauth」をすればOK。#firebase #エンジニア
— Nobu@趣味グラマ (@nm_aru) May 30, 2019

MarkdownをHTMLとして公開出来るようにする

Hostingは基本的に静的ファイル(HTML、画像、JavaScript)の配信を行うため、HTMLを編集しないといけません。
これが非常に面倒くさい。今どき、素のHTMLを書くなんて苦痛すぎる。
という訳で、コンテンツはMarkdownで書いて、公開時にHTMLに変換してアップロードされるようにしましょう。

Pandocのインストール

MarkdownからHTMLへの変換はPandocを使います。

Pandoc - Installing pandoc

Macなので、brewでインストールします。

brew install pandoc

Markdown用、HTML用のディレクトリを用意

firebase/
 ├ dist/ ・・・変換後のHTMLが格納されるディレクトリ
 ├ src/  ・・・変換前のMarkdownを格納するディレクトリ
 ├ firebase.json
 └ predeploy.sh (後述)

srcディレクトリの中に、Markdownのファイルを置きます。
今回で言えばプライバシーポリシーをMarkdownで書いたので、以下のようになります。

firebase/
 ├ dist/
 ├ src/
 │  └ privacy.md 
 ├ firebase.json
 └ predeploy.sh (後述)

PandocでMarkdownからHTMLに変換出来るか試す

ここまで用意が出来たら、一度PandocでMarkdownをHTMLに変換出来るか試してみましょう。

pandoc src/privacy.md -s -o dist/privacy.html --metadata pagetitle="privacy"

オプションの意味は以下の通りです。

-s　standaloneモードの略。<html>とか<head>とか<body>とか、HTMLとして一通り完成したファイルを出力してくれます。逆にこれをつけないと、<body>タグとかが無い、一部だけのHTMLが出力されるので、CMS等に組み込む時等は、-sをつけると良いかもしれません。
-o　出力先のファイル名や場所を指定します。
–metadeta pagetitle　HTMLのtitleタグの中身を指定します。

オプションは色々あるので、困った時はドキュメントを見てみましょう。

Redirecting…

変換後のファイルは、Macの場合は同じディレクトリで

open dist/privacy.html

とやれば、ブラウザが立ち上がって確認できます。
Mac以外でも、distディレクトリ内の対象HTMLを開けば確認できます。

Hostingにdeployする時に自動的にMarkdown→HTMLを実行する

ここまででMarkdownをHTMLに変換する事はできるようになりましたが、毎回これを自分でやるのは嫌ですね。嫌です。

という訳で、firebase deploy時に自動的にMarkdown→HTMLに変換してuploadされるようにしましょう。

やる事は簡単で

Markdown→HTMLを実行するシェルスクリプトを作成する
firebase deploy時に1のシェルスクリプトが呼び出されるよう設定する

の2つだけです。

早速1つ目のシェルスクリプトですが、以下のような物を作りました。
ディレクトリ説明の時に出てきた「predeploy.sh」です。

#!/bin/sh

SRC_DIR='src'
DST_DIR='dist'

for i in ${SRC_DIR}/*.md
do
  FILE_NAME=`basename ${i%.md}`
  pandoc ${i} -s -o ${DST_DIR}/${FILE_NAME}.html --metadata pagetitle="${FILE_NAME}"
done

exit 0

そして、firebase.jsonに上記のシェルスクリプトが呼び出されるよう設定します。

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "predeploy.sh", // デプロイから外す
      "**/.*",
      "**/node_modules/**",
      "src/**" // デプロイから外す
    ],
    "predeploy": "./predeploy.sh" // シェルスクリプトを呼び出す設定
  }
}

firebase.jsonでは、デプロイ前だけではなく、デプロイ後に行って欲しい処理なども書けるので、詳しく知りたい場合はドキュメントを見ましょう。

Firebase CLI reference | Firebase Documentation

まとめ

Hostingを使ってみただけですが、Firebaseは超便利でした！
何よりも、これが無料で使えるというのが個人開発者にとってはありがたすぎる。

これからもFirebaseにはお世話になっていこうと思います。