サイトを Amazon S3 から Firebase に移行した

このサイトを Amazon S3 から Google の Firebase に移行した話．移行の理由や変更した箇所など．なお移行は簡単だった．

移行の理由

Amazon S3 から移行した理由は次の2つ．

Apex ドメインで HTTPS を利用できるから．
利用料金が安い．

CloudFront で HTTPS を利用する場合，ホストに CNAME レコードを設定する必要があるが， Apex ドメインは CNAME レコードが設定できないという問題があった．そこで VPS で 301 リダイレクトしていたのだが，リダイレクトのためだけにサーバ管理するのは違う気がしていて，代替案を探していたところ Firebase というサービスを発見した．

Firebase は現在（2016年9月）いくつかの料金プランがあるが静的サイトホスティングで1GBのストレージと10GBの転送量ならば無料で使用できる（SPARKというプラン）．このサイトには十分．

Firebase とは何か

Web/iOS/Android アプリケーションを作成するためのツールやインフラがひとまとまりになったクラウド系のサービスのようだ．簡単にチャットアプリなどのリアルタイム同期が必要なアプリケーションが作成できるらしい．

ただ，ここで重要なことは静的サイトをホスティングできて独自ドメインを HTTPS でサーバレスに提供できるということ．ファイルは CDN を介して配布されるようだ．

静的サイトのホスティング

公式ドキュメント Firebase Hosting に従えば簡単に使用できる．

変更した箇所

HTTPのヘッダを firebas.json を編集することでカスタマイズできる．ひとまずキャッシュ期間を1時間から1日に延長し，フレームでの表示を不許可に設定した．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


"hosting": {
    "public": "public",
    "headers": [ {
        "source" : "**",
        "headers" : [ {
            "key" : "Cache-Control",
            "value" : "max-age=86400"
        }, {
            "key" : "X-Frame-Options",
            "value" : "DENY"
        } ]
    } ]
}

（補足） Windows での nodejs について

msys2 の mingw-w64-x86_64-nodejs では期待通りに動作しないことがあったので https://nodejs.org/ からインストールした．また， mintty から firebase-cli を実行すると対話動作での選択が効かなかったので cmd.exe から実行した．

wercker との連携

git push した際に自動でデプロイできるように設定した（参考 Automate your Firebase deploy with Wercker ）．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


deploy:
  box: node:4.5
  steps:
    - script:
        name: install firebase cli
        code: |
                    npm install -g firebase-tools
    - devillex/[email protected]:
        project: $FIREBASE_PROJECT_NAME
        token: $FIREBASE_TOKEN

2つの変数 FIREBASE_PROJECT_NAME と FIREBASE_TOKEN は wercker の Web UI の Enviroment から定義する．

テーマの更新

フォークして，ちょこちょこ修正した．

シンタックスハイライトを highlightjs から pygments に変更した．生成時にハイライト処理が実行されるのでサイトが軽くなると思い変更した．そのため config.toml に次を追加した．

1
2


PygmentsCodeFences = "true"
pygmentsstyle = "default"

通常だと shortcode の highlight で囲まれた部分だけが pygments で処理されるが PygmentsCodeFences を指定することでシングルクォート3つで囲まれた部分も pygments で処理される．また pygmentsstyle で使用するスタイルを設定する．何も指定しないと monokai のスタイルでハイライトが処理される．

msys2 の場合 pygments がインストールされていなので，次のコマンドでインストールする．

1

pacman -S mingw-w64-x86_64-python3-pygments

また，サイトを軽くするため config.toml の disqusShortname をコメントアウトした．

コンテンツ