Remix Stacksファーストインプレッション
Remixは前々から気になってはいたのですが、なかなか触れずにいました。
Remix Stacksというのが本日公開されていて、面白そうなので、これを機会にRemixを試してみました。
Remix Stacksとは
ブログから翻訳した説明を引用します。
CI/CDパイプライン、基本的なデータモデルを持つデータベース（prisma経由）、そしてユーザー認証まで、わずか数分であなたのアプリを立ち上げ、デプロイする準備ができます。また、Tailwind, TypeScript, Prettier, ESLint, Cypress, MSW, Docker, vitest, Testing Library などの開発用ツールもセットアップされています!
今回のリリースでは、3つのスタックが提供されています。
- The Blues Stack: 長時間稼働する分散されたNode.jsサーバーとPostgreSQLデータベースにデプロイ。数百万ユーザーにサービスを提供する大規模かつ高速なプロダクショングレードのアプリケーションを想定。
- The Indie Stack: 長時間稼働する分散されたNode.jsサーバーと永続的なSQLiteデータベースで構成。プロトタイプや概念実証のためや、あまり複雑なことをせず素早く実行することを意図しており、後からThe Blues Stackにアップデート可能。
- The Grunge Stack: Node.jsのサーバーレスファンクションで動作し、DynamoDBで永続化。AWSのインフラで数百万人のユーザーを向けのプロダクショングレードのアプリケーションをデプロイ。
本記事では、「The Indie Stack」を試してみたので、その内容をお届けします。
Remixアプリを作成
create-remixにスタックを指定して実行します。
npx create-remix --template remix-run/indie-stack
いくつか作成されるアプリの内容を聞かれるので基本デフォルトにして、名称はremix-indie-stackとしました。
作成されたディレクトリーに移動して、開発サーバーを起動します。
cd remix-indie-stack
npm run dev
ブラウザーで開発サーバーに接続します。
サンプルのデータが入っている状態なので、次のユーザーでログインできます。
- Email: rachel@remix.run
- Password: rachelrox
デプロイ
READMEに記載があった手順に従って、Fly.ioにデプロイします。
flyctlをインストール
まず、flyctlをインストールします。
Macであれば、Homebrew経由でインストールできます。
brew install superfly/tap/flyctl
その他のプラットフォームは次を参考にしくてださい。
Flyアプリを作成
まず、サインアップしてログインします。ブラウザーが開くので、必要な事項を入力します。
fly auth signup
プロダクション環境とステージング環境の2つ作成します。
fly create remix-indie-stack
fly create remix-indiex-stack-staging
GitHubとの連携
GitHubリポジトリーを作成します。
GitHubからFly.ioに接続するためのトークンを作成します。
生成したトークンを、リポジトリーに設定します。
リポジトリーの「Settings」から、「Security」欄の「Secrets」の「Actions」を開きます。
「New repository secret」ボタンをクリックしてシークレットの作成画面を開きます。「Name」に「FLY_API_TOKEN」と入力して、「Value」に先ほど生成したトークンを入力します。
セッションシークレットを作成
FlyアプリのシークレットにSESSION_SECRETを追加します。次のコマンドを実行します。
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app remix-indie-stack
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app remix-indie-stack-staging
opensslがインストールされていない場合は、1passwordを使用してランダムなシークレットを生成できます。
ボリュームを作成
Dockerのコンテナで動作するので、sqliteデータベースを永続させるためにボリュームを作成します。
プロダクション環境とステージング環境の両方で以下を実行します。
fly volumes create data --size 1 --app remix-indie-stack
fly volumes create data --size 1 --app remix-indie-stack-staging
デプロイを実行
これで設定が完了したので、mainブランチにコミットするたびプロダクション環境、devブランチにコミットするたびステージング環境へのデプロイが行われます。
初期化して、コードをコミットします。remoteに先ほど作成したリポジトリーを指定して、mainブランチをプッシュします。
git init
git add .
git commit -m'Initial commit'
git remote add git@github.com:hirotaka/remix-indie-stack.git
git push origin main
リポジトリーのActionsで進行状況を確認できます。
ここまでのコードは次で確認できます。
おわりに
RemixとFlyをはじめて使ったので、さすがに数分とはいかなかったですが、これだけの環境を数十分でできたのは驚きです。フロントとバックエンドが一体となっていて、継続的なCI/CDでの開発がすごくスムーズにできる印象を受けました。
いつも技術スタック選びには悩まされているので、ここで使用されている技術スタックの組み合わせはすごく参考になります。
これから、いろいろなスタックがでてきそうなので、今後の展開が楽しみです。
Discussion