Angular2アプリを全部無料で公開してみる-Django編

Angular2で開発したアプリケーションを完全に無料で公開できる方法を考えてみた。

要件

上から順に重要度が高い。

• Angular2
• Angular2のサーバーサイドレンダリング対応
• そこそこのDB容量
• なるべく無料枠が大きいところ
• 開発しやすさ

考察

まず、Angular2をサーバーサイドレンダリングしようと思うと、node.jsでサーバーを動作させることが必要となる。
これは色々調べてみると、恐らく速度や無料枠を比較するとherokuがベストかと思う。
2016年現在は無料で停止なしで稼働できる。

上記は確定っぽいのでDB側を考えてみる。

容量の無料枠で一番大きいのは恐らくAmazon DynamoDBの25GB。

様々な言語のSDKがあるのでどのサーバーでも行けると思う。
Angular2からも直接行けるが接続情報が筒抜けになるし、直接DB接続だと複数の処理を1リクエストにまとめたりができないので、
費用が発生する可能性が高くなる。
やはり一度サーバーを経由したいところ。

Angular2 → Amazon lambda → Amazon DynamoDB

というのもなかなか良さそう。
ただし認証によってアクセスできる処理をきっちり整理する必要がある。
こちらはまた今後確認してみたい。

（追記）
調べてみたらcognito + lambda + DynamoDBを使用する必要がありそう。
ちょっとこれはめんどそうだしcognitoは未認証ユーザーという概念があるが、
もしそれも課金計算に含めるなら費用が発生する可能性は高くなりそう。

構成

今回は総合的なバランスを考えて下記を試してみた。

Angular2 → GAE (Python + Django) + Datastore

• 直接APIサーバーにアクセスするだけなのでサーバーを分けない場合とアクセス時間が変わらない。
• Datastoreが1GB(?)無料なのでそこそこ。
• Djangaeを使うとDjangoのモデルそのままでDatastoreにアクセスできるので、
  この環境用の特別なプログラムで開発をする必要がない。
• pythonはpython, python3, pip, pip3と分けてインストールされたり切り替えたりができたりするので、
  python2しか使えないGAEでもローカルの開発環境を汚さずに開発しやすい。
• pythonはリモートで本番のDjango用のコマンドを実行できるのでマイグレーションなども簡単。

Angular2側

GitHub - angular/universal-starter: Angular 2 Universal starter kit by @AngularClass

ng newしないで、上記をそのままcloneして改造していくのがいい。
デフォルトのコマンドでherokuでそのまま動くし、
Visual Studio Codeでもデバッグできる。

必要であればangular-cliで新規作成したプロジェクトから必要なファイルだけコピーしてくると良いと思う。

GAE側

GitHub - ottoyiu/django-cors-headers: Django app for handling the server headers required for Cross-Origin Resource Sharing (CORS)

別サーバーなのでこれをいれておけば動く。
いちいち全部のResponseにヘッダーを指定する必要はない。

接続や設定などはGAEの特別な仕様などがあり最初はつまずくが、
解決すればあとは普通と同じように開発ができる。

チュートリアルで操作させられるが、どうもGithubと連携できる開発環境みたいなのもあるようだ。

まとめ

たいしてアクセスやデータ量の無いアプリケーションは、こんな感じで無料でなるべく開発しやすい環境を模索すると面白そうだ。

APIサーバー側は、さくらレンタルなど安いサーバーを別途持っていればそれをそのまま使うのも簡単だ。