ベルリンのITスタートアップで働くジャバ・ザ・ハットリの日記

日本→シンガポール→ベルリンへと流れ着いたソフトウェアエンジニアのブログ

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

静的な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サンプル画面が見える。
f:id:tango_ruby:20171009052737p:plain:w300

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

$ npm run build

GCPにログイン。Google Cloud Strageで新規バケットを作成する。Create Bucketボタンを押す。
f:id:tango_ruby:20171009053153p:plain

お好きな名前を付ける。
f:id:tango_ruby:20171009053352p:plain

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


以下の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ファイルをバケットにアップロードする。結果として以下の状態になる。
f:id:tango_ruby:20171009053800p:plain

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

以下のコマンドを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入門 サービスの全体像からクラウドネイティブアプリケーション構築まで

tango-ruby.hatenablog.com
tango-ruby.hatenablog.com
tango-ruby.hatenablog.com
tango-ruby.hatenablog.com
tango-ruby.hatenablog.com