AWS SDK for JavaScript Version3を使用してS3からのファイル取得を行いたい。
Node.js+WebPackでブラウザから利用できる形を生成しWebシステムに組み込みたい。
前提
AWS SDK for JavaScript Version3を使ってWebブラウザに組み込めるJavaScriptを生成しAWS(今回はS3からのデータ取得）サービスの利用をしたいです。
proxy経由が必要なので aws-sdk-v3-proxy（https://www.npmjs.com/package/aws-sdk-v3-proxy）
を使用しています。
一度Node.js上で動作するサンプルを作成し、S3にアクセスできたのでこちらを関数化しブラウザから利用したいと考えています。
（キーの扱いなど未だ見直す必要がある個所がありますが一旦動作確認をしたいと思っています。）
生成方法を調べながら進めて、なんとかエラーなしで参照するjs(bundle.js)を出力でき、早速利用をしたのですが関数の実行時に
エラーメッセージに書いた内容が出ています。
多分ビルドの仕方が間違えていると思うのですが解決策がわからず悩んでいます。
発生している問題・エラーメッセージ
ブラウザ上で caught TypeError: a.replace is not a function at 9539 (bundle.js:2:368923) at r (bundle.js:2:375603) at 7286 (bundle.js:2:207885) at r (bundle.js:2:375603) at 9508 (bundle.js:2:225008) at r (bundle.js:2:375603) at 5181 (bundle.js:2:70691) at r (bundle.js:2:375603) at 6962 (bundle.js:2:105755) at r (bundle.js:2:375603) と出ていますがここは自分で書いたコードの個所ではなくバンドルされたファイルが原因でした。。 おそらく自分のjsファイルの生成の仕方が間違えているのかと思い> 引用テキストます。 もう一点 Uncaught ReferenceError: getPngFileFromS3 is not defined と使いたい関数が未定義扱いになってしまっています。
該当のソースコード
Node.js(test02.js生成元)
1//aws-sdk-v3-proxyで必要(ID,passwordあり） 2 process.env.HTTP_PROXY = "http://xxxxx:xxxxxxxxx@proxy-xx.xxxx.co.jp:8080"; 3 process.env.HTTPS_PROXY = "http://xxxxx:xxxxxxxxx@proxy-xx.xxxx.co.jp:8080"; 4 5import { S3Client, GetObjectCommand, PutObjectCommand } from "@aws-sdk/client-s3"; 6import { addProxyToClient } from "aws-sdk-v3-proxy"; 7 8// AWS S3クライアントの初期化 9const s3Client = addProxyToClient(new S3Client({ 10 region: 'ap-northeast-1', 11 credentials: { 12 accessKeyId: 'XXXXXXXXXXXXXXXXXXXXXXXXXX', 13 secretAccessKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX' 14 } 15})); 16 17// S3からPNGファイルを取得する関数 18async function getPngFileFromS3(bucketName, key) { 19 try { 20 const command = new GetObjectCommand({ Bucket: bucketName, Key: key }); 21 const response = await s3Client.send(command); 22 23 const imageBuffer = await new Response(response.Body).arrayBuffer(); 24 const base64Image = arrayBufferToBase64(imageBuffer); 25 console.log('Success:Change Base64 Format'); 26 27 return `data:${response.ContentType};base64,${base64Image}`; 28 29 } catch (error) { 30 console.error('Error retrieving Jpg file:', error); 31 throw error; 32 } 33} 34 35// ArrayBufferをBase64文字列に変換する関数 36function arrayBufferToBase64(buffer) { 37 let binary = ""; 38 const bytes = new Uint8Array(buffer); 39 const len = bytes.byteLength; 40 for (let i = 0; i < len; i++) { 41 binary += String.fromCharCode(bytes[i]); 42 } 43 return btoa(binary); 44} 45 46window.getPngFileFromS3 = getPngFileFromS3; 47
webpack.config
1const path = require("path"); 2const webpack = require('webpack'); 3 4module.exports = { 5 plugins: [ 6 new webpack.DefinePlugin({ 7 'process.env.NODE_DEBUG': JSON.stringify(true) 8 }) 9 ], 10 entry: "./test02.js", 11 output: { 12 path: path.resolve(__dirname, "dist"), 13 filename: "bundle.js", 14 //library: "MyLibrary", 15 libraryTarget: "window", 16 }, 17 resolve: { 18 fallback:{ 19 child_process: false, 20 fs: false, 21 crypto: false, 22 net: false, 23 tls: false, 24 "http": require.resolve("stream-http") , 25 "https": require.resolve("https-browserify") , 26 "http2": require.resolve("http2") , 27 } 28 29 } 30 31};
test01.html(作成関数の確認用）
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Web ブラウザから AWS SDK for JavaScript Version 3 を使用する</title> 5 </head> 6 <body> 7 <script src="dist/bundle.js"></script> 8 <script> 9 // データ取得関数を呼び出す 10 const bucketName = "your-bucket-name"; 11 const key = "your-object-key"; 12 const data = getPngFileFromS3(bucketName, key); 13 data.then((result) => { 14 console.log(result); 15 }); 16 </script> 17 </body> 18</html>
試したこと
npm run build時に「aws-sdk-v3-proxy」モジュールが原因でnpm run buildの際に"http","https","http2"に関するエラーが出ていました。
これを回避するためにネットで調べた方法で
resolve: {
fallback:{
...
"http": require.resolve("stream-http") ,
"https": require.resolve("https-browserify") ,
"http2": require.resolve("http2") ,
}
}
を入れたりしてエラーは消すことができbundle.jsを生成できたのですが、実際にこれをテスト用のHTML上のscripタグでよび、
作成した関数に差し掛かった時に、エラーに書いた内容が発生しています。
なお、このモジュール（「aws-sdk-v3-proxy」）をインポートしない場合のソースを作成し(proxyが不要な構成）
試したところビルド時も何もしなくても"http","https","http2"のエラーがでず関数実行時もエラーがなさそう※でしたので
このモジュールに対する正しい対応が必要かと思っています。
(※proxy設定なしのソースをproxy下で実施したので、当然S3へのデータの取得までできていないが関数実行時に
「発生している問題・エラーメッセージ」に出る様な関数内のエラーは表示されず通常に期待する接続失敗の
エラーが発生し終了した）
また、これより前に他のproxy関係のモジュールも何個か試したのですがなぜかproxyを利用できず、やむなくこのモジュールを使った構成にしています。
補足情報（FW/ツールのバージョンなど）
Visual Studio Code Ver.1.82.2
npm:10.1.0
node.js:v18.18.0
Package.json
"http2": "^3.3.7",
"https-browserify": "^1.0.0",
"stream-browserify": "^3.0.0",
"stream-http": "3.2.0",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"
"aws-sdk-v3-proxy": "^2.1.2",
0 コメント