Azure Static Web Apps で作る React + GraphQL なサーバレスウェブアプリケーション

開発 React

この記事で言いたいことは2つあって、

Azure Static Web Apps の開発体験が良い
TypeScript + React + GraphQL (Apollo Server, GraphQL Code Generator, React Query) の組み合わせが良い

です。

これらの技術要素を使って https://github.com/morishin/azure-static-web-apps-template というサンプルアプリを作成したので、その紹介をします。

github.com

上記の要素に加え、ビルドツールとして Vite、ルーティングに React Router、UI フレームワークに Chakra UI を利用しています。

2021-12-05

ご家庭を支える定期実行ジョブの開発フロー

AWS 開発

この記事は CAMPHOR- Advent Calendar 2021 の5日目の記事です。

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

今回は私生活でしばしば必要になって作っている家庭内タスクのリマインダーのお手軽構築スタイルを紹介します。

さて、僕は家庭内のコミュニケーションツールとして主に Slack と Snapchat を利用しています。日常会話は Slack で、子ども・猫の様子やその他日常の風景を動画で共有するのに Snapchat を使います。Snapchat は大好きなのですが今はその話は置いておいて、家庭内タスクのリマインド通知先としても Slack が最適なので色々な通知を Slack に流しています。

https://i.gyazo.com/41474ab4a448bf950cc7a5f976e5849c.png — 家庭内コミュニケーションの様子

この記事では毎週決まった時刻に締め切りのある、生協のネット注文のリマインダーを例にして構築手順を説明します。

例: 生協のネット注文のリマインダー
ブラウザで完結させる編
- 関数の作成
- Lambda レイヤーでモジュールを使い回す
- 関数の実装
- できあがり
AWS CDK 編
- ディレクトリ構成
- 実装
- デプロイ
- できあがり
おわりに

2021-02-12

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

Firebase 開発

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 になるといったつらみが生じます。