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 startnpm startをした時点でhttp://localhost:3000/にアクセスすると以下のReactサンプル画面が見える。
buildをしてbuildフォルダを作る。
$ npm run buildGCPにログイン。Google Cloud Strageで新規バケットを作成する。Create Bucketボタンを押す。
お好きな名前を付ける。
上部のUpload Folderボタンを押して、先ほど作成したbuildフォルダを選択し、アップロードする。
以下の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ファイルをバケットにアップロードする。結果として以下の状態になる。
上部のActive Google Cloud Shellボタンを押すと、シェル・コマンドの入力画面がChromeの下に出てくる。
以下のコマンドを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 buildGoogle 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入門 サービスの全体像からクラウドネイティブアプリケーション構築まで |
| 作者: 阿佐志保,中井悦司 |
| 出版社/メーカー: 翔泳社 |
| 発売日: 2017/06/02 |
| メディア: 単行本（ソフトカバー） |
関連記事
海外移住のQ&Aサイト シティーズ
海外移住向けのQ&Aサイトを運営しています。現在、海外にお住まいの方、これから海外移住や留学、転職をお考えの方はぜひご参加ください。 登録はもちろん無料です。
シティーズ https://www.cityz.jp/
