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

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

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

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

Q&A

解決済

1回答

955閲覧

create-react-appのnpm start で起動したサイトと npm run buildで生成されたサイトの違い

keisuu

総合スコア40

React.js

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

0グッド

0クリップ

投稿2017/11/21 11:36

編集2017/11/21 16:47

react-routerを使用しているのですが、

1 http://localhost:3000/about/ (npm startしたサイト)

2 http://example.local/about/ (npm run buildしたサイト)

にそれぞれアクセスした時に、2の時は404 not foundとなり、
http://example.local/を経由しないと表示できません。

この挙動から憶測すると、npm startの時はサーバーサイドレンダリングが効いているのか?
と思うのですが、いまいちよくわかりません。

npm startの時と、npm run buildの時でサイトに違いがあるのでしょうか?

package.jsonの内容です。

package.json

1{ 2 "name": "examplelocal", 3 "version": "0.1.0", 4 "private": true, 5 "dependencies": { 6 "moment": "^2.19.2", 7 "react": "^16.1.1", 8 "react-bootstrap": "^0.31.5", 9 "react-datetime": "^2.11.0", 10 "react-dom": "^16.1.1", 11 "react-router-dom": "^4.2.2", 12 "react-scripts": "1.0.17" 13 }, 14 "scripts": { 15 "start": "react-scripts start", 16 "build": "react-scripts build", 17 "test": "react-scripts test --env=jsdom", 18 "eject": "react-scripts eject" 19 } 20}

example.localはローカルのnginxでアクセスしています。

example.local.conf

1server { 2 listen 80; 3 server_name example.local; 4 root /home/examplelocal/examplelocal/build/; 5 index index.php index.html index.htm; 6 client_max_body_size 99M; 7 server_tokens off; 8 9 location ~ .php$ { 10 fastcgi_pass 127.0.0.1:9000; 11 fastcgi_index index.php; 12 fastcgi_param SCRIPT_FILENAME /home/examplelocal/examplelocal/build$fastcgi_script_name; 13 include fastcgi_params; 14 } 15} 16 17

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

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

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

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

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

keisuu

2017/11/21 16:48

ありがとうございます、質問を追記してみました。いかがでしょうか・・・?
guest

回答1

0

ベストアンサー

おそらくSingle Page Applicationを作っていらっしゃると思うので、例えば/about/にリクエストが来た時でも/index.htmlを返さなければいけません。

react-scripts startでは内部でWebpackDevServerを使用しており、そこらへん自動的にやってくれます。

nginxは全然知らないですが、nginx spaで検索するとそれっぽいのがでてきたので、真似してみてはどうでしょうか。

SPAを配信するときのnginx設定 - Qiita

投稿2017/11/21 17:12

karamarimo

総合スコア2551

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

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

keisuu

2017/11/29 18:57

ありがとうございます。nginxの方で解決できるかやってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問