Reactでcreate-react-appを使わずにwebpackでGAEにデプロイ【忘備録】 #React

　Reactで作ったアプリをGAEにデプロイするまでを忘備録として残します。
　create-react-appで作らずに「作りながら学ぶ React 入門」(吉田裕美,https://github.com/yuumi3/react_book)を参考に環境を作りました。

構成

├── public
│   └── index.html
├── src
│   └── index.js
├── .babelrc
├── .eslintrc.json
├── app.yaml
├── package-lock.json
├── package.json
└── webpack.config.js

GAEにデプロイ

「ハンズオンNode.js」(今村謙士,p355〜360)を参考にGoogle Cloud SDKをインストールする。プロジェクトを作成する。
package.jsonのscriptsにbuildを追記する。

package.json

  "scripts": {
    "start": "webpack serve",
    "webpack": "webpack -d",
    "build": "webpack build"  //buildを追記

　app.yamlに「create-react-appを使わない構成でGAEにデプロイする」(@yjiro0403,https://qiita.com/yjiro0403/items/e0c743eb1f230c404fb0)
をから引用させていただいたコードを記述する。
　また、「ReactをGCPのGAEにデプロイする方法」
(@ozora,https://qiita.com/ozora/items/5808046b10cef887804a)
よりnodejsのバージョンを自分のバージョンに変更して記述する。

app.yaml

runtime: nodejs14 //数字は使っているバージョンにする。

handlers:
- url: /
  static_files: public/index.html
  upload: public/index.html
  secure: always
- url: /
  static_dir: public

下記のコマンドを実行する。

$ gcloud init //SDKのインストールの時に使ったのでここでは使わない可能性あり。
$ npm run build
$ gcloud app deploy

下記のコマンドでデプロイができているか確認する。

$ gcloud app browse

参考

1.作りながら学ぶ React 入門 (吉田裕美,https://github.com/yuumi3/react_book)
2.ハンズオンNode.js(今村謙士,p355〜360)
3.「create-react-appを使わない構成でGAEにデプロイする」
(@yjiro0403,https://qiita.com/yjiro0403/items/e0c743eb1f230c404fb0)
4.「ReactをGCPのGAEにデプロイする方法」
(@ozora,https://qiita.com/ozora/items/5808046b10cef887804a)