質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1997閲覧

reactアプリケーションのデプロイ方法がわからない

pokemonta

総合スコア170

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/10/07 02:07

編集2020/10/07 02:35

以下のサイトを参考にreactアプリケーションの
作成には成功したのですが
S3へデプロイする方法がわかりません。ご教示願います。

リンク内容

"yarn start"
http://localhost:3000/へのアクセスはできます。

また、デプロイをするにあたりビルドは必要なのでしょうか?
"yarn start"にはビルドなしでwebページが表示できました。

追記:デプロイ後、静的ホストティングに表示されるURL(http://***/)に
アクセスするとエラーが発生しました。

404 Not Found Code: NoSuchKey Message: The specified key does not exist. Key: index.html RequestId: **** HostId: **** An Error Occurred While Attempting to Retrieve a Custom Error Document Code: NoSuchKey Message: The specified key does not exist. Key: index.html

さらに調査を進めた結果
http://***/index.htmlにするとアクセスに成功します。

単なるS3の設定ミスでしょうか

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

また、デプロイをするにあたりビルドは必要なのでしょうか?

必要です。
参考にされているリンクの最後にまさにその項目があります。

npm run build or yarn build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

yarn buildコマンドでbuildフォルダにファイル一式が吐き出されるので、S3にアップするだけです。
awsクライアントが入っているなら下記の記事そのままでいけると思います。

投稿2020/10/07 02:21

nekoniki

総合スコア2411

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問