Node.js
S3
gulp
Vue.js
APIGateway

郵便番号検索APIを公開してみた

More than 1 year has passed since last update.


はじめに

以前に作った郵便番号検索番号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のコンポーネントに苦しみました。

やっぱり手を動かして、試行錯誤して作り上げていく作業は楽しいですな。

ではでは。