AWS
S3
React

react AWS S3で連携してWEBアプリケーションを作る

react AWS S3で連携してWEBアプリケーションを作る

react app作成

$ npm i -g create-react-app
$ create-react-app test_app
$ cd test_app

ローカルで実行する

$ npm start

ローカル実行画面

スクリーンショット 2018-03-13 14.53.50.png

AWS CLIのインストール

AWS S3 バケット作成、設定

  • バケット作成

バケットのプロパティの設定

  • バケットのプロパティのタップを選択しインデックスドキュメント、エラードキュメントにindex.htmlを入力する
  • エンドポイントもメモとく

S3 Management Console 2018-03-13 14-49-51.png

build、S3にアップロード

$ npm run build && aws s3 sync build/ s3://バケット名

バケットにファイルがアップされたかを確認する

スクリーンショット 2018-03-13 14.51.36.png

メモといたエンドポイントで確認する

スクリーンショット 2018-03-13 14.53.50.png