こちらの記事の続編です。（ここではReact/reduxで話を進めますが、他のSPAフレームワークでも共通だと思います。）
React + Redux + TypeScriptでreact-router
概要
SPAで開発しよう！サーバーから独立して開発しよう！みたいな風潮がありますが、具体的にどのようにデプロイしたら良いんだっけ？と思ったので、個人的なプラクティスを書いておきます。
（認証を含むアプリについては別の記事で記載します。）
環境
- NodeJS 5.X~
- React 15.1
- TypeScript 1.8
全体の構成はこちらを御覧ください。
https://github.com/uryyyyyyy/react-redux-sample/tree/spa
画面遷移してurl叩いてもちゃんと動作することが確認できます。
ゴール
- SPAの理想を改めて考える
- サーバー環境に依らずデプロイ出来るようにしておく
- フロントのルーティングにも対応できるようにする
SPAの目指すところを改めて確認する
SPAでは、サーバーの都合に振り回されることなく、サーバーをただのAPIサーバとみなしてフロントの開発が出来ることにあると個人的に思っています。
そうすることで、モックサーバなどでの開発が簡単に行えて、リリースサイクルもサーバー側と変えることができます。
なので、一切サーバに依存することなく開発、デプロイができるようにしたいです。
SPAでデプロイするものとは何か
基本的には以下の構成だと思っています。
tree ./
.
├── index.html
├── other_page.html
├── js
│ ├── bundle.js
│ └── 3rd-party-library.js
├── css
│ ├── bundle.css
│ └── 3rd-party-library.css
└── images
└── fixed.jpg
このとき、htmlの書き方はこのようになります。
ここで、全てのファイルの頭に/が付いているのは、http://localhost/page1/id/3 みたいなURLになったときにも、同じhtmlでSPA用のJSやらcssやらを同じように取得してほしいからです。
もちろん普通のサーバーだと/page1/id/3 のindex.htmlを読みに行ってしまうのでサーバー側でrootのindex.htmlを返してあげる必要があります。そして、その際に他の静的リソースへのアクセスの時にもhtmlを返されると困るので、そのrouting設定は全部のパスが外れた最後に通してあげる必要があります。これはなんというか、webアプリの限界という感じです。詳しくはこちらの記事をどうぞ。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/3rd-party-library.css">
<title>React minimal</title>
</head>
<body>
<img src="/images/check.png" />
<div id="app">Loading...</div>
<script src="/js/3rd-party-library.js"></script>
<script src="/js/bundle.js"></script>
</body>
</html>
要するに、上記のような静的ファイルをまとめることができれば、どの環境に持って行っても動くようになるはずです。
具体的にはどうするのか
ここでは、主に3rdパーティライブラリや生成したjs（そのままgitで管理したくないもの）の配置について考えます。
その他の「配置してgitで管理すれば終わり」「固定されてるCDNから取ってくるだけ」というだけのものはここでは省略します。
3rdパーティライブラリ
（npmやbowerでinstallしたものを想定しています。）
開発時、ビルド時に一度だけパスを移動させればいいので、shellなどで対象のフォルダ内に入れてあげます。（CSSフレームワークなどは、その中で他のファイルを読みに行くことがままあるので、フォルダ毎コピーしてあげると無難かと思います。）
その際、移動したファイルはgitignoreで管理から外します。
生成したjs/css
生成してから対象のパスへ移動して〜を毎回やるのは面倒なので、出力先をそのまま対象のパスにしてあげます。
まとめ
ちょっと内容の薄い記事になってしまった感があります。。。
後で別記事を上げるのでそちらの前提を補完するものとして見て頂ければ。