ジャバ・ザ・ハットリ

ベルリンのスタートアップで働くソフトウェアエンジニア

ReactをGoogle Cloud Platformにデプロイする

2017-10-09React

Loading...

静的なReactをGoogle Cloud Platformにデプロイする方法。

いろいろググって出てきた方法で試したのに、これという解説が見つからなかった。Reactのデプロイに関してはGoogleの公式ドキュメントもStack Overflowのポストも全部イマイチという印象。

決してGoogle Cloud PlatformにReactが適さない訳ではない。GCPは無料でいろいろできるし、Reactとも相性がいいはず。なんでこの系統のドキュメントが充実していないのか、いまだに謎。
なのでここに書いた。

create-react-appを入れてサンプルのReactコードを作る。

$ npm install -g create-react-app

以下のコマンドでサンプルプロジェクトがスグにできあがる。

$ create-react-app my_test_app
  :
  :
 We suggest that you begin by typing:

   cd my_test_app
   yarn start

 Happy hacking!

$ cd my_test_app

$ npm start

npm startをした時点でhttp://localhost:3000/にアクセスすると以下のReactサンプル画面が見える。
image

buildをしてbuildフォルダを作る。

$ npm run build

GCPにログイン。Google Cloud Strageで新規バケットを作成する。Create Bucketボタンを押す。

image

お好きな名前を付ける。

image

上部のUpload Folderボタンを押して、先ほど作成したbuildフォルダを選択し、アップロードする。

image

以下のapp.yamlを作成する。

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: build/index.html
  upload: build/index.html
- url: /
  static_dir: build

作ったapp.yamlファイルをバケットにアップロードする。結果として以下の状態になる。

image

上部のActive Google Cloud Shellボタンを押すと、シェル・コマンドの入力画面がChromeの下に出てくる。

image

以下のコマンドをGoogle Cloud Shellで実行し、フォルダを作成、シンクロさせる。

$ mkdir my-test-app123
$ gsutil rsync -r gs://my-test-app123 ./my-test-app123

全てが正常に行われていると作成したフォルダ内にapp.yamlとbuildが転送される。

$ cd my-test-app123/
$ ls app.yaml build

Google Cloud Shellのプロジェクトフォルダ内で以下のコマンドを実行してデプロイする。

$ gcloud app deploy

 [1] europe-west2  (supports standard and flexible)
 [2] us-east1      (supports standard and flexible)
 [3] us-east4      (supports standard and flexible)
 [4] asia-northeast1 (supports standard and flexible)
 [5] australia-southeast1 (supports standard and flexible)
 [6] southamerica-east1 (supports standard and flexible)
 [7] us-central    (supports standard and flexible)
 [8] europe-west3  (supports standard and flexible)
 [9] europe-west   (supports standard and flexible)
 [10] cancel

Please enter your numeric choice:  7

target url:      [https://my-test-app-182318.appspot.com]
 :
 :
Deployed service [default] to [https://my-test-app-182318.appspot.com]
You can stream logs from the command line by running:

最後に出てきたhttps://<アプリの名前>.appspot.comにアクセスするとデプロイした内容が見える。

もっといい方法をご存知でしたらコメントください。

プログラマのためのGoogle Cloud Platform入門 サービスの全体像からクラウドネイティブアプリケーション構築まで
プログラマのためのGoogle Cloud Platform入門 サービスの全体像からクラウドネイティブアプリケーション構築まで
作者: 阿佐志保,中井悦司
出版社/メーカー: 翔泳社
発売日: 2017/06/02
メディア: 単行本(ソフトカバー)

関連記事