背景

Reactで作成したSPAをコンテナとしてECSにデプロイしています。

ですが、ECSにデプロイする必要ってないんじゃないかと思いまして。。。

というのも、バックエンドとして用意しているAPIと通信するのはクライアントとなるブラウザです。なので、ホスティングだけしてくれるサービスを使用すればいいんじゃないかと。

というわけで実際にNetlifyにホスティングしてみました。

Reactアプリのビルド

npm ciからのnpm run buildでビルドします。

ビルドの成果物はbuild/にできあがっています。

netlifyにデプロイ

まずはログイン。

netlify login

デプロイします。

netlify deploy --dir=build --site=dfb7b87c-42d6-478a-8546-7605babfafbb --prod

以下のようにデプロイできます。画面も表示できました！！

Deploying to main site URL...
⠋ Uploading blobs to deploy store...

Netlify Build                                                 
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 29.41.2

❯ Flags
  deployId: 67ab0b6a39e50e754d72ac06
  dir: build
  open: false
  prod: true
  prodIfUnlocked: false
  site: dfb7b87c-42d6-478a-8546-7605babfafbb
  skipFunctionsCache: false

❯ Current directory
  /home/hoge/hoge

❯ Config file
  No config file was defined: using default values.

❯ Context
✔ Finished uploading blobs to deploy store
✔ No cached functions were found
✔ Finished hashing 
✔ CDN requesting 7 files
✔ Finished uploading 7 assets
✔ Deploy is live!

Build logs:        https://app.netlify.com/sites/hogehoge/deploys/67ab0b6a39e50e754d72ac06
Function logs:     https://app.netlify.com/sites/hogehoge/functions
Unique deploy URL: https://67ab0b6a39e50e754d72ac06--hogehoge.netlify.app
Website URL:       https://hogehoge.netlify.app

またしてもhistoryApiFallbackが

画面が表示できたので、/loginをリロードすると、、、。

「404 NOT FOUND」です。

_redirectsを用意する

Netlifyでもnginxと同様に、historyApiFallbackを考慮する必要がありました。

具体的には、_redirectsというファイルを用意しておいて、ここに以下の1行を書きます。このファイルはビルドした成果物のbuild/直下に配置します。

/*    /index.html   200

で、改めてNetlifyにデプロイすると、期待した通りの動作になります。