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

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

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

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

React.js

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

Q&A

解決済

1回答

1546閲覧

nginxにbuildしたファイル群をおいても画面が真っ白になってしまいます(AWS EC2 nginx React)

fujimaruuuun

総合スコア22

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

React.js

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

0グッド

0クリップ

投稿2022/07/20 02:15

編集2022/07/20 03:56

前提

ローカルでビルドしたReactのbuild配下のファイルすべてをnginxの/var/www/reactに置き、nginx.confの設定も下記のように変更しました。

補足情報

●/etc/nginx/nginx.conf
イメージ説明

●/var/www/react
イメージ説明
buildは react-scripts buildを使用しています。
nginxのリロードや再起動も試しましたが、画面が真っ白でエラーもでてきません。
nginxのエラーログやアクセスログも確認しましたが、何も表示されません。
どこがおかしいのでしょうか。。

追加でお聞きしたいこと

nginxに置くファイルはbuild配下のファイルのみでいいのでしょうか?
今まで、EC2の/home/にReactのソースコードすべて(srcやpublicフォルダなど)をおき、nginx.confではそのなかのbuildを見に行くように設定していました。

location / { root /home/ec2-user/my_project/build/; index index.html index.htm; try_files $uri /index.html; allow all; }

このときは画面も正常に出力されていましたので、build前のすべてのコードも必要なの??
と疑問に思っています。

自分でいろいろと調べてみたのですが、よく理解できず詰まってしまったのでここで質問させてください、、よろしくお願いします。

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。
buildフォルダの中身すべてを、フォルダ階層関係なくnginxに置いていたのが原因でした。
ローカルと全く同じようにnginxにjsフォルダやstaticフォルダを作成しリロードしたところ、
画面にちゃんと反映されました!
イメージ説明

buildしたファイルだけ置いたらいいのですね。知りませんでした。。

投稿2022/07/20 03:42

編集2022/07/20 03:45
fujimaruuuun

総合スコア22

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問