AWS Lamdbaに関数URL(AWS Lambda Function URLs)という機能が搭載され、爆速でAPIを構築できそうかつ、フロントとバックの画像のやりとりを実現してみたかったので、いじってみました。
NetworkX( https://networkx.org/ )はあくまで、グラフを描画するためだけなので、深くいじりません。

Web画面はreactを利用し、lambdaのコードはPythonで書いていきます。

関数URLの準備

本当に早くてびっくりしました。

関数の作成から、関数名を入力します
下の方にスクロールをして、「詳細設定」を開き、以下を選択します
- 関数URL
- 認証タイプ -> NONE
- オリジン間リソース共有(CORS)を設定
これで最低限が完了です。
右下に関数URLが作成されているため、開く
アクセスして確認してみる

初期のソースは以下ですね。

NetworkXとグラフプロットのコードを追加します

NetworkXをしてグラフを準備
Lambdaのtmpフォルダ(容量の拡張ができるようになりましたね！)にファイルを吐き出し
ファイルの情報を保持して、実ファイルの削除
base64でデコードしてreturnする
という流れです。(いらんもんimportしてるかも)
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/lambda-proxy-binary-media.html を参考に画像ファイルのやりとりを実現してます

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import json
import base64
import boto3
import os
import networkx as nx
import matplotlib.pyplot as plt
import sys

def lambda_handler(event, context):

  G = nx.fast_gnp_random_graph(10, 1) # 適当にグラフ作成
  nx.draw_circular(G) # 適当にグラフ作成
  save_folder = os.path.join("/tmp") # 作業フォルダ
  file_name = save_folder + "/NetworkXImg.png"
  plt.savefig(file_name) # ファイルの保存
  plt.close() # ファイルを閉じる

  image = open(file_name, "rb").read() # 画像の読み込み
  os.remove(file_name) # tmpデータを削除
  return {
         'headers': { "Content-Type": "image/png" },
         'statusCode': 200,
         'body': base64.b64encode(image).decode('utf-8'),
         'isBase64Encoded': True
  }

NetworkXのライブラリ情報は、以下の記事を参考にzip化してソースコードと一緒にアップロードしちゃいます
https://qiita.com/ta983kata/items/4c88e57336c11b683ec2#lambda-layer%E3%81%AE%E8%BF%BD%E5%8A%A0
以下の記事を参考に、numpyとmatplotlibのARNを持ってきてLayer部分にARNを指定します
https://qiita.com/polarbear08/items/202752d5ffcb65595bd9
Lambdaの準備が完了したので、5で確認したURLをもう一度確認してみます

お〜〜！簡単！

フロントの準備

以下のコマンドを実行し、プロジェクトを作成します
```
$ npx create-react-app test-project
```

必要最低限で、test-project/src/App.jsを少しいじります

import React, { useState, useEffect } from "react";
import './App.css';

function App() {

  return (
    <div className="App">
      <header className="App-header">
        <>関数URLの結果↓</>
        {/* src部分に関数URLの情報を入力 */}
        <img src={`https://XXXXXXXXXXXXXXXXX.lambda-url.ap-northeast-1.on.aws/`} />
      </header>
    </div>
  );
}
export default App;

reactのデフォルトは暗い色合いなので少しだけCSSをいじります。(カレントディレクトリのApp.css)

背景色と文字色だけ変えます

.App-header {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: black;
}

画面確認してみます

爆速でした。

最後に

Lambdaの関数URLは、技術検証で大いに活用できそうです。
また、追加料金を払うことでLambdaのtmpフォルダの容量も拡張できるそうなので、開発の幅が広がりそうです。