エレベータを探すアプリをnetlifyで公開した
September 24, 2018
東京メトロの公開データを使って、エレベータが近い車両番号を探せるアプリを作りました。
データ仕様は公開サイトにて公開されています。
今回アプリの実装から公開までをクラウドサービスのみで実現したので、その流れを簡単にまとめます。
※東京メトロAPIの詳細な話は一切ありません。
TL;DR
実装
Cloud9でやりました。
東京リージョンでは利用できませんが、シンガポールで利用可能です。
Cloud9における開発環境の単位はEnvironmentです。 Environmentには２つのタイプがあり、EC2かSSHかを作成時に選択します。 今回は、EC2を選択しました。 開発環境として使える状態にセットアップされたインスタンスが自動で生成されます。 当然利用時間に応じてお金が発生するので、不要なものは削除、あるいは停止するようにしましょう。 デフォルトでは、30分間操作がないとインスタンスが自動停止します。
作成せれた環境の ~/environment 以下にあるファイルをエディタで編集できるようです。
触ってみた感じ、タイピングの遅延はそんなに感じませんでした。
補完もある程度やってくれます。キーバインドでvimを選べますが、カスタマイズできるのかはやろうとしてないので不明です。
Terminal経由でコマンドを打つこともできます。画面下の方に ~/environment をカレントにした状態のターミナルが表示されています。
デフォルトではnodeのversionが6系だったので、すでにinstallされているnvmを使って8系にあげるには
nvm install v8.12.0
nvm alias default v8.12.0
とすると、nodeのversionが変更できます。
今回のアプリはcreate-react-appを利用します。node v8であれば npx が使えるので、
npx create-react-app アプリ名
とすることで、アプリの雛形を作ることができます。
アプリの起動は、Terminalで作成したアプリに移動して npm run start 。
画面上部にあるメニューの Preview -> Preview Running Application クリックで、IDE内のブラウザで確認することができます。
IDEからプレビューを見るには、特定のポート、IPで起動している必要があります。
詳しくはドキュメントを見てください。
開発環境でよく使うIP、ポートであれば大丈夫です。
Terminalが使えるので、GitLab上で管理されたコードをpullしたりpushしたり、ということも可能です。
GitLab
gitのホスティングサービスの一つです。GitHubを普段使っているのですが、違うサービスも触ってみようと思い選択。
Netlify
アプリはNetlifyにデプロイします。 Netlifyはstaticなウェブプロジェクトに特化したホスティングサービスです。 基本無料で、master更新からの自動デプロイ、https対応など、最低限必要と思われるような機能が利用できます。 この手のサービスは他にもあると思いますが、serverless functionを定義できるFunctions機能が決め手でした。
Functions
今回作ったアプリでは、東京メトロAPIのレスポンスを取捨選択して結合するAPIが必要でした。 最初はFunctionsのことを知らず自分でAPI GatewayとLambdaでやろうと思っていましたが、Lambda書いてそれを呼ぶAPI Gateway定義して、というのが地味に面倒でした。 さらに従量課金なので、誰かに不正にエンドポイントを叩かれたときの財布へのダメージもあります。
NetlifyのFunctionsはAwsのLambdaと同じインタフェースで関数を定義でき、かつ一定量の利用までは無料です。 netlify-lambdaを使えばローカルでの開発もできます。
create-react-appのdev serverのproxy機能を使うことで、ウェブアプリと同一ドメイン、ポートでFunctionにアクセスすることができます。 APIのエンドポイントをdevと本番で変える必要がなくなるため便利です。
github上に、create-react-app-lambdaという名前で、create-react-appでFunctionsを利用する場合のサンプルプロジェクトが公開されています。
netlify.toml の設定、 package.json の proxy 設定を自分のプロジェクトにコピーし、src/lambda に関数を定義してください。
※proxy機能を使うと、Invalid Host Headerというエラーが出るようになります。
.env.development にCloud9のホスト名を書いても回避できませんでした。
今回は、一番危険な .env.development.local に DANGEROUSLY_DISABLE_HOST_CHECK=true を記入する回避策をとりました。
Deploy
GitLabアカウントでNetlifyにログインして、デプロイしたいプロジェクトを選択します。
これで、アプリの公開準備は完了です。
GitLab上のプロジェクトのmasterブランチにpushすると、netlify.toml に記載された build コマンドが実行され、その結果が自動生成されたURLで公開されます。
デフォルトでhttpsに対応しています。
今回作成したアプリはここからアクセスできます。