ReactアプリをAWSにデプロイしたい

Question

以下の手順に則り、CDKでスタックまで作成することができました。
リンク

S3が作成されバケットホスティングが設定されていることを
確認できました。

そこでエンドポイントにアクセスしましたところ以下のエラーが
発生しております。

404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: index.html
RequestId:
HostId:

そもそもS3バケットが空でアプリがデプロイ出来ていないと思われます。

リンク先の手順を確認しましたがデプロイ方法がわかりませんでした。
どなたかご教示願います。

Comments

[yu_1985]

cdk deploy
でデプロイしたのではないですか？

[pokemonta]

cdk deployを実施しました。
これはスタック(IaC)のデプロイのみで
アプリのデプロイではないと思われます。。

[yu_1985]

ここを見る限りサイトもアップロードしてそうな気がしますが…。
https://github.com/cdk-patterns/serverless/blob/master/s3-react-website/python/cdk/s3_react_website/s3_react_website_stack.py#L9-L10

https://www.npmjs.com/package/cdk-spa-deploy

cdk deployの実行時になにかメッセージは出ていませんでしたか？

[pokemonta]

cdk deployを実行すると途中で以下のメッセージが表示されます。

Do you wish to deploy these changes (y/n)? y
s3-react-website: deploying...
[0%] start: Publishing 英数字・・・:current
[50%] success: Published 英数字・・・:current
[50%] start: Publishing 英数字・・・:current
[100%] success: Published 英数字・・・:current
s3-react-website: creating CloudFormation changeset...

? s3-react-website

Outputs:
s3-react-website.S3ReactDeployURL2CF06D05 =http://静的ホスティングアドレス

[pokemonta]

■教えて頂いたサイトの情報
SPADeploy(self, 'S3ReactDeploy').create_basic_site(index_doc='index.html',
website_folder='../website/build')

■実際のディレクトリ構成
$ pwd
/s3-react-website/website/public
$ ls
index.html

$ pwd
/s3-react-website/website/build
$ ls
空っぽ

$ pwd
/s3-react-website/cdk/s3_react_website
$ ls
s3_react_website_stack.py

★教えて頂いたサイトの情報と実際のディレクトリ構成に差があるのでしょうか？★

[yu_1985]

もしかしてビルドしてないのではないでしょうか…？

[pokemonta]

すみません。どの手順でしょうか？
ズブの素人で申し訳ございません。

下記サイトの太文字を実行するのでしょうか？
https://github.com/cdk-patterns/serverless/tree/master/s3-react-website/python/website

npm start
npm test
npm run build
npm run eject

[yu_1985]

それぞれ説明が書いてあるので読んでください。
今回必要なのはnpm run buildですが、その前に依存パッケージをインストールする必要があります。

Answer 1

ビルドしていないのであれば、そもそも上げるものがローカルに存在してないです。
今回であればwebsiteディレクトリ配下で

npm install
npm run build

でできると思います。

この辺何も補足が書いてないのはちょっと不親切な気はしますけどね…。

Comments

[pokemonta]

ちょっと試してみます。HPには、そんな手順がなかったような。。。。

[yu_1985]

npmを使ったプロジェクトではほぼ前提として自分で依存パッケージをインストールしたりビルドしたりが必要になります。
ただ時折そこの部分を十分に記載していないプロジェクトがあります。
不親切なのでちゃんと記載するべきといつも思うんですけどね…。
https://qiita.com/minato-naka/items/fc74f6c9439ab59cec63

[pokemonta]

ドンピシャの回答でした。無事にReactのデフォルト画面が表示されました。
S3にもよくわからないソースが入っています。
App.jsなどが無くなっており、代わりに変な名前のjsやcssがあります。
おそらくビルドして名前が変わったかもしれません？？
表示内容が、reactのマークと「Edit src/App.js and save to reload.」という文字列
だけですので、元ファイル（どれを修正したらいいかわかりませんが）を
修正してビルド→デプロイをしていく流れになるのだろうと思います。。