Category: remix

Cloudflare remix Stripe Supabase サイト制作覚書

10年続いているHeadless WordPressサイトのフロントをリニューアルしたので振り返り

. 今回のリニューアルでは、インフラ環境やフレームワークの変更など、大幅な刷新が行われました。WordPressをHeadless WordPressとして利用しているため、一般的なWordPressサイトと異なる点に注意が必要です。SaaSを組み合わせた複数のサービス構成に変更し、生成系AIやStripeなど新たなサービスも導入されました。技術選定ではRemixに置き換えたり、Clerkに認証系を変更するなど、サービスの導入や切り替えが行われました。今後は生成系AIの改善や広告管理、キャッシュコントロールの調整などが課題として挙げられます。.

Published at: 2024/09/29

JavaScript React remix

RemixのLayoutではuseRouteLoaderDataを使おう

Remixでloaderの情報を使う際、useLoaderDataよりも他のフックを利用するケースもある。LayoutコンポーネントでClerkの認証情報を使用しようとした際に、HTTP404エラーがHTTP500エラーに変わる現象が起きた。ErrorBoundary周りを調査し、useRouteLoaderDataを使うことで問題が解決した。エラーが発生する原因はloaderの情報が正しく取得できないこと。useLoaderDataとuseRouteLoaderDataを使い分けることが重要。

Published at: 2024/09/23

React remix SaaS / FaaS Supabase

Remixで@supabase/ssrを使ったログイン処理を実装する

サーバー側の処理を利用して、Supabaseのログイン処理をRemixに実装する方法についてまとめました。 @supabase/ssrを使うことで、Cloudflare Pages上でクライアントを作成し、Cookieに関する処理を行います。ログイン処理後は、作成したクライアントを使用してCookieに情報を設定し、ログイン画面から移動できるようにします。さらに、参考資料に従い、ログイン処理を実装します。

Published at: 2024/09/18

Cloudflare remix SaaS / FaaS

Cloudflare PagesでRemixアプリを公開する場合、環境変数を.envと.dev.varsで管理できる

この記事では、CloudflareにRemixアプリをデプロイする際の環境変数の取り扱い方を紹介しています。開発時やビルド時には.envファイルを使用し、Cloudflare向けには.dev.varsファイルを利用します。公開可能な値は.envに、秘匿すべき値は.dev.varsに設定することで、セキュリティリスクを軽減できます。異なる環境用に設定する場合、.envファイルを分けて管理し、.dev.varsでCloudflare Pagesの環境変数を設定することがポイントです。

Published at: 2024/09/17

JavaScript React remix SaaS / FaaS Supabase

Supabaseのログアウト処理で、Remixのloaderを再読み込みする方法

RemixアプリにSupabase Authのログアウト処理を組み合わせる際の方法を紹介。ログアウト後はuseNavigate()でページ遷移し、「Sign out」ボタンをクリックするとログアウトと同時にリダイレクトされる。再読み込みや状態更新後のリダイレクトも実装可能。ログアウト時に取得した情報を破棄するために使われる。Loader処理を再実行したい時はuseRevalidatorを利用。 Reminx APIを使うことを推奨。

Published at: 2024/09/13

Cloudflare remix

RemixアプリをCloudflare Pagesにデプロイしてみた

Remixを使用してCloudflare Pagesにデプロイを試みた結果、CLIツールを利用すると簡単にデプロイが完了した。セットアップ方法やフレームワークによっては調整が必要だが、CLIツールであれば対話形式でプロジェクトを作成し、デプロイまでがスムーズに行える。今後は、Next.jsなどでもCLIツールから立ち上げることで効率的に設定できる可能性が高い。最新版以外のフレームワークもあるため、「設定値だけ参照する」方法も検討すると良い。

Published at: 2024/08/09

Cloudflare JavaScript React remix SaaS / FaaS

RemixアプリをCloudflare Pagesへデプロイする際は、ライブラリ名に注意

Remixアプリ開発でCloudflare Pagesへデプロイ時に発生した”Could not resolve”エラーの対策をまとめました。ライブラリのインポート元を@remix-run/cloudflareに変更し、Node.js環境依存エラーを解消できました。Remixではライブラリの選択に注意し、プロキシーファイルを作成することで環境別のライブラリインポートも検討できます。

Published at: 2024/08/08

JavaScript Prisma / TypeORM React remix

RemixでPrismaを後から追加する

Remixプロジェクトで、セットアップ時にPrismaが入っていないケースがある様子でした。たぶん、テンプレート次第なのかもしれません。必要なライブラリを追加する「やっぱりPrisma入れたい」となった場合、ライブ […]

Published at: 2023/03/25

0b25f16917cf7cc3025b897a6f7f13dd-20230206232508

JavaScript React remix

ローカル環境にRemixでアプリをセットアップしてみた覚書

Cloudflareなど、エッジコンピューティングがいよいよアツくなってきそうなこの頃。いつまでも後回しにできないなと思ったので、Remixをとりあえず動かしてみました。 RemixアプリをセットアップまずはCLIで […]

Published at: 2023/03/20

6d84c762b987be45eac3d85d0999fa43-20230309003208

Cloudflare JavaScript React remix SaaS / FaaS

Remixアプリを、wranglerでCloudflare Pagesへデプロイする方法と環境変数を利用したNodeのバージョン制御

Shopifyが買収したことでも話題になったRemix。エッジホスティングとHeadless Commerceの組み合わせは、個人的にアツいなと思ったので、両者の勉強がてら触ってみました。 npx create-rem […]

Published at: 2023/03/10