create-react-appを使わない構成でGAEにデプロイする

create-react-appを使わずにインストールするための記事はたくさんありましたが、デプロイを行う方法が見当たらなかったため、実際にやってみました。
create-react-appを使わない意図としましては脱create-react-appがわかりやすいかと思います。

参考

今回は下記を参考に環境構築およびインストールを行いました

作りながら学ぶ React 入門
Cloud BuildでReactアプリをGAEにデプロイする ※今回はCloud Buildは使用していません。

構成

作りながら学ぶ React 入門に倣った構成とモジュールになっています

├── public
│   ├── js
│   │    └── app.js // npm run buildで生成
│   └── index.html
├── src
│   └── index.js
├── app.yaml
├── package-lock.json
├── package.json
└── webpack.config.js

インストール

「作りながら学ぶ React 入門」 サポートページを参考にインストールしてください

webpack.config.js

module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    path: __dirname + '/public/js',
    filename: "[name].js"
  },
    devServer: {
    contentBase: __dirname + '/public',
    port: 8080,
    publicPath: '/js/'
  },
  devtool: "eval-source-map",
  mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      enforce: "pre",
      exclude: /node_modules/,
      loader: "eslint-loader"
    }, {
      test: /\.css$/,
      loader: ["style-loader","css-loader"]
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
     }]
  }
};

インストールしたらnpm startで動作確認

GAEにデプロイを行います

Cloud BuildでReactアプリをGAEにデプロイするを参考にデプロイを行います

app.yaml

service: front // 定義しない場合はdefaultにデプロイされる(はず)
runtime: nodejs10 //node.jsはローカルでインストールしなくても大丈夫です

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

あとはGoogle Cloud SDKをインストールして下記コードでデプロイしてください

$ npm run build // ビルドコマンド
$ gcloud app deploy

以上