AWSLambdaでSVG to PNG 生成APIを生やした

AWSLambdaでSVG to PNG 生成APIを生やした みずあめ(@mizuameisgod) @Education-JAWS ＃0 ～Welcome Students! ～ 2024/11/21

自己紹介 本名 佐藤 良 年齢 18歳 活動名 みずあめ X @mizuameisgod Web mizuame.works ・筑波大学情報学群情報科学類1年 ・本職は業務委託でUnrealEngineのテクニカ ルアーティストをやっています ・インターンでゲーム関連のR&Dもやってま す ・オンラインゲームの制作がメイン ・最近はなぜかインフラもやってます ・Webは初心者、よくわかってない ・大学の友人の洗脳により、最近はオンプレに 気持ちがあります 興味⇨k8s

OGPとは Open Graph Protcol SNS等で共有した際に画像が表 示されるあれ .png.jpeg等が指定できるが、 svgは指定できない。

メインブログのOGP メインブログのOGPは一回一回イラレでOGPを作っています そこそこの頻度でこだわったOGPを設定したいと思っているので、 これは正しい

ブログ2欲しいな… • メインブログより気軽に書けるブ ログも欲しい • 思想強めの内容を書きたい • はてなブログ匿名ダイアリーな感 じだと良さげ Qiitaとかの感じをイメージ • 一記事自体の作成にコストをかけ たくないので、OGPを自動生成し よう

とりあえず色々な実装をみてみた • vercel/og 調べるとこれが一番使われているようだった。 内部的な仕組みだと 1, satoriというライブラリでHTML to SVG 2, resvgでSVG to PNG といった感じで最初にSVGを作り、それをPNGにするらしい

SVG to PNGのAPIを生やした方が汎用性高そう • 変なものをよく作る人間なので、OGP生成用として一括りにす るのではなく、SVG生成とPNGへのコンバートをそれぞれ独立 させた方が良さそうとなった。(他のサービス、システムでも使 えるので） Another Service f. GenerateSVG f. SVG to PNG

Cloudflare WorkersかAWS Lambdaか 今回に関しては、AWS Lambdaに軍配が上がると考えた。 なぜか？ Workersは無料枠内だと、Memory128MB制限、Limit0.01s Lambdaは無料枠内だと、 Memory128MB~10GB、Limit900s (100 万件の無料リクエストと、1 か月あたり 40 万 GB 秒無料) ※そもそも論、Workersは重い処理向けのサービスではない

Cloudflare WorkersかAWS Lambdaか 加えて、AWS Lambdaではバイナリが実行できるのも大きい (色々間違っている可能性があります） 例えばresvgをWorkersで動かす実装には、resvg-jsというwasm にコンパイルされたものを使っている(Workersはバイナリを実 行できない、元はRust実装) 加えてWorkersにはパッケージ1MB以下制限がある →色々動かせないnpmパッケージがある

結果的に、今回はAWS Lambdaを選択 どっちも良い点、悪い点があるため状況 によって選択すると良い

実装 Sharpという画像処理モジュールを使用 ランタイム Node.js 20.x →裏がlibvips →libvipsの裏はC実装、バイナリを叩いている ハンドラ index.handler →LambdaはAmazon Linuxで動いている →windowsPCの手元で動くものはぽしゃる (windows用のバイナリが落ちてくる) アーキテクチャ x86_64 Dockerで環境を作り、それをzipにした

実装 超重要 index.jsがある階層でzip化 これで1時間はまった

実装

実装 フォントが 反映されない →パスでフォント を直接指定しよう →Lambdaの パスって？

実装 結論 : /var/task に展開される https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/nodejs-package.html

• https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/nodejs-package.html

実装 <?xml version="1.0"?> <!DOCTYPE fontconfig SYSTEM "fonts.dtd"> <fontconfig> <dir>/var/task/fonts</dir> <cachedir>/tmp/fontconfig-cache</cachedir> <config> <rescan> <int>30</int> </rescan> </config> </fontconfig> フォントをただパスで指定しただ けでもこける font.confというファイルを作り、 指定する。 font.conf自体も環境変数で指定

実装 DDoS対策をした方が良い Amazon API Gateway AWS Lambda レート制限をかけましょう

実装 どこかに公開していなくても DDoSを受けるらしい https://{restapi_id}.execute-api.{region}.amazonaws.com/{stage_name}/ ある程度URLは推測可能なため、攻撃は発生しゆる →ステージ名初期値の「default」は使用しないなど 引用 : https://qiita.com/naka345/items/98582cfb45ab09c3df9f

OverView AWS Cloud

まとめ 汎用性とコストを考えた結果、 マルチベンダーになった Thank you for watching!!!