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

Question

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

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

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

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

Answer 1

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

$ 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以外でも動かせるようになるという感じだと私は思ってます。

Comments

[akachachi]

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

[saitouakihiro]

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

Answer 2

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

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

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

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

Comments

[akachachi]

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

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

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

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

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

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

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

Answer 3

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

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