はじめに
以前に作った郵便番号検索番号APIを今回、公開してみました。
もし、良かったら使ってみてください。
http://api.includes.tech/
で、今回はAPIを公開するまでにしたことを紹介します。
API Gatewayで作成したAPIにカスタムドメインを割り当てる
2017年3月に、API GatewayがACM (AWS Certificate Manager)に対応したようで、Developers.IOにて紹介されています。
基本的には、この記事にあるとおり進めていくと、カスタムドメインかつSSLでAPIをホストすることができます。
紹介ページの作成とデプロイ
APIを公開しても、紹介しないことには、誰にも使ってもらえないので、ページを作成して、S3に静的ウェブサイトホスティングしてみました。
ビルド周りの技術スタック
Webpack + babel + Vue.js だけで乗り切れるかと思ったんですが、CSS周りが上手いことセットアップできずに、結果、gulp + gulp-webpack で連携するようにしました。
- Webpack
- babel
- gulp
- gulp-sass
- gulp-webpack
Vue.jsのビルドがうまく行かなかったので、CDNから利用するようにしました。
<script src="//unpkg.com/vue@2.2.6/dist/vue.min.js"></script>
Bootstrap4 + Font Awesome
CSSフレームワークをどれにするか相当迷ったんですが、結果、Bootstrap4を使うことにしました。
Bootstrap3を使ったことがあれば、違和感なく使えると思います。
これも基本CDNから利用しています。
Font Awesomeはソースをダウンロードして、gulpでビルドするようにしました。
Vue2 + jQuery3
実装のポイントをざっとまとめると、下記のようになります。
- APIごとにVueコンポーネントを作成
- テンプレートと実装をひとまとまりに
- APIコールはVueインスタンス側で実行
- 子コンポーネントにAPIのレスポンスをセットする
- AJAXはjQuery3を使用
デプロイ
npmのs3-deployをインストールし、npm runで実行します。
既にAWSの認証情報（~/.aws/credentials）が設定してあれば、リージョンとバケット名を指定するだけでS3にデプロイできるので大変便利です。
おわりに
API周りは、AWSの機能を組み合わせるだけで、簡単にセットアップできたので非常にスムーズでした。
一方でWebページの作成はあまり慣れていないせいか、ビルドツール周りでつまづき、さらに、Vueのコンポーネントに苦しみました。
やっぱり手を動かして、試行錯誤して作り上げていく作業は楽しいですな。
ではでは。