Remix SPAモード + Amplify Gen2を試してみる

# はじめに
## 記事の目的と概要
以前からNext.jsの対抗馬として気になっていた[Remix](https://remix.run/)。そろそろキャッチアップしないとなー、なんて思っていた矢先に出てきたReact Router統合のお話が話題になってましたね。

https://remix.run/blog/merging-remix-and-react-router#whats-happening-to-remix

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

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

https://remix.run/docs/en/main/guides/spa-mode

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!
```
プロジェクトの中身を見るとフォルダ構成はこんな感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/6d5fa0b5-0cbf-c29f-eded-3adfbb10380e.png)

## 起動してみる

以下コマンドを実行します
```
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モードを示す画面が表示されます。実にシンプル。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/82226f68-d77d-c891-8c85-e696bdc226c5.png)

ためしに、適当なページを作成してみます。
```about.tsx
export default function About() {
  return (
    <div >
      <h1>Hello About Page</h1>
    </div>
  );
}

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/53ce51a4-c042-5ab4-1379-d11f3d39aff1.png)

<http://localhost:5173/about>にアクセスすると作成した画面が表示されます。
SPAでもファイルベースルーティングが動作している様子がわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/dab2030a-5883-e804-fb8c-038a2e4f36c9.png)

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

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

[新しいアプリを作成]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/51d0cfe5-4e5b-2baa-2add-d7c535a714a1.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/2d427a11-6b4c-516a-6f33-ec062f9bc202.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/017b401e-f194-03b7-2b38-4cf9a37713ad.png)

設定を自動検出してくれているようです。
出力ディレクトリをビルドの項目を「build/client/」に変更し、次に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/40141b58-0a0d-66b1-61da-18e216438ed9.png)

内容を確認し、問題なければ[保存してデプロイ]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/81790d1f-6705-7808-fb5a-2f6d349a5800.png)


デプロイが完了するまでしばし待ちます。
完了するとこんな画面になるようです。
前のAmplify画面より洗練されているような気がします。（個人の意見です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/728dd23f-2430-4fbb-7408-7f6fd6387641.png)


デプロイされたURLにアクセスすると、以下のようにローカルで確認した画面が表示されることを確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/c8404d9b-c557-b7e6-2322-2fc1db990cdb.png)



念の為aboutページにもアクセスしてみました。うまくデプロイされているようですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/fc97b2bd-bdd9-fb52-37c5-29b1486d7c9a.png)



ちなみに、画面が切り替わってすぐにURLにアクセスすると以下のような画面が。。。
デプロイが反映するまでは少し（数分程度）時間差があるのかもしれません。焦らず気長に待ちましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415206/1353c62f-ea98-a3bf-13e6-139336c493f6.png)

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

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