たくさんの自由帳
Androidのお話
たくさんの自由帳
投稿日 : | 0 日前
文字数(だいたい) : 12629
目次
本題
Lambda でリサイズからの S3 + CloudFront で配信
作戦
構成図
つくる
Lambda で動く UltraHDR 付き ImageMagick をビルドする
Lambda で ImageMagick を動かすためには
ライブラリ同梱の詳細
ビルド準備
Amazon Linux 2023 を用意する
必要なパッケージを入れる
libjpeg
zlib
libpng
libwebp
libultrahdr
ImageMagick
ImageMagick
ビルドした ImageMagick を起動してみる
zip に固める
Lambda Layer として登録
S3 バケットを作る
受け付け用バケットに画像をいれる
Lambda S3 のアクセス権限のためのポリシーとロール作成
Lambda Node.js で動かす JavaScript を書く
環境構築
TypeScript
zip にする
画像が UltraHDR かどうかの判定
Lambda を作る
Lambda 環境変数追加
LambdaLayer を追加
メモリ上限とタイムアウトを緩和する
テスト
テストうごいた!
受け付け用バケットに画像が入ったら Lambda が起動するように
受け付け用バケットに入れてもうごく!
受け付け用バケットは勝手に削除されるように
完成
おまけ CloudFront で公開する手順
おわりに
おわりに2
おわりに3
どうもこんにちは、飲み会した。
今回の記事で作ったAmazon S3+Lambda+CloudFront
製画像変換&配信システム
のお陰で、ちゃんとUltraHDR
の画像が貼れているはず。
飯もあります。
飯テロするか~~~w
そういえば言われた。
わたし、更に痩せたらしい。のでいっぱい食べてきた。
UltraHDR
をブログに貼りたい。が、世の中のサービスはUltraHDR
無視されてJPEG
になってしまうので、UltraHDR
のまま配信出来る何かを探す必要があった。
あと、ブログ用に画像をGIMP
で小さくしてるけど手間だし自動でやってほしいし、そもそもUltraHDR
は無理だからそれもなんとかしたい。
これだ。よくあるAWS
サーバーレス入門みたいなやつ。
S3
バケットにブログに貼りたい画像をアップロードすると、Lambda
が起動して、ImageMagick
を使って半分くらいのサイズにしたあと、
リサイズ保存用S3
バケットに放り込まれるようにし、このバケットをCloudFront
で配信する。完璧じゃん。
S3
に画像を放り込んだらAWS Lambda
が起動して、ImageMagick
で変換する。
できる限りそのままの画像をアップする/original
と、ブログに乗せる用に小さくした/resize
へそれぞれ画像を配置する。
変換過程ですが、画像をアップロードするとUUID
が払い出され、できる限りそのままの画像と、配信用に半分くらいにした画像が保存されます。
おなじUUID
になる。
CloudFront
の部分はAWS S3+CloudFront
で静的サイトの記事で触ったので、あんまり触れません、、
今回の記事はAWS Lambda
で画像をリサイズしたいので。
AWS Lambda
で動くUltraHDR
付きImageMagick
を作る(一番大変)S3
の受け付け用、配信用バケットを作るLambda
で動かすためのコードを書くS3
をトリガーに起動するようにするCloudFront
で配信する画像を小さくするためのImageMagick
をLambda
で動くようにビルドします
いまNode.js
で画像のリサイズをしたいならsharp
ってのが良いらしいんですが、
UltraHDR
に対応していないので今回はImageMagick
にします。
ImageMagick
のビルドだけならそんなに難しくない。
https://takusan.negitoro.dev/posts/imagemagick_build_add_ultra_hdr/
ただ、それはお使いのマシンに既にインストールされている(もしくはインストールした)libjpeg-dev
やlib-png
に依存しているからで、
パッケージを新たに入れることが出来ない(yum install
出来ない)AWS Lambda
では、少し考える必要があります。
Lambda
にはLambda Layer
と呼ばれる機能があり、Lambda
が動くマシンに依存関係を配置させる事ができます。
この機能を使い、必要なバイナリをすべて同梱して、Lambda Layer
機能を使い、Lambda
のマシンにImageMagick
のバイナリや必要なライブラリを配置させます。
と、いうわけで、今回はLambda
で動くImageMagick (ライブラリ同梱済み)
を作ろうと思います。
先述の通りAWS Lambda
環境下では、apt install
等でインストールする事がが出来ないため、
libjpeg-dev
相当のライブラリもImageMagick
と一緒に同梱する必要がある。そのせいでビルドが結構面倒なことになってる。
今回は必要なライブラリをすべて/opt
にインストールすることにします。(/opt/bin
や/opt/lib
みたいになる)
なぜかと言うと、これで/opt
をすべてzip
に固めてLambda Layer
に登録すれば、パスが通った状態になるんですよね。
(Lambda Layer
は/bin
にパスが通った状態になるそう)。
Amazon Linux 2023
。WSL
で起動する方法があるそうなのでこれでいきます。
が、公式のものじゃないらしいので、どうしても気になる人はEC2
借りるなりLightsail
でAmazon Linux 2023
のマシンを用意しても良いかもしれません。
スペックは多少高いものを選ばないとダメそう(Lightsail
の一番下を選んだら固まってしまった...)
これでビルドします。
なぜかと言うと、AWS Lambda
を実行するためのマシンが使っている、Linux ディストリビューション
がAmazon Linux 2023
だそうで、
OS
同じでビルドすれば多分動くでしょって。
というかUbuntu
でビルドしたら何回やってもダメだったから、Lambda
の環境と同じディストリビューションにしてみた、
標準Cライブラリとやらのバージョンが一致してないとかなんとかで。
Error: Command failed: /opt/bin/magick --version",
/opt/bin/magick: /lib64/libc.so.6: version `GLIBC_2.38' not found (required by /opt/lib/libMagickCore-7.Q16HDRI.so.10)
/opt/bin/magick: /lib64/libm.so.6: version `GLIBC_2.38' not found (required by /opt/lib/libMagickCore-7.Q16HDRI.so.10)
/opt/bin/magick: /lib64/libm.so.6: version `GLIBC_2.35' not found (required by /opt/lib/libMagickCore-7.Q16HDRI.so.10)
/opt/bin/magick: /lib64/libm.so.6: version `GLIBC_2.38' not found (required by /opt/lib/libMagickWand-7.Q16HDRI.so.10)
/opt/bin/magick: /lib64/libc.so.6: version `GLIBC_2.38' not found (required by /opt/lib/libMagickWand-7.Q16HDRI.so.10)
update + upgrade
のコンボ、あとapt
のbuild-essential
に当たるDevelopment Tools
を入れます。
wget
も入ってなかった...
yum update
yum upgrade
yum groupinstall "Development tools"
yum install wget
ここからダウンロードリンクが探せるので、wget
か何かで落として解凍。gz
の方です。
cd ~
wget https://www.ijg.org/files/jpegsrc.v9f.tar.gz
tar xvzf jpegsrc.v9f.tar.gz
cd jpeg-9f
prefix
オプションで/opt
にインストールするように設定して、make
してinstall
。
ライブラリ創作先に/opt
を追加します。
./configure --prefix=/opt CPPFLAGS=-I/opt/include LDFLAGS=-L/opt/lib --disable-dependency-tracking --enable-shared
make
make install
make install
すると/opt
にバイナリが配置されているはずです。
見てみましょう。
ls /opt
入ってますね!
libpng
がこれを使っているらしいのでこれもビルドします。
同様にホームページからダウンロードリンクを探してwget
で落とします。gz
の方です。
cd ~
wget https://www.zlib.net/zlib-1.3.1.tar.gz
tar xvzf zlib-1.3.1.tar.gz
cd zlib-1.3.1
./configure --prefix=/opt
make
make install
http://www.libpng.org/pub/png/libpng.html
同様にlibpng
もダウンロードリンクを探してwget
で落とします。gz
の方で。
cd ~
wget http://prdownloads.sourceforge.net/libpng/libpng-1.6.47.tar.gz
tar xvzf libpng-1.6.47.tar.gz
cd libpng-1.6.47
./configure --prefix=/opt CPPFLAGS=-I/opt/include LDFLAGS=-L/opt/lib --disable-dependency-tracking --enable-shared
make
make install
https://developers.google.com/speed/webp/docs/compiling?hl=ja
webp
の画像を扱う予定があれば。この通りに進めます。
libgif
が無くてもビルドは出来た...、GIF
が扱えないだけでwebp
は使えるのかな
cd ~
wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.5.0.tar.gz
tar xvzf libwebp-1.5.0.tar.gz
cd libwebp-1.5.0
./configure --prefix=/opt CPPFLAGS=-I/opt/include LDFLAGS=-L/opt/lib --disable-dependency-tracking --enable-shared
make
make install
https://github.com/google/libultrahdr/blob/main/docs/building.md
UltraHDR
のビルドです。
これはCMake
なので他とは若干違う。また、libjpeg
が必要なので、予めビルドして/opt
にインストールしておいてください。
ビルド手順がDebian
系列になっているのでCentOS
系列用?に読み替える必要があります。
あといくつかオプションを指定してLambda Layer
に入れられるようにします。
まずはビルドに必要なツールを
yum install cmake pkg-config ninja-build
次にソースコードを落として、ビルド用のフォルダを作ります。
cd ~
git clone https://github.com/google/libultrahdr.git
cd libultrahdr
mkdir build_directory
cd build_directory
そしたらビルドします。
オプションですが、
gcc
、g++
をコンパイラに指定
yum groupinstall "Development Tools"
で付いてくるはず/opt/lib
に
libjpeg
が/opt/lib
にあるので、それを使うlib
に配置
Debian
系は/lib
に配置してくれるが、CentOS系列?
はlib64
に配置しようとするLambda Layer
はlib
にしかパスが通ってないのでlib
に合わせる/opt
--prefix=/opt
みたいな../
はpwd
がbuild_directory
で、親にあるものを探すためcmake -G Ninja -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_PREFIX_PATH=/opt/lib -DCMAKE_INSTALL_LIBDIR=lib -DCMAKE_INSTALL_PREFIX=/opt ../
ninja
ninja install
ソースコードを持ってきます
7.1.1-47
は最新リリースに合わせてください→ https://github.com/ImageMagick/ImageMagick/releases
cd ~
git clone --depth 1 --branch 7.1.1-47 https://github.com/ImageMagick/ImageMagick.git ImageMagick-7.1.1
cd ImageMagick-7.1.1
そうしたら、デリゲートライブラリの捜索先に/opt/lib
を指定します。これでさっきビルドしたlibjpeg
たちを発見できるはずです。
export ...
の1行ですね。
configure
は先駆者のママです。何も分からず。。これでAWS Lambda
で動く。
UltraHDR
はデフォルト無効なのでyes
を付けます。
export PKG_CONFIG_PATH=/opt/lib/pkgconfig
./configure CPPFLAGS=-I/opt/include LDFLAGS=-L/opt/lib --prefix=/opt --disable-docs --without-modules --enable-delegate-build --without-magick-plus-plus --without-perl --without-x --without-dmr --without-heic --without-jbig --without-lcms --without-openjp2 --without-lqr --without-lzma --without-pango --without-raw --with-rsvg --without-tiff --disable-openmp --disable-dependency-tracking --with-uhdr=yes
jpeg
やpng
、uhdr
がyes
になっているはず。
そしたらmake
してmake install
です。
make
make install
ソースコードを持ってきます
7.1.1-47
は最新リリースに合わせてください→ https://github.com/ImageMagick/ImageMagick/releases
cd ~
git clone --depth 1 --branch 7.1.1-47 https://github.com/ImageMagick/ImageMagick.git ImageMagick-7.1.1
cd ImageMagick-7.1.1
そうしたら、デリゲートライブラリの捜索先に/opt/lib
を指定します。これでさっきビルドしたlibjpeg
たちを発見できるはずです。
export ...
の1行ですね。
configure
は先駆者のママです。何も分からず。。
UltraHDR
はデフォルト無効なのでyes
を付けます。
export PKG_CONFIG_PATH=/opt/lib/pkgconfig
./configure CPPFLAGS=-I/opt/include LDFLAGS=-L/opt/lib --prefix=/opt --disable-docs --without-modules --enable-delegate-build --without-magick-plus-plus --without-perl --without-x --without-dmr --without-heic --without-jbig --without-lcms --without-openjp2 --without-lqr --without-lzma --without-pango --without-raw --with-rsvg --without-tiff --disable-openmp --disable-dependency-tracking --with-uhdr=yes
jpeg
やpng
、uhdr
がyes
になっているはず。
そしたらmake
してmake install
です。
make
make install
version
返ってくるか確認です!
ちゃんとDelegates
の欄にjpeg
やpng
やuhdr
があります!
/opt/bin/magick --version
結果。
Version: ImageMagick 7.1.1-47 Q16-HDRI x86_64 c8f4e8cb7:20250329 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI
Delegates (built-in): jng jpeg png uhdr webp zlib zstd
Compiler: gcc (11.3)
問題なく動作したらLambda Layer
を作りましょ。
これで/opt
にインストールしたlibjpeg
やImageMagick
やlibc
がzip
に。Windows
のエクスプローラーからWSL2
のドライブ見れるので拾ってください。
cd /opt
zip -r ~/imagemagick-layer.zip .
Lambda
→レイヤー
→レイヤーの作成
へ進み、適当な名前をつけます。
さっき作ったzip
を放り込んで、アーキテクチャはx86_64
、ランタイムはNode.js
で!
これでImageMagick
をAWS Lambda
から呼び出す準備はおっけーです。
チュートリアルのそれと同じ
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/with-s3-tutorial.html
バケットを作ります。画像を受け付けるバケットと、リサイズした画像を置いておくバケットです。
事故が起きるくらいなら入力、出力で2つ作ったほうが良いです。
UltraHDR
のImageMagick
をビルドしたので、UltraHDR
の画像で
IAM
のポリシー
ページを開いて、以下のJSON
を貼り付ける。
CloudWatch
は使わないので消しました、、(いいのか?)
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:GetObject"
],
"Resource": "arn:aws:s3:::*/*"
},
{
"Effect": "Allow",
"Action": [
"s3:PutObject"
],
"Resource": "arn:aws:s3:::*/*"
}
]
}
そしたら次に進んで、よしなに名前をつけてください。
ポリシーが出来たら、ロールを作ります。Lambda
を先に作成すると対応するロールが作成されているかもしれない、、
IAM
のロール
ページを開いて、ロールを作成
を押します。
AWS のサービス
を選び、その下はLambda
にします。
そしたら次に進み、先程作成したポリシーを付けてあげて、次へ進みます。名前間違えてエラーになったのでリロードするなりして合ってるか確認してね。
名前はよしなにつけてください。
今回はJavaScript (Node.js)
にします、Java
も出来るそう、、ですが郷に従え(チュートリアル)というわけで。
別にこの規模ならJavaScript
で良いし。ローカルで適当にnpm init
します。
npm init
つぎに、必要なライブラリをば。
今回はTypeScript
をJavaScript
にしてzip
に詰めてアップロードする気でいます。
aws-lambda
の型定義と、esbuild
を入れます。
esbuild
でts
をjs
にしてLambda
で動かします。Node.js
で.ts
はまだ厳しそう雰囲気(もう少しな気はする)
あとs3
クライアント
npm install -D @types/aws-lambda esbuild
npm i @aws-sdk/client-s3
次に.js
にするためのコマンドを書きます。package.json
を開いて、"scripts": { }
の部分をこうします。
Windows
でしか動かないと思います。多分del
をrm
に、powershell Compress-Archive ...
をzip
コマンドに置き換えればLinux
でも動くはず?
"scripts": {
"prebuild": "del /q dist",
"build": "esbuild index.ts --bundle --minify --sourcemap --platform=node --target=es2020 --outfile=dist/index.js",
"postbuild": "cd dist && powershell Compress-Archive -Force -Path index.js* -DestinationPath ../dist.zip"
},
全部張ります。ドーン。
UltraHDR
に対応させたので複雑です、、、あとバケット名はLambda
環境変数から取り出すようにしました。
import child_process from 'child_process'
import { promisify } from 'util'
import fs from 'fs/promises'
import { randomUUID } from 'crypto'
import path from 'path'
import { S3Event } from 'aws-lambda'
import { S3Client, GetObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3'
// "GainMap"の文字をバイト配列
const GAINMAP_TEXT_BYTE = Buffer.from('GainMap', 'utf8')
// exec() を Promise に
const exec = promisify(child_process.exec)
// S3 クライアント
const s3 = new S3Client({ region: 'ap-northeast-1' })
// 変換した画像の保存先 S3 バケット名(Lambda 環境変数)
const RESULT_S3_BACKET_NAME = process.env['S3_RESULT_BACKET_NAME']
export const handler = async (event: S3Event) => {
const bucket = event.Records[0].s3.bucket.name
const key = decodeURIComponent(event.Records[0].s3.object.key.replace(/\+/g, ' '))
// 拡張子を取得
const imageExtension = key.match(/\.([^.]*)$/)?.[0].toLowerCase()
if (!imageExtension) {
console.log('拡張子が不明です。')
return
}
try {
// S3 から追加された画像を取り出す
const response = await s3.send(new GetObjectCommand({
Bucket: bucket,
Key: key
}))
const inputImageByteArray = await response.Body?.transformToByteArray()
if (!inputImageByteArray) {
console.log('S3 からデータが取得できませんでした')
return
}
// 作業用フォルダをつくる
// Lambda はインスタンス再利用されるかもなのでできればランダム
const tempDirectory = await fs.mkdtemp('/tmp/image')
// ImageMagick に渡すため /tmp に保存
const inputFilePath = path.join(tempDirectory, `input${imageExtension}`)
await fs.writeFile(inputFilePath, inputImageByteArray)
// 変換した画像データの保存先
// できる限りそのままの画像と、リサイズで2つ
const originalImagePath = path.join(tempDirectory, `original${imageExtension}`)
const resizeImagePath = path.join(tempDirectory, `resize${imageExtension}`)
// ImageMagick でリサイズ
// ついでに Exif に回転情報があれば画像自体を回転させて、Exif も消す(スマホの名前とか入ってる)
if (Buffer.from(inputImageByteArray.buffer).includes(GAINMAP_TEXT_BYTE)) {
// UltraHDR 画像の場合は uhdr: を付ける必要があるので
await Promise.all([
await exec(`magick -define uhdr:output-color-transfer=hlg -define uhdr:hdr-color-transfer=hlg uhdr:${inputFilePath} -auto-orient -strip uhdr:${originalImagePath}`),
await exec(`magick -define uhdr:output-color-transfer=hlg -define uhdr:hdr-color-transfer=hlg uhdr:${inputFilePath} -auto-orient -strip -resize 50% uhdr:${resizeImagePath}`)
])
} else {
// UltraHDR じゃない
await Promise.all([
await exec(`magick ${inputFilePath} -auto-orient -strip ${originalImagePath}`),
await exec(`magick ${inputFilePath} -auto-orient -strip -resize 50% ${resizeImagePath}`)
])
}
// 画像を取得
const [originalByteArray, resizeByteArray] = await Promise.all(
[originalImagePath, resizeImagePath]
.map((imagePath) => fs.readFile(imagePath))
)
// 2つの画像で同じ UUID になるように
// パスは /original と /resize
const fileName = `${randomUUID()}${imageExtension}`
const originalPut = new PutObjectCommand({
Bucket: RESULT_S3_BACKET_NAME,
Key: `original/${fileName}`,
Body: originalByteArray
})
const resizePut = new PutObjectCommand({
Bucket: RESULT_S3_BACKET_NAME,
Key: `resize/${fileName}`,
Body: resizeByteArray
})
// 出力先 S3 にアップロード
await Promise.all([s3.send(originalPut), s3.send(resizePut)])
} catch (error) {
console.log(error)
}
}
index.js
とindex.js.map
を一つのzip
にしてくれるコマンドをscripts
で定義したので、これを叩けばdist.zip
が出来上がるはずです。
npm run build
そのままImageMagick
に入れるとjpeg
で処理されるため、gainmap
が消えちゃう、(uhdr:
指定が必要)。
UltraHDR
を配信するためにS3+CloudFront
にしているのに、、、
というわけで、exec()
の段階でUltraHDR
画像かを判定する必要がある。
バイナリエディタを眺めてた結果、GainMap
ってバイト配列の文字列が入っていたので、このバイト配列があるかで判定すれば良いはず。
あんまり自信ないけど自分しか使わないし!
それがこれです。
const GAINMAP_TEXT_BYTE = Buffer.from('GainMap', 'utf8')
const imageByteArray = await fs.readFile('nomikai.jpg') // 画像パス
const hasGainMap = imageByteArray.includes(GAINMAP_TEXT_BYTE) // GainMap があれば UltraHDR
Lambda
の作成ページを開いて、適当な名前をつけ、x86_64
を選び、ロールはさっき作ったものを選びます。
あとは関数を作成
を押せばいいです、
できたらアップロード先
を押して.zip
をアップロードします。
保存先バケットの名前を環境変数から取り出すようにします。
ここのENVIRONMENT VARIABLES
の+
から以下の名前でバケット名を入れてください。
間違えても受け付け用バケットの名前を入れないように!(無限ループする)
ここのLayer
を押すとスクロールするので、レイヤーの追加
からさっきアップロードしたLambdaLayer
を選択する。
ImageMagick
をLambda
のデフォルトスペックで動かすと厳しいっぽい?
Error: Task timed out after 3.00 seconds
というわけでメモリ割り当てとタイムアウトを増やします、設定を開きます。
10秒くらいで終わらせるためには2GB (2048MB)
欲しいですね。。
よく見ると10GB
まで使えるらしいですが、私のAWS
アカウントだと3GB
までしか使えませんでした!w。
サポートに言えば解禁してくれるらしいです。
テスト
を選ぶ。
よしなに名前をつけて、JSON
は以下を貼り付けてください。が、一部直して貰う必要があります!!
{
"Records": [
{
"eventVersion": "2.0",
"eventSource": "aws:s3",
"awsRegion": "ap-northeast-1",
"eventTime": "1970-01-01T00:00:00.000Z",
"eventName": "ObjectCreated:Put",
"userIdentity": {
"principalId": "EXAMPLE"
},
"requestParameters": {
"sourceIPAddress": "127.0.0.1"
},
"responseElements": {
"x-amz-request-id": "EXAMPLE123456789",
"x-amz-id-2": "EXAMPLE123/5678abcdefghijklambdaisawesome/mnopqrstuvwxyzABCDEFGH"
},
"s3": {
"s3SchemaVersion": "1.0",
"configurationId": "testConfigRule",
"bucket": {
"name": "受け付け用バケットの名前",
"ownerIdentity": {
"principalId": "EXAMPLE"
},
"arn": "受け付け用バケットの arn"
},
"object": {
"key": "受け付け用バケットにアップロードした画像のkey (名前)",
"size": 1024,
"eTag": "0123456789abcdef0123456789abcdef",
"sequencer": "0A1B2C3D4E5F678901"
}
}
}
]
}
できたら保存
からのテスト
で。スペックを上げたので10秒くらいで終わるはず。
保存先バケットを開いてみてください。original/
とresize/
にちゃんと入っているはず!
Lambda
のトリガーを追加
を押します。
そしたらS3
を選んで
バケット
は受け付け用バケットに、すべてのオブジェクト作成イベント
になってることを確認して、
一番下にあるチェックマークにチェックを入れて、追加
。
これでS3
がいます!
S3
の画面にJPEG
をどーーん
Lambda
のモニタリング
のInvocations
を見ると呼び出されてるのが分かるはず。
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/lifecycle-expire-general-considerations.html
ライフサイクル
機能があります。
今回は受け付け用バケットで、特に保護とかは興味がないので、バージョニングは無効です。
無効にしている場合、上記の URL を見る限りライフサイクルがトリガーされ期限切れになったら、削除になるらしい(バージョニング無効なので)
というわけで追加します。受け付け用バケットでやること。
作成を押します。
バケット内のすべてのオブジェクトに適用
にして、オブジェクトの現行バージョンを有効期限切れにする
にチェックを入れます。
日数はお好みで、まあ1日
でも長いんですが
ここもよく見ると、バージョニング無効の場合は有効期限切れが削除になるって。
これでオブジェクトをアップロードしてみると、削除日時が表示されます。
あとは保存先バケットをCloudFront
で公開するなりすれば画像を配信する超簡易的サーバーの完成。
S3+CloudFront
は前に記事にしたのでそれで!!!
詳しくは前書いたS3 + CloudFront
で静的サイトの記事で。CloudFront Functions
は不要です。
https://takusan.negitoro.dev/posts/aws_sitatic_site_hosting/
CloudFront
のディストリビューションを作る
S3
バケットS3
は公開しないのでOAC
を選ぶS3
のバケットポリシーに貼り付ける
S3
の画像のキー をくっつけた URL でアクセス、画像が返ってくること。
S3
にある画像を選んでキーをコピーするCustom SSL certificate - optional
のRequest certificate
を押す
完全修飾ドメイン名
を埋めて、DNS 検証
にして、リクエストCNAME 名
とCNAME 値
が表示されるので、自分のドメイン管理画面(私はCloudflare
)を開きDNS レコード
を追加する。
CNAME
を選んで、名前と値はAWS
に指示されたものを
AWS
がドメインを所持しているかの確認のためで、自分のドメインでCloudFront
を使うためには別の作業がいるCloudFront
にアクセスできるようにするため、再度DNS レコード
を追加する
CNAME
を選び、サブドメインなら名前欄に入れる、値はCloudFront ディストリビューション
のディストリビューションドメイン名
を入れる
DNS
での確認が終わって、AWS
のSSL 証明書
が使えるようになったら、CloudFront ディストリビューション
の管理画面を開き、Custom SSL certificate - optional
ではさっき作った証明書を、Alternative domain name (CNAMEs) - optional
で使いたいドメインを入れます。
代替ドメイン名
とカスタム SSL 証明書
が表示されてるはずAWS Lambda
で使ったソースコードです、npm i
からのnpm run build
でzip
が出来るので、説明通りデプロイして環境変数をセットすれば良いはず。
https://github.com/takusan23/oekakityou-lambda
ちなみに、自分ひとりしか使わないのでバリデーションとか一切していません。
不特定多数に使わせる場合はちゃんと整備したほうが良いと思います。
S3
のコンソールにアクセスしないと画像わからんし、アップロードのためにコンソールログインするのもあれなので、次回はそれを解決します。
超簡易的画像配信サーバーのクライアント編。