個人的Remix開発環境2024（デプロイ先もあるよ！）

はじめに

今年も残すところ 2 週間ほどとなりました！

今年も個人開発で Remix を使ってアプリを作っては途中で飽きてやめるを繰り返していました。。。

来年こそはアプリを作りきってリリースし、使ってもらえるよう頑張りたいです！

Remix でアプリを立ち上げる中で、自分の中で構成がある程度決まってきたので、それを記事にしたいと思います！

Docker

Dockerは、アプリケーションを素早く構築、テスト、デプロイできるソフトウェアプラットフォームです。
他に詳しく解説しているページがたくさんあるので説明は省きますが、Node.js&Typescript のコンテナを立ち上げてその中で開発しています。

devcontainer

devcontainerは Visual Studio Code（以下 VSCode）の拡張機能の一種です。
VSCode が開発環境として利用する Docker コンテナを作成してくれます。
コンテナ作成時に特定のコマンドを実行させたり、コンテナ作成時に拡張機能もインストールしてくれたり、あらかじめ決めておきたい設定を定義できたりします。

本来はチームでの開発で「個人の PC の環境のせいで環境構築がうまくいかない」「設定がバラバラだったり拡張機能がバラバラでコードの一貫性が保てない」というような状況を解消するために使うと思います。

個人開発だと、万が一そのコンテナを削除することになってもすぐに同じような設定のコンテナを作成できるので便利かなと思い採用しています。

Remix

Remixは React ベースのフルスタックフレームワークです。

私は特にFull Stack Data Flowという点に惹かれて使っています。これのおかげでデータの流れが非常に分かりやすくなりました。
また、Web の標準 API を尊重しているので、他のフレームワークを使う時にも応用が効くかなとも思いました。

Biome

Biomeは linter&Formatter として利用しています。
Rust ベースで書かれているので動作が速いので使っています。
また、Prettier との互換性も 97%あるとのことなので、「Biome に移行しても問題ないかな」と思いました。

Remix において、Prettier&ESLint から Biome への移行はこちらで書いていますので、よければご覧ください！🙇‍♂️

https://zenn.dev/kyrice2525/articles/article_tech_020

Conform

conformはフォームライブラリです。
Remix Resourcesを眺めていた時に目に入り、使用感が良かったので今も使っています。
conform のチュートリアルが Remix 前提で書かれている、conform の Docs が日本語対応している、という点も後押しになりました。
react-hook-formも検討しましたが、Docs が日本語対応していないので採用しませんでした。
また、react-hook-form を業務で使っていて知見はある程度あったので、新しいものを学ぶ意味も込めて conform を使いました。

Zod

Zodはバリデーションライブラリです。
conform のチュートリアルで Zod が使われていたのでそのまま採用しました。

remix-auth,remix-auth-form

remix-auth、remix-auth-formは Remix および React Router 用の認証ライブラリです。
素早く認証機能を実装するならFirebase AuthenticationやAmazon Cognitoがいいと思いますが、認証機能を作るのを学ぶためにあえて使いませんでした。
といっても認証機能を作るのは大変なので、今後は上記のものを使うかもしれません。。

Tailwind CSS

Tailwind CSSは CSS フレームワークです。
Remix のプロジェクトを作成すると、Tailwind CSS がインストールされた状態になります。
最初は使いづらく感じたため、Material UIやYamada UIなどを試しましたが、「少しレイアウトを変えたいときに変えられない」「意図しないところでエラーが出る」などがあったため、Tailwind CSS に戻ってきました。（エラーについては自分の力量不足も多分にあると思います）
Tailwind CSS の書き方に一度慣れてしまえば、結構使いやすいフレームワークだなと感じています。
ただ、やはり 1 から class を考えていくのはしんどいので、Tailwind UIのアクセス権を購入するか悩んでいます。。

PostgreSQL

PostgreSQLはオープンソースのリレーショナルデータベース管理システム（RDBMS）です。
もはや説明不要かと思います。
後述する Fly.io が PostgreSQL のサービスを提供しているので採用しました。
Remix のアプリをデプロイするときに PostgreSQL も一緒に作ってくれるので、設定が楽になるのも理由です。

Prisma

Prismaは Node.js、TypeScript のための ORM です。
以前の Remix のチュートリアルでは Prisma を使っており、その時から採用していました（blues-stackやIndie Stackでも使われていました）。
schema.prismaでモデル定義が簡単にできるし、マイグレーション管理もできるし、便利なのでありがたいです。
後述する Fly.io とも相性がいいので引き続き使っていきたいと思います。

Fly.io

Fly.ioはアプリケーションをデプロイするためのプラットフォームです。（いわゆる PaaS）
Remix でアプリを作成してどこにデプロイをするか考えていたときに、Templates And Stacksのblues-stack内で使われているのを見て初めて知りました。
一定の無料枠もあるし、Remix をデプロイするための手順もあるし、GitHub Actionsでのデプロイ手順もあるし、使いやすそうだったので採用しました。
Remix、Prisma を使ったアプリをデプロイしようとすると、それを判断してデプロイ用 Dockerfile を作ってくれるのでありがたいです。
Sentry による監視やSupabase との統合もできるので、プラットフォーム上で色々できて助かっています。

最後に

個人的 Remix 開発環境 2024（デプロイ先もあるよ！）と題して記事を書いてきました。

Remix を使って開発をする前提でライブラリを選定しているところがあるので、他のフレームワークを使う場合は構成が大きく変わると思います。

個人的に努力した点は、devcontainer を導入することで簡単に環境構築ができるようにした点です。アプリを作っては消しを繰り返していたので、サクッと開発環境を作れるのは大事でした。

個人的に良かった点は、Fly.io を見つけられたことです。Remix 前提で考えた時に、簡単にアプリをデプロイできるし CI/CD も簡単、プラットフォーム上で監視も設定できる、と非常に便利でした。50 人ぐらいの会社のようですが、今後に期待していきたいと思います。

この記事が個人開発をされる方の助けになれば幸いです！🙏