最近静的サイトをホスティングするサービス(netlify、now etc...)が増えていますが、AWSにもAmplify Consoleというホスティングできるサービスがあることを知りました。ざっとドキュメントを読んだ感じ、非常に簡単に扱えそうなので、Reactアプリケーション…

ReactのクライアントレンダリングでOGPに対応させるときに、react-snapが簡単に導入できて便利です。しかし、build時にPuppeteerが走るので、CircleCiでビルドするときはあらかじめ設定が必要です。 以下個人的なconfigファイルの設定。Firebaseにデプロイす…

GCPを使うためにローカルにCloud SDKを入れる必要があります。今まで何度かやっていますが、毎回インストール方法を忘れてしまうので、メモです。

インフラのコード化はDevOps界隈では常識で、インフラをコード化することによって、各環境で設定を使い回すことができるメリットがあります。現在一番有名なInfrastructure as Code(IaC)を実現するツールはterraformですが、個人的にpulumiも気になっていた…

firebaseでサービスを作るときに多くの場合twitterやgoogleなどのOAuthを使って、認証を作ると思います。その際にソーシャルの情報(例えばユーザーネームだったり説明文だったり)をそのままサービスに使いまわしたい時があります。それを実現するためにはfir…

Reactで外部サービスの連携で扱う方法をメモ書きしておきます。特にGoogle AnalyticsはWEBサービスを立ち上げる際に必須の設定となっています。しかし、ReactはSPAなので、普通の設定ではページごとのアクセスを記録することができません。その他にもでSentr…

こんにちはかみむらです。去年、Firestoreを少し触って、理解した気になっていました。しかし、今年に入って個人開発でFirestoreを使おうとしたところ、だいぶ忘れていました。なので、とりあえずリンク漁って、ためになりそうなFirestoreのリンクを集めまし…

storybookはコンポーネントを作るライブラリで、特にデザイナーとエンジニアとのデザインコミュニケーションの手段として最適です。今回はstorybookでatomic designを管理するための構成を作成していきます。

決済処理をフルスクラッチで書く場合非常に大変な作業になってしまいます。そこでReactで決済処理を行いたいならstripeが便利です。今回はhooksやTypeScriptといったモダンな技術を使いつつstripeの決済処理を実装していきます。予めstripeのアカウントを作…