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

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

ただいまの
回答率

90.84%

  • Node.js

    1679questions

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

  • React.js

    656questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 112

saikio

score 22

お世話になってます。
実は今、ビルド済みの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ファイルを叩くと文字は表示されているので正しくビルドできていると思います。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • saikio

    2018/04/20 18:59

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

    キャンセル

  • HayatoKamono

    2018/04/20 19:08

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

    キャンセル

  • saikio

    2018/04/20 20:38

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

    キャンセル

回答 1

checkベストアンサー

0

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

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

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

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

 追記

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/20 20:37

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

    キャンセル

  • 2018/04/20 20:39

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

    キャンセル

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    node.jsのmodule.exportsで循環参照

    あるwebアプリを作っててそこではexpressとsocketioを使用しています。 expressのインスタンスの処理等とルーティングを分けようと思って app.js

  • 解決済

    Reactで「React is not defined」と表示される

    前提・実現したいこと React-ES6-Webpack環境を作って触っているのですが、ブラウザコンソールに「React is not defined」と表示されうまくいきません

  • 解決済

    【React】react-redux-starter-kitのデプロイ

    https://github.com/davezuko/react-redux-starter-kit で公開されているスターターキットでReactに入門し,ある程度のものができた

  • 解決済

    React の Class 呼出に失敗します

     障害 React の Class を呼ぼうとすると、ブラウザ環境でエラーが発生し、呼出に失敗します。  環境 firefox 56 & chrome 62 babel-cor

  • 解決済

    react navigationで画面遷移ができない(react native)

    React Nativeの画面遷移でReact Navigationを導入したいと考えています。 イメージとしては、ホームにいくつかサムネイルが並んでいて、これをクリックすると詳細

  • 解決済

    react ウィンドウ高さの値を設定したい

    ブラウザウィンドウの高さを取得してその値を cssとして設定したいのですが、どうやればいいでしょうか・・・ const App = () => ( getDefaultPr

  • 解決済

    Reactでクラスを使いたいです。

    Reactにて、クラスコンポーネントを使用し、タブ切り替えを作りたいのですが、そもそも、クラスを使いwebpackでビルドしても、表示されません。 使用できるバージョンがあるの

  • 解決済

    Reactでjpgファイルが読み込めない

    React.jsでWEBアプリを開発しています。なぜかわからないのですが、background-imageがReactのインラインスタイルでは上手く読み込めません。  フォルダ

同じタグがついた質問を見る

  • Node.js

    1679questions

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

  • React.js

    656questions

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