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

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

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

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

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

Q&A

解決済

1回答

2674閲覧

Node.jsでwebプラウザを開く

Nitta

総合スコア96

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

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

0グッド

0クリップ

投稿2018/04/20 08:23

お世話になってます。
実は今、ビルド済みのApp.jsを用意して、
それをクライアントに返し、webプラウザで開いて
文字を表示していますが、これをNodeで実行すると
表示できないのですが、ご教示お願いできますでしょうか?
app2.js (Node実行ファイル)

const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; var server = http.createServer(); server.on('request', doRequest); // ファイルモジュールを読み込む var fs = require('fs'); // リクエストの処理 function doRequest(req, res) { // ファイルを読み込んだら、コールバック関数を実行する。 fs.readFile('./build/index.html', 'utf-8' , doReard ); // コンテンツを表示する。 function doReard(err, data) { res.writeHead(200, {'Content-Type': 'text/html'}); res.write(data); res.end(); } } server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });

HTMLファイル

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>rtk-react</title> </head> <body> <div id="react-root"></div>  //ビルドし生成されたApp.jsファイル  <script type="text/javascript" src="./App.js"></script> </body> </html>

・表示したい内容

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <span>div_Nitta!!</span>, document.getElementById('react-root') );

但し、手動でHTMLファイルを叩くと文字は表示されているので正しくビルドできていると思います。

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

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

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

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

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

HayatoKamono

2018/04/20 10:12 編集

「手動でHTMLファイルを叩くと文字は表示されている」という意味がよく伝わってこないのですが、`<div id="react-root"></div>`を`TESTTESTTEST<div id="react-root"></div>`にした場合、TESTTESTTESTとブラウザーに表示されますか? もう少し状況の説明が必要だと思いますので、何が上手く行っていて何が上手く行っていないかを追記して下さい。そもそも、クライアントからのリクエストは受信出来ているかなど。あとは、サーバー側、クライアント側にそれぞれエラーが出てるのかどうかなど、出ているならそのエラー内容。
HayatoKamono

2018/04/20 09:19

どういった情報を質問文に載せたら良いかが分からない場合は、まずは、「質問する時のヒント」を参考にしておけば間違いないかと思います。https://teratail.com/help/question-tips
Nitta

2018/04/20 09:59

要するに、HTMLファイルを直接ダブルクリックした場合はビルド済みApp.jsファイルを使って普通に、上記のコードでdiv_Nitta!と表示されます。しかし、コマンドラインからNodeでapp2.jsファイルを叩いても何も表示されません。以前のexpressのものはあれはあれで使ってますが、今回はまた別にテストしたかったので質問しました。
HayatoKamono

2018/04/20 10:08

なるほど。とりあえず上記に記載したような諸々の追加情報を載せて頂かないと、回答者側が環境作ってコード動かして試してということをしないといけなくなりますよ。
Nitta

2018/04/20 11:38

今後はより上記のようにできるだけ、詳細に説明できるようにしたいと考えます。すいません。
guest

回答1

0

ベストアンサー

あれ、expressを使っているのではなかったでしたっけ?

前にこちらのexpress.staticの使用方法という質問では、expressを使っての静的リソースの扱い方について質問されてたと思いますが。

それでは、ダメなのでしょうか?

http://expressjs.com/ja/starter/static-files.html

追記

質問文の情報からは状況を読み取ることは出来ませんが、とりあえず、掲載のコードでは./App.jsに対するクライアントからのリクエストがサーバー側で処理されていないので、クライアント側で./App.jsを読み込むことは出来ません。

投稿2018/04/20 08:48

編集2018/04/20 11:23
HayatoKamono

総合スコア2415

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

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

Nitta

2018/04/20 11:37

なるほど、了解です。 つまるところnpm run buildで、ビルドにより生成されたJSファイルはサーバー側で処理し生成されているから、クライアントは読めないという理解でいいのですね!毎度ありがとうございました。今後ともよろしくお願いします。
HayatoKamono

2018/04/20 11:39

というより、クライアントに返していないから読めないというのが、より適切な表現になると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問