create-react-appで作成したReactアプリをWebサーバにデプロイする手順

目的

Reactで作ったWebアプリケーションをWebサーバにアップロードしたい。

手順

1. npm install -g create-react-app
2. create-react-app app_name
3. cd app_name
4. vim package.json (解決方法の変更を適用する)
5. yarn build または npm run build
6. build/* をサーバにアップロード(コマンドの例: scp -r build/* example.com:~/PathToDocumentRoot/)

発生した問題

ReactアプリのURL/index.htmlにアクセスしても何も表示されない。404エラーになる。

原因

静的ファイルの読み込み箇所が絶対パスになっていた。

解決方法

Reactアプリのディレクトリルート/package.jsonに下記の一文を追加する。

"homepage": "."

具体的なビフォー・アフターは以下の通り。

package.json(ビフォー)

{
  "name": "app2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

package.json(アフター)

{
  "name": "app2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "homepage": "."
}

これだけです。劇的に簡単ですね。