API Gatewayがバイナリデータをサポートしたので試してみました

2016.11.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは!モバイルアプリサービス部の加藤潤です。
今朝方Twitterを見ていたらAPI Gatewayがバイナリデータをサポートしたとの情報をキャッチしたので試してみました。
クライアントはcurlコマンドでもアプリでも何でもいいと思いますが、せっかくなのでまだプレビュー版ですが、最近発表されたVisual Studio for Macを使ってコンソールアプリを作ってみました。

作業環境

作業環境は以下の通りです。

  • macOS Sierra 10.12.1
  • Visual Studio for Mac Preview 1(7.0 build 347)

まずはLambda functionを作成する

以下、AWSのブログ通りに進めました。 まずはLambda functionを作成します。

1.「Create a Lambda function」をクリックします。

binary-data-now-supported-by-api-gateway-001

2.「Select blueprint」を「image」で検索し、image-processing-serviceを選択します。 binary-data-now-supported-by-api-gateway-002

3.「Next」をクリックします。 binary-data-now-supported-by-api-gateway-003

4.「Name」を入力します。 binary-data-now-supported-by-api-gateway-004

5.「Role」でCreate new role from template(s)を選択し、「Role name」を入力します。 binary-data-now-supported-by-api-gateway-005

6.「Create function」をクリックします。 binary-data-now-supported-by-api-gateway-006

次にAPIを作成する

7.「APIの作成」をクリックします。 binary-data-now-supported-by-api-gateway-007

8.「新しいAPI」を選択した状態で、API名を入力し、「APIの作成」をクリックします。(説明は任意です。) binary-data-now-supported-by-api-gateway-008

9.リソースでPOSTアクションをセットアップします。「Lambdaリーション」と先ほど作成した「Lambda関数」名を入力し、「保存」をクリックします。 binary-data-now-supported-by-api-gateway-009

10.「本文マッピングテンプレート」の「リクエスト本文のパススルー」で「テンプレートが定義されていない場合(推奨)」を選択、Content-Typeにimage/pngを追加し、その下で以下を入力します。

{
  "operation": "thumbnail",
  "base64Image": "$input.body"
}

binary-data-now-supported-by-api-gateway-010

11.「バイナリサポート」の「編集」をクリックします。 binary-data-now-supported-by-api-gateway-011

12.「バイナリメディアタイプ」にimage/pngを追加します。 binary-data-now-supported-by-api-gateway-012

13.APIをデプロイします。 binary-data-now-supported-by-api-gateway-013

curlコマンドで試す

curlコマンドで以下を実行します。original.pngが元画像ファイル名、thumbnail.pngがサムネイル画像のファイル名です。
XXXXXの部分やリージョンの部分はご自身の環境のものを入力してください。 curl --request POST -H "Accept: image/png" -H "Content-Type: image/png" --data-binary "@original.png" https://XXXXX.execute-api.ap-northeast-1.amazonaws.com/prod > thumbnail.png

結果

こちらは元画像です。

binary-data-now-supported-by-api-gateway-014

そしてこちらがサムネイル画像。サイズが100x100になっていることが確認できます。

binary-data-now-supported-by-api-gateway-015

Visual Studio for Macでコンソールアプリを作ってみた

  • Visual Studio for Macを起動して、「New Project...」をクリックします。 binary-data-now-supported-by-api-gateway-016

  • その他 > .NET > コンソールプロジェクトを選択します。言語はC#にしました。 binary-data-now-supported-by-api-gateway-017

  • 任意のプロジェクト名を入力して「作成」をクリックします。 binary-data-now-supported-by-api-gateway-018

ソースコード

Program.csに以下のような簡単なHTTPリクエストを行うコードを書いてみました。
※メモリに優しいコードではないので、あくまで参考までに。

using System;
using System.Net.Http;
using System.Net.Http.Headers;
using System.IO;

namespace BinarySupportClientSample
{
    class MainClass
    {
        public static void Main(string[] args)
        {
            try
            {
                using (var client = new HttpClient())
                using (var req = new HttpRequestMessage())
                {
                    client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("image/png"));
                    req.RequestUri = new Uri("https://xxxxx.execute-api.ap-northeast-1.amazonaws.com/prod");
                    req.Method = HttpMethod.Post;
                    req.Content = new ByteArrayContent(File.ReadAllBytes("original.png"));
                    req.Content.Headers.Add("Content-Type", "image/png");
                    var result = client.SendAsync(req).Result;
                    Console.WriteLine(result.StatusCode);
                    if (result.IsSuccessStatusCode)
                    {
                        File.WriteAllBytes("thumbnail.png", result.Content.ReadAsByteArrayAsync().Result);
                    }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex);
            }
        }
    }
}

実行してみる

ビルドするとexeファイルが出来上がるので、mono exeファイル名で実行します。コンソールにOKと表示され、以下のようにcurlコマンドと同様、サムネイルが作成できました。

binary-data-now-supported-by-api-gateway-020

おわりに

マネジメントコンソール上でバイナリサポートの設定を行うことで簡単にバイナリデータサポートの動作を確認することができました。
Visual Studio for Macも普通に使えたのでこれからもちょくちょく使っていきたいと思います!

参考