絶対同じようなものがあるだろうけど、わざわざ探したり、ここが気に食わないなと思いながら使うのもだるいので、自作した。条件としては、日記を書く以外の機能がなくて、特に金がかからなくて、どこからでもアクセスできて（ローカルに限定されなくて）、できればあんまり落ちたりしなくて、保守にも開発にも手間がかからないということだ。
というわけで、firebaseとAWSのS3を使って、サーバー側のコードを書かずに作った。firebaseは認証とかちょっとしたjson保存できるリアルタイムデータベースなんかを提供してくれるMBaaS（Mobile backend as a service）で、現状はGoogle傘下になってるはず。帯域とリクエスト数とかに制限がかかってて、課金すると豪華になっていくけど、自分だけが使うシステムなら無料で余裕だ。
S3はAWSのストレージサービスで静的Webホスティングもついてて、スタティックなファイルを堅牢かつそこそこアクセスあっても問題なかったりする。たしか1GBあたりで約月3円（転送量とかで他にかかるけど、自分だけなら問題ない）。自作の適当に作ったゲーム群も全部ここに置いてある。艦隊くりっかーがねとらぼに掲載されたときとかそれなりにアクセスが集中したのだけど、特に遅延等も発生してなかったはず。ちなみに転送量はこのときは掲載から数日でコミコミで５００円くらいはかかった。
で、S3にスタティックなページを置いて、そこからfirebaseの認証とDBに接続すれば、サーバー側のコードを書かずに金もかからず使えるというわけ。firebaseは認証プロバイダとしてGoogleとかを使えて、そこから供給されたユーザーIDをfirebaseのDBのアクセス権限に設定できる。なので、自分のユーザーID以外は一切書き込みも読み込みも出来ない設定にしておけば、firebaseやGoogle側に問題がない限り、セキュリティも問題ない。
WebのフロントエンドはVue.jsとvuexを使った。この辺の説明はシンプルにできそうな感じがしないので省略する。ちなみにVue.jsには公式でfirebaseと連携するVueFireというモジュールが公開されているが、vuexを使うなら特に必要なさそうなので採用しなかった。vuexのREADMEにある通り、Actionsの中でfirebaseを呼んでその経過や結果に応じてMutations呼べば良いだけだ。
環境構築はvue-cliのwebpackテンプレートを使った。これで使うと特に何も考えなくてもホットリロード付きのローカルサーバーが上がるので楽だった。S3へのファイル転送は面倒くさいのでデプロイスクリプトを書いた。node-s3-clientでuploadDirを使うと、ディレクトリ指定すると削除ファイルはちゃんと消してバキっと上げてくれるので、これまた楽だった。
それでこんな感じになった。満足。
ちなみにpushStateを使ったURL移動をするSPAなので、リロードしたときに存在しないファイルへのリクエストが飛ぶことになる。これは普通にApacheとか使ってる場合、htaccessとかにindex.htmlへのリダイレクトを書いたりすりゃいいんだけど、S3を利用しているので、エラードキュメントにもindex.htmlを書くことで誤魔化してみた。
HTTPステータスコードが404なのでかなりアレな感じがするが、自分のものなのでまあ別に良いかなという感じ。仕事でやるなら流石にこれはアレなので、S3のホスティングを切ってCloudFrontから利用して、それのカスタムエラードキュメントを使えば好きなステータスコードを返せるのでもうちょいスマートだろう。それにこれならタダでHTTPSも使える。
＊
