雑create-react-app のデプロイについて

init

こんな感じで開発を始める

npm install -g create-react-app
npx create-react-app {{ アプリ名 }} --typescript
yarn start

build

ビルドコマンドはデフォルトで用意されている

yarn build

これを実行すると ./build 配下にhtmlなどビルド結果が生成される

deploy

AWSを使ってるとしてs3にあげる例だとこんな感じ

aws s3 sync --delete ./build s3://static-bucket-name/thirdapp

パスの調整

create-react-app の yarn build はデフォルトだとパスをルート / からの絶対パスで生成する

<link rel="apple-touch-icon" href="/logo192.png"/>

s3://static-bucket-name/thirdapp/ にアプリを置きたい場合はこれを /thirdapp/ 配下にする必要があるが、そのパスの変更は package.json#homepage で設定できる

こんな感じ

$ cat package.json
{
  "name": "thirdapp",
  "version": "0.1.0",
  "private": true,
  "homepage": "/thirdapp/",
  "dependencies": {
  ...

その他

ちなみに GCS の公開バケットにおく場合などは、さらにバケット名のパスが追加されるので、バケット名もパスに含める必要がある。

  // どちらでも良い
  "homepage": "https://storage.googleapis.com/mybucket-name/thirdapp/",
  "homepage": "/mybucket-name/thirdapp/",