Remixに新機能「Remix Stacks」が追加されました

はじめに

こんにちは CX事業本部MAD事業部の森茂です。

2021/3/18 未明、Remixに「Remix Stacks」と呼ばれる新機能が追加されました。

Remix StacksはRemixチームが推奨する技術スタックを用いたプロダクションレディなテンプレートを簡単にセットアップできる機能です。また、これにあわせてCreate React AppのCustom TemplatesやNext.jsの--example-pathのようにGitHubリポジトリにあらかじめ用意したテンプレートを利用することもできるようになりました。

Remix Stacks

公式ドキュメントによると、Remix Stacksには以下のような技術スタックがセットアップされます。

• Database
• Automatic deployment pipelines
• Authentication
• Testing
• Linting/Formatting/TypeScript

今回のリリースでは下記3つのテンプレートとなるスタックが利用できるようになりました。3つスタックはデプロイ環境がFly.ioとAWSに限定されていますが、デプロイ部分の書き換えることで他のサービスへの対応も可能です。今後は公式スタックはもちろん、企業やユーザーのスタックも増えていくでしょう。

• The Blues Stack: 多くのユーザーを抱える大規模なサービス向けアプリケーションのテンプレート。データベースには PostgreSQL（Fly.ioのPostgreSQL Cluster）を利用し、DockerコンテナをFly.ioにデプロイ。

• The Indie Stack: Bluesスタックの簡易版的な位置づけ、データベースにはSQLiteを利用。DockerコンテナをFly.ioにデプロイ。

• The Grunge Stack: AWSを利用したサーバレス構成のアプリケーション。データベースには DynamoDBを利用し、サーバレスフレームワークとしてはArchitectを利用して Lambdaへデプロイ。開発用にローカル環境のサンドボックスも用意される。

利用している技術スタック（抜粋）

• Tailwind
• TypeScript
• Prettier
• ESLint
• Cypress
• MSW
• Docker
• vitest
• Testing Library
• Prisma
• SQLite（Indie）
• PostgreSQL（Blues）
• Fly.io（Blues、Indie）
• DynamoDB（Grunge）
• AWS（Grunge）
• GitHub Actions

試してみた

Remix Stacksの利用方法は簡単です。従来どおり CLI コマンドで質問に答えるだけで環境が用意されていきます。今回は一番軽量そうなIndieを選択してみました。

$ npx create-remix@latest

? What type of app do you want to create? (Use arrow keys)
❯ A pre-configured stack ready for production
Just the basics

? Which Stack do you want? (Learn more about these stacks: https://remix.run/stacks)
Blues
❯ Indie
Grunge

...各種初期設定

✅ Project is ready! Start development with "npm run dev"

? That's it! `cd` into "/remix-indie" and check the README for development and deploy instructions!

初回セットアップ時には Prismaを利用したDBのマイグレーションからCypressを利用したテストまで実行されているようです。初期セットアップがうまく動いていない、もしくは再セットアップの場合はnpm run setupを利用します。

早速開発サーバーを起動してみます。

$ npm run dev

> dev
> run-p dev:\*

> dev:css
> npm run generate:css -- --watch

> dev:remix
> node --require ./mocks ./node_modules/.bin/remix dev

? Mock server running

> generate:css
> tailwindcss -o ./app/styles/tailwind.css "--watch"

Rebuilding...
Done in 110ms.
Loading environment variables from .env
Watching Remix app in development mode...
? Built in 228ms
Remix App Server started at http://localhost:3000 (http://192.168.31.18:3000)

トップページが表示されました。

ログイン情報としては下記が用意されているのでログインを試してみます。

• Email: rachel@remix.run
• Password: rachelrox

Notesという簡易的なCRUDアプリケーションを試すことができるようです。（その他のスタックも同じNotesアプリケーションが動作する）

各スタックのデプロイ

3つのスタックともにデプロイ先にあわせたアカウントが必要となります。（Fly.io、またはAWS） それぞれのREADMEに必要な情報とデプロイ方法が詳しく記載されており、GitHub Actionsを利用したCI/CDを使って簡単にデプロイすることが可能です。

• The Blues Stack
• The Indie Stack
• The Grunge Stack

Custom Stacks

あわせてGitHubリポジトリにあるオリジナルのスタックをテンプレートとして利用できるようになりました。これは捗りますね:)

$ npx create-remix@latest --template my-username/my-repo

• custom-stacks
• Make your own Remix Stack - YouTube

さいごに

駆け足ですがRemix Stacksを試してみました。

RemixはFormDataまわりが特に使いやすいと感じていますが、今回のテンプレートでもFormDataをはじめRemixらしい書き方の参考になる箇所も多いので、Remixのベストプラクティスを探る資料としても役立ちそうです。

また、Kent.C Dodds氏も監修していることもあってかテストツール（Cypress、MSW、Testing Library、Vitest）が充実している部分も好印象でした。Vitestを早速公式テンプレートに組み込んでいるというのもおもしろいところです。

初回リリースということもあってか、3つのスタックは若干クセのある構成のような印象も受けましたが、Remix自体まだまだプロダクション利用の情報が少ないため、公式のフルスタックなテンプレートを公開することで認知され利用される機会も増えていくことを期待しています:)

参考情報

Kent氏のサイトもソースコードがGitHubで公開されておりこちらもテストコードを含め参考になる部分がたくさんあります。

また、Remixの情報は公式のDiscordチャンネルでさかんにやり取りされています。技術スタックやデプロイ環境ごとに情報も整理されているので興味があるかたはこちらもぜひ参考にしてください。

• Remix Discord channel