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

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

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

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

Q&A

解決済

1回答

1020閲覧

Reactで開発したものをサーバーにアップしても何も表示されない

souta-haruran

総合スコア88

React.js

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

0グッド

1クリップ

投稿2020/05/12 15:07

タイトルの通り、Reactで開発した成果物をサーバーにアップロードしましたが画面に何も表示されません。

表示すべく、設定が誤っているのか、またはサーバー上の設定(対応しているサーバー。。?)など、自分なりに調べ試してみましたが表示するに至りませんでした。
どなたかお教えいただけると幸いです。

###実現したいこと
画面に表示させたい。

###発生している問題・エラーメッセージ
エラーメッセージは特にありません。(warning等含め)
発生している問題としてはアップした先のURL(http://xxx/public/index.html)を閲覧した場合、cssに書かれているスタイル(背景色をグレー)は適用されていますが、その他コンテンツは何も表示されていません。

※開発段階ではきちんと表示されています。(localhostにて)

###ディレクトリ構成
※ ■ はフォルダーを表現しています。

■ node_modules ■ public ├ ■ css └ style.css ├ ■ js └ index.js └ index.html ■ src ├ index.jsx ├ ■ component └ 各種コンポーネントファイル(拡張子jsx) ├ ■ pages └ 各種コンポーネントファイル(拡張子jsx) └ ■ scss └ style.scss - package.json - package-lock.json - webpack.config.js

###webpack-config.js

javascript

1const path = require('path'); 2 3module.exports = { 4 mode: 'development', 5 entry: path.resolve(__dirname, './src/index.jsx'), 6 output: { 7 path: path.resolve(__dirname) + '/public', 8 filename: 'js/index.js', 9 publicPath: '/public' 10 }, 11 devServer: { 12 host: '0.0.0.0', 13 port: 3000 14 }, 15 module: { 16 rules: [ 17 { 18 test: /.js[x]?$/, 19 exclude: /(node_modules)/, 20 use: { 21 loader: 'babel-loader', 22 options: { 23 presets: ['@babel/preset-react', '@babel/preset-env'] 24 } 25 } 26 }, 27 { 28 test: /.css$/, 29 use: [ 30 'style-loader', 31 { 32 loader: 'css-loader' 33 } 34 ] 35 }, 36 { 37 test: /.scss$/, 38 use: [ 39 'style-loader', 40 { 41 loader: 'sass-loader' 42 } 43 ] 44 } 45 ] 46 }, 47 resolve: { 48 extensions: ['.js', '.jsx', 'css'], 49 modules: [ 50 path.resolve('./src'), 51 path.resolve('./node_modules') 52 ] 53 } 54}; 55

###package.json

json

1{ 2 "name": "react-study", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "start": "npm run build", 9 "build": "webpack -d && webpack-dev-server --watch-content-base --content-base public/ --inline --hot --history-api-fallback", 10 "build-css": "node-sass --output-style expanded src/scss/ -o public/css/", 11 "watch": "node-sass -r -w --output-style expanded src/scss/ -o public/css/" 12 }, 13 "author": "", 14 "license": "MIT", 15 "dependencies": { 16 "react": "^16.12.0", 17 "react-dom": "^16.12.0", 18 "react-router": "^5.1.2", 19 "react-router-dom": "^5.1.2", 20 "styled-components": "^5.0.1" 21 }, 22 "devDependencies": { 23 "@babel/core": "^7.8.4", 24 "@babel/preset-env": "^7.8.4", 25 "@babel/preset-react": "^7.8.3", 26 "babel-loader": "^8.0.6", 27 "css-loader": "^3.4.2", 28 "node-sass": "^4.13.1", 29 "sass-loader": "^8.0.2", 30 "style-loader": "^1.1.3", 31 "webpack": "^4.41.6", 32 "webpack-cli": "^3.3.11", 33 "webpack-dev-server": "^3.10.3" 34 }, 35 "homepage": "./" 36} 37

###補足情報(言語/FW/ツール等のバージョンなど)

  • サーバーへのアップロードはFTPにより実行
  • アップロードしたファイルはpublicフォルダ(その他srcフォルダやpackage.json等はアップしていません)

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

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

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

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

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

guest

回答1

0

自己解決

react-routerを使っているのですが、どうやらこれが原因の一つのようでした。
使用している箇所を削除し、何か適当なタグに差し替えるときちんと表示されることを確認できましたので、実現したいことそのものは達成できました。
react-routerについて改めて調査してみます。

投稿2020/05/12 17:18

souta-haruran

総合スコア88

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問