はじめに

記事の目的と概要

以前からNext.jsの対抗馬として気になっていたRemix。そろそろキャッチアップしないとなー、なんて思っていた矢先に出てきたReact Router統合のお話が話題になってましたね。

急ぎでないならRemixの技術選定はしばらく待ち、だと思いますが、同じく気になっていたAmplify Gen2との組み合わせを試してみたので、記事に残しておきたいと思います。

RemixはSSR向けのフレームワークだと思いますが、SPAモードもサポートしているようです。

Remixのメインの使い方ではないものの、新しく出たAmplify　Gen2と一緒に試してみたかったので、今回は、Remix SPAモード + Amplify(Gen2)の組み合わせでホスティングしてみました。

では、早速試していきたいと思います。

Remixプロジェクトの作成

npx create-remix@latest --template remix-run/remix/templates/spa

上記を実行すると、以下のように対話的に聞いてくるので、すべてyesを選択します。

   remix   v2.9.2 💿 Let's build a better website...

   dir   Where should we create your new project?
         ./my-remix-app

      ◼  Template: Using remix-run/remix/templates/spa...
      ✔  Template copied

   git   Initialize a new git repository?
         Yes

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

      ✔  Git initialized

  done   That's it!

プロジェクトの中身を見るとフォルダ構成はこんな感じ

起動してみる

以下コマンドを実行します

cd ./my-remix-app
npx remix vite:dev

うまく起動できると以下のように表示されます。

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

ブラウザから
http://localhost:5173/
にアクセスするとRemixのSPAモードを示す画面が表示されます。実にシンプル。

ためしに、適当なページを作成してみます。

about.tsx

export default function About() {
  return (
    <div >
      <h1>Hello About Page</h1>
    </div>
  );
}

ファイルは以下のようにapp > routes配下に配置します。

http://localhost:5173/aboutにアクセスすると作成した画面が表示されます。
SPAでもファイルベースルーティングが動作している様子がわかります。

動作確認の結果が問題なければ、Gitにコミット＆プッシュします。

Amplifyアプリ作成

AWSマネジメントコンソールにアクセスし、Amplifyコンソールを表示します。

[新しいアプリを作成]をクリックします。

Gitプロバイダーを選択します。私はGithubを使っているので[Github]を選択します。

接続したいgithubのリポジトリとブランチを選択します。
リポジトリの構成がモノレポの場合は、[私のアプリケーションはモノレポです]にチェックを付けます。

設定を自動検出してくれているようです。
出力ディレクトリをビルドの項目を「build/client/」に変更し、次に進みます。

内容を確認し、問題なければ[保存してデプロイ]をクリックします。

デプロイが完了するまでしばし待ちます。
完了するとこんな画面になるようです。
前のAmplify画面より洗練されているような気がします。（個人の意見です）

デプロイされたURLにアクセスすると、以下のようにローカルで確認した画面が表示されることを確認できました。

念の為aboutページにもアクセスしてみました。うまくデプロイされているようですね。

ちなみに、画面が切り替わってすぐにURLにアクセスすると以下のような画面が。。。
デプロイが反映するまでは少し（数分程度）時間差があるのかもしれません。焦らず気長に待ちましょう

おわりに

今回は、Remix SPAモードをAmplify Gen2上にホスティングする方法を試してみました。
Remixの強みであるファイルベースでのルーティングや、AmplifyのGitベースでのホスティングなど、どちらもさすがの手軽さでしたね。
今回の記事は、少々ニッチな使い方ですが、どなたかのお役に立てたら幸いです。

ということで、Remix SPAモード + Amplify Gen2を試してみる、でした。