Firebase Hostingのリライトをローカルでエミュレートするプロキシ

Firebase Hosting にはリライトという機能があって、設定ファイル(firebase.json)を書くことで例えば

• 全てのパスを /index.html へ向ける (SPA などで使う)
• /items/1234 へのリクエストを /items/id.html へ向ける
• /api/get_item へのリクエストを Cloud Functions の get_item 関数の HTTP トリガへ向ける

といったことが実現できます。

また cleanUrls 属性を使用することで URL から .html 拡張子を取り除くことができます。/page へのアクセスは Hosting にアップロードされた /page.html のファイルを取得するようになり、/page.html へのアクセスは /page へ 301 リダイレクトされるようになります。

これらの挙動はシュッとしたウェブアプリを作るためには大変便利でよく利用しますが、Firebase 本番環境へデプロイされたアプリケーションでしか効きません。本番環境では /items/1234 は /item/id.html を返してくれるけど開発環境では /item/1234 は 404 になるといったつらみが生じます。

firebase hosting の rewrite を開発環境でもやってくれるプロキシ君が要るな...

— morishin (@morishin127) November 22, 2020

rewriteproxy

そこで開発環境でもリライトと cleanUrls の挙動を再現してくれるプロキシを作りました。お手元の firebase.json を読み込んで動作します。

リポジトリはこちら。

github.com

開発で使ってる便利ツール

この記事は CAMPHOR- Advent Calendar 2020 の23日目の記事です。22日目は れおまる さんの「ニキシー管の魅力 」でした。ニッチ！！！！(賞賛)

CAMPHOR- Advent Calendar には初回の2014年から参加していて7度目の参加になります。

今回は普段の開発で便利に使っている周辺ツールを紹介します。他人の開発風景を見ていると色んな発見があって面白いので、自分の環境もコンテンツになるかもと思って書きました。他の人の記事も見てみたいのでよかったらみんな書いて。

※macOS を普段使いしているので macOS 用のアプリケーションも多く含みます。

React Hooks の感想

React Hooks は最初は何が嬉しくてこんな書き方をしないといけないのか訳がわからなかったけど、しばらく使ってみた実感として大きなメリットは2つで

• クラスを使わなくて良くなる
• コンポーネントのステートやライフサイクルに結合していた処理を Hooks 関数の形で切り出して、複数のコンポーネントで使い回せるようになる

と理解した。

Quill というスニペット補完ツールを作りました

目次

これ👇

quill.morishin.me

デモ

#zoom-nomikai

この記事は CAMPHOR- Advent Calendar 2019 の8日目の記事です。7日目は @asamas さんの「スプラトゥーン2の戦績データを取得する+おまけ」でした。

CAMPHOR- Advent Calendar には2014年から参加していて6度目の参加になります。今日は CAMPHOR- というコミュニティの Slack にある #zoom-nomikai チャンネルの話をします。

Rails + MiniMagick の開発環境で ImageMagick を Docker コンテナに切り離す

3行

• Rails アプリの開発において、手元の開発環境では Rails アプリのみをホストマシン上で実行、MySQL や Redis などのミドルウェア類は Docker コンテナ (Docker for Mac) 上で実行するという構成が好き
• Rails アプリで MiniMagick を使おうとすると Rails アプリを実行している環境に ImageMagick をインストールする必要があるが、開発するアプリケーションによって利用したいバージョンが異なるかもしれないし、開発者の OS によってインストールの手順も異なったりするし、そもそもローカルマシンの環境を汚したくない
• ImageMagick をインストールした Docker コンテナを用意し、MiniMagick gem からそれを利用させるようにした

Stripe と Firebase で集金ページを作る

この記事は CAMPHOR- Advent Calendar 2018 17日目の記事です。

morishin です。今月イベントを主催して参加費を集金する機会があったのですが、当日会場で受付を用意して集金する手間を省くために、参加者には事前決済をお願いしました。そこで決済手数料や出金手数料、また参加者の支払いにかかる手間の少ない手段を検討し、Stripe と Firebase で集金ページを作成し、そこからクレジットカードで決済してもらうという形を取りました。この記事ではその集金ページの作り方を紹介したいと思います。

リポジトリはこちらです。Firebase と Stripe のアカウントを用意して README の手順を踏めばどなたでも集金ページを立ち上げることができます。

github.com

【目次】