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

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

ただいまの
回答率

89.10%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,145

akachachi

score 38

https://github.com/davezuko/react-redux-starter-kit
で公開されているスターターキットでReactに入門し,ある程度のものができたので
それをサーバにデプロイしたいのですが,その方法がわかりません.

READMEには「静的デプロイが簡単である」
と書いていたのでyarn build してindex.htmlにアクセスしてみましたが,
どうもうまく表示されません.
index.htmlに書いているjsのルートを書き換えても表示されず,
なにが原因かわからないので,1からデプロイ方法を教えていただけますでしょうか?

よろしくおねがいします.

----追記----
yarn buildするとdistディレクトリができますが,
その中にあるindex.htmlを開いて,実装したページを表示する方法を
教えていただければ,現状十分です.

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+3

参考ですが、自分の環境では以下のようにするとできました、

$ git clone https://github.com/davezuko/react-redux-starter-kit.git
$ cd react-redux-starter-kit
$ npm install
$ npm run build

distの中のファイルを一式別のフォルダに移動し、app.jsを作成

var app = require('connect')();
app.use(require('serve-static')(__dirname))
app.listen(3000);


以下を実行

$ npm install connect serve-static
$ node app.js

http://localhost:3000/にアクセス

キャプチャ

※ 「node」 「簡易サーバー」 で検索して最初に出てきたページを参考
http://qiita.com/natsuki_summer/items/df93b9fa102f792732e8

コメントへの追記です。

webpackの使用方法の例ですが、例えば、requireといった、「Node.jsを使用したJavaScriptの実行環境では動く」が、「ブラウザではエラーになる」書き方を、
webpackで1つのjsファイルにすることで、ブラウザで読み込めるようになります。

// index.js
var test = require('./test.js');
console.log(test);
// test.js
var test = 'test出力';
module.exports = test;


※普通requireをブラウザで読み込むとエラーになる。
ブラウザで読み込むとエラー

webpackを使用すると解決してくれる
イメージ説明

webpackを使用することで、index.jsとtest.jsを合わせたbundle.jsを作成してくれて、
それをhtmlで読み込むことでrequireの書き方でもブラウザで動作できます。

なので、webpackを使用することでnode以外でも動かせるようになるという感じだと私は思ってます。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/08/20 11:27

    webpackを使用するにはnodeのサーバでないといけない,ということはありますか?

    キャンセル

  • 2017/08/20 15:21

    webpackは、nodeサーバでなくても動くと思います。
    今回はReact Reduxの開発をしているということで、nodeのサーバが一番手っ取り早い方法かと思って、それを使用してみただけです。
    webpackは機能がたくさんありますが、簡単に言えば複数のモジュールを1つにまとめたファイルを出力するツール、という感じです。※解答欄に追記してみました。

    キャンセル

+1

  • 理解が不足しておりすみません。「サーバにデプロイしたい」とおっしゃっている時の「サーバ」がどのようなものかによって、回答は変わって来るかと思います。

  • 単に自分のPC上のブラウザでそのindex.htmlを表示させたいということでしょうか?もしそうであればそのファイルのアイコンをダブルクリックすれば良いです。ちなみにmacならterminal上で/distのパスまで移動してopen index.htmlと叩けば表示されます。

  • リモートサーバ上にあるindex.htmlを表示させたいということであれば、まずそのサーバへのURLアクセスを確立する必要があります。そしてその場合、一番楽なのはクラウドサービスを使うことです。もしそのリモートサーバが、社内サーバなどであった場合は、そのサーバにapacheなどを設定する必要があると思います。

  • PC内で起動させたvagrantVM上にビルドしたコードがあり、それにアクセスしたい場合は、vagrantfile内の設定に従ってアクセスする必要があります。(例えばlocalhost/index.html,localhost:3000/index.htmlなど)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/08/16 23:21

    私の方こそ説明が不足しており,申し訳ありません.

    状況を詳しく説明させて頂くと,
    1.react-redux-starter-kitによる開発は完了している.

    2.そこで,次はデプロイしようと,READMEを参考に `yarn build` して `dist` ディレクトリと 
      index.html等が生成される.

    3.いざ,表示させようとアクセスしてみると,アクセスはできているのですが,肝心のコンポーネントが
      表示されず,真っ白のページになる.
      (`open`による表示,リモートサーバに配置しての表示の両方を試し,アクセスできているのは
        確認できています.)

    4.ここで,おそらくjsの読み込みパスが間違っているんじゃないかと想いつつも,
      react-redux-starter-kitに原因があるのか,index.htmlへのアクセス方法が間違っているのか等
      原因がわからないことです.

    リモートサーバで外部から表示しようとした際には,
    外部に公開しているプロキシサーバをかまして,
    外部には公開していないサーバのユーザディレクトリ(public_html)の部分にdistディレクトリを配置し,アクセスしていました.

    これでなにかわかるでしょうか?
    もしよろしければreact-redux-starter-kitを試しにデプロイしていただいて
    操作感を教えていただければ幸いです.
    よろしくおねがいします.

    キャンセル

  • この投稿は削除されました

0

 とりあえずやってみるならAWSで

  • アプリをサーバにデプロイしてそれにアクセスするためには、基本的にはapacheやnginxなどを使ってユーザがアプリにアクセスするための準備をする必要があります。そしてその方法は、サーバの環境や要件などによっていろいろあります。
  • しかしながら、いまは便利な世の中なので、AWSのホスティングサービスを参照すればすぐできます。
  • そのほかにも、herokuやgoogle cloud platformのapp engineなどを利用すれば同じようにすぐにホスティングできる手段があります。しかも基本的に無料でできます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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