示例工程教程后端【免費(fèi)下載鏈接】aws-doc-sdk-examplesWelcome to the AWS Code Examples Repository. This repo contains code examples used in the AWS documentation, AWS SDK Developer Guides, and more. For more information, see the Readme.md file below.項(xiàng)目地址https://gitcode.com/gh_mirrors/aw/aws-doc-sdk-examples點(diǎn)擊查看免費(fèi)下載導(dǎo)讀本文以 AWS 官方代碼示例倉庫aws-doc-sdk-examples中的 lambda-for-browser 教程為主體完整講解如何用 AWS SDK for JavaScript (V3) 在瀏覽器中直接觸發(fā) Lambda 函數(shù)將用戶提交的數(shù)據(jù)寫入 Amazon DynamoDB。你將掌握 Amazon Cognito 身份池、未認(rèn)證訪客角色、Lambda 函數(shù)打包部署與瀏覽器端 webpack 打包的完整鏈路最終搭建一個(gè)可獨(dú)立運(yùn)行的前后端分離 Web 應(yīng)用并理解瀏覽器場(chǎng)景下 AWS 憑據(jù)分發(fā)與函數(shù)直調(diào)的安全邊界。場(chǎng)景與整體架構(gòu)本示例演示的是典型的“瀏覽器直調(diào) AWS 服務(wù)”模式前端頁面不經(jīng)過任何自建服務(wù)器直接通過 AWS SDK 調(diào)用 Lambda 函數(shù)由 Lambda 代表客戶端完成 DynamoDB 寫入。整個(gè)鏈路涉及四種 AWS 服務(wù)Amazon Cognito提供身份池Identity Pool為未登錄的“訪客”Guest頒發(fā)臨時(shí) AWS 憑據(jù)讓瀏覽器可以安全調(diào)用 AWS API。AWS Lambda承載業(yè)務(wù)邏輯——接收瀏覽器發(fā)來的事件負(fù)載并把數(shù)據(jù)寫入 DynamoDB。Amazon DynamoDB最終的數(shù)據(jù)存儲(chǔ)目標(biāo)保存前端提交的顏色Color與圖案Pattern等字段。AWS Identity and Access Management (IAM)通過身份池的訪客角色Guest Role與 Lambda 執(zhí)行角色控制兩側(cè)權(quán)限邊界。從源碼結(jié)構(gòu)看整個(gè)示例分為兩個(gè)獨(dú)立工程均位于 javascriptv3/example_code/cross-services/lambda-for-browser 目錄下前端工程frontend/由 HTML 表單、src/index.js 與 src/lambdaClient.js 組成通過 webpack 打包后以靜態(tài)資源形式提供。后端工程lambda/包含 src/index.js、ddbClient.js與ddbDocClient.js被打包成 ESM 模塊壓縮包后上傳為 Lambda 函數(shù)。數(shù)據(jù)流為瀏覽器表單 → Lambda 客戶端攜帶 Cognito 訪客憑據(jù)→InvokeCommand觸發(fā) Lambda → Lambda 內(nèi) DynamoDB Document Client 執(zhí)行PutCommand→ 記錄寫入lambda-for-browser表。環(huán)境準(zhǔn)備與前置要求開始前需要準(zhǔn)備以下條件AWS 賬戶用于創(chuàng)建 Cognito 身份池、DynamoDB 表與 Lambda 函數(shù)具體賬戶與 SDK 配置方法可參考倉庫根目錄 README.md 及官方《AWS SDKs and Tools Reference Guide》。Node.js 環(huán)境用于安裝依賴、執(zhí)行 webpack 打包。倉庫示例的package.json以aws-sdk/*3.370.0 系列包為基礎(chǔ)建議使用 Node.js 18ESM 模塊輸出依賴現(xiàn)代運(yùn)行時(shí)支持。注意事項(xiàng)與成本提示按最小權(quán)限原則least privilege配置角色僅授予完成任務(wù)所需的最低權(quán)限本示例涉及的全部服務(wù)均在 AWS Free Tier 免費(fèi)套餐覆蓋范圍內(nèi)但教程完成后務(wù)必終止所有資源避免產(chǎn)生持續(xù)費(fèi)用。該示例未在全部 AWS 區(qū)域驗(yàn)證部分服務(wù)僅在特定 Region 提供請(qǐng)確認(rèn)所用區(qū)域的服務(wù)可用性。控制臺(tái)操作時(shí)請(qǐng)注意選擇正確的 Region并在創(chuàng)建各資源時(shí)保持 Region 一致——前端lambdaClient.js中的REGION必須與身份池、Lambda、DynamoDB 所在區(qū)域匹配。第一步創(chuàng)建 Cognito 身份池與訪客角色瀏覽器無法持有長期密鑰因此本示例采用Cognito 身份池 未認(rèn)證訪客訪問的經(jīng)典方案身份池會(huì)為未登錄用戶簽發(fā)臨時(shí) AWS 憑據(jù)。創(chuàng)建步驟如下打開 Amazon Cognito 控制臺(tái)在側(cè)邊欄選擇Identity pools身份池。點(diǎn)擊Create identity pool創(chuàng)建身份池。勾選Guest access訪客訪問復(fù)選框——這是允許瀏覽器匿名調(diào)用 AWS API 的關(guān)鍵開關(guān)。選擇Next。選擇Create a new IAM role創(chuàng)建新的 IAM 角色。在IAM role字段中輸入角色名稱例如lambda-for-browser-guest-role。點(diǎn)擊Next輸入身份池名稱例如lambda-for-browser-identity-pool。再次點(diǎn)擊Next核對(duì)信息后點(diǎn)擊Create identity pool創(chuàng)建身份池。創(chuàng)建完成后在身份池詳情頁找到Identity pool ID形如區(qū)域:隨機(jī)字符串稍后需要把它填入前后端兩處源碼的IDENTITY_POOL_ID常量中。訪客角色的安全邊界默認(rèn)生成的訪客角色權(quán)限策略較寬泛而本示例瀏覽器端唯一需要執(zhí)行的動(dòng)作是調(diào)用 Lambda因此按最小權(quán)限原則應(yīng)收緊為僅lambda:InvokeFunction。按 README.md 的指引在 IAM 控制臺(tái)找到訪客角色在Permissions選項(xiàng)卡展開默認(rèn)策略并點(diǎn)擊Edit將策略 JSON 替換為{ Version: 2012-10-17, Statement: [ { Action: lambda:InvokeFunction, Resource: *, Effect: Allow } ] }保存后瀏覽器端通過 Cognito 身份池拿到的臨時(shí)憑據(jù)就只具備觸發(fā) Lambda 的權(quán)限無法直接讀寫 DynamoDB、S3 等其他資源。這既是安全的底線也體現(xiàn)了“瀏覽器只負(fù)責(zé)發(fā)起請(qǐng)求、敏感操作后移到 Lambda”的設(shè)計(jì)原則。第二步創(chuàng)建 DynamoDB 表在 DynamoDB 控制臺(tái) 中創(chuàng)建目標(biāo)數(shù)據(jù)表點(diǎn)擊Create table創(chuàng)建表。Table name表名填寫lambda-for-browser。README 明確指出表名必須與前端 frontend/src/index.js 中的TableName完全一致否則寫入會(huì)失敗。Partition key分區(qū)鍵填寫Id類型選擇Number。前端每次提交都會(huì)生成一個(gè) 1–10000 之間的隨機(jī)整數(shù)作為Id見下文源碼分析。Sort key排序鍵留空——本示例沒有任何查詢操作排序鍵無關(guān)緊要。其余選項(xiàng)保持Default settings默認(rèn)設(shè)置不變點(diǎn)擊Create table完成創(chuàng)建。第三步打包 Lambda 后端后端函數(shù)代碼位于 lambda/src 目錄。Lambda 運(yùn)行時(shí)本身已包含 AWS SDK因此后端打包并非必需這里之所以仍用 webpack 打包是為了讓代碼更小、結(jié)構(gòu)更緊湊。需要注意aws-sdk/*相關(guān)依賴被顯式排除在打包產(chǎn)物之外這一配置定義在 lambda/webpack.config.js 中。打包配置要點(diǎn)lambda/webpack.config.js 的關(guān)鍵配置如下externalsType: module與experiments.outputModule: true輸出標(biāo)準(zhǔn)的 ES Module。output.filename: index.mjs產(chǎn)物文件名為index.mjs。output.library.type: module以 ESM 庫形式導(dǎo)出。externals數(shù)組列出aws-sdk/client-cognito-identity、aws-sdk/client-dynamodb、aws-sdk/client-iam、aws-sdk/credential-provider-cognito-identity、aws-sdk/lib-dynamodb五個(gè)包——這些包在 Lambda 運(yùn)行環(huán)境中由運(yùn)行時(shí)提供無需打進(jìn)壓縮包。打包與上傳步驟按 README 的完整流程執(zhí)行替換身份池 ID打開 lambda/src/ddbClient.js把IDENTITY_POOL_ID IDENTITY_POOL_ID替換為第一步創(chuàng)建的身份池 ID。進(jìn)入lambda目錄cd lambda。安裝依賴npm i。執(zhí)行打包npm run build——該腳本對(duì)應(yīng) lambda/package.json 中的build: webpack產(chǎn)物生成在lambda/dist/index.mjs。將lambda/dist/index.mjs壓縮為.zip文件供后續(xù)上傳使用。后端源碼的數(shù)據(jù)寫入實(shí)現(xiàn)打包進(jìn)函數(shù)的業(yè)務(wù)邏輯在 lambda/src/index.js 中實(shí)現(xiàn)import { PutCommand } from aws-sdk/lib-dynamodb; import { ddbDocClient } from ./ddbDocClient.js; export const handler async (event) { const params { Item: { Id: event.Item.Id, Color: event.Item.Color, Pattern: event.Item.Pattern, }, TableName: event.TableName, }; try { console.log(Adding data to dynamodb...); const data await ddbDocClient.send(new PutCommand(params)); console.log(Added item:, JSON.stringify(data, null, 2)); } catch (err) { console.error(err); } };Lambda 直接消費(fèi)瀏覽器傳來的事件對(duì)象從event.Item中取出Id、Color、Pattern從event.TableName中取出目標(biāo)表名通過PutCommand寫入。這里使用的是DynamoDB Document Clientaws-sdk/lib-dynamodb相比底層DynamoDBClient它免去了手動(dòng) marshall 的繁瑣。Document Client 的組裝細(xì)節(jié)在 lambda/src/ddbDocClient.js 中通過DynamoDBDocumentClient.from(ddbClient, translateConfig)從底層客戶端派生其中marshallOptions與unmarshallOptions保持 SDK 默認(rèn)值不自動(dòng)轉(zhuǎn)換空值、不剝離 undefined、數(shù)字不包裝為字符串。而底層客戶端 lambda/src/ddbClient.js 使用fromCognitoIdentityPool作為憑據(jù)提供者——注釋說明CognitoIdentityClient({})的空參數(shù)構(gòu)造假定區(qū)域已由共享配置文件提供。第四步部署 Lambda 函數(shù)在 Lambda 控制臺(tái) 中完成函數(shù)創(chuàng)建與代碼上傳點(diǎn)擊Create function創(chuàng)建函數(shù)。Function name填寫examplePutItem——README 強(qiáng)調(diào)該名稱必須與前端 frontend/src/index.js 中的FunctionName完全一致否則瀏覽器無法觸發(fā)。展開Change default execution role更改默認(rèn)執(zhí)行角色區(qū)域。選擇Create a new role from AWS policy templates從 AWS 策略模板創(chuàng)建新角色。在Role name字段輸入角色名并在策略模板中選擇Simple microservice permissions——該模板會(huì)為 Lambda 授予訪問 DynamoDB 的權(quán)限。點(diǎn)擊Create function創(chuàng)建函數(shù)。在函數(shù)的Code代碼選項(xiàng)卡中選擇Upload from→.zip file上傳第四步打包好的.zip文件然后點(diǎn)擊Save。用控制臺(tái)測(cè)試事件驗(yàn)證部署部署完成后可先在控制臺(tái)做一次冒煙測(cè)試。點(diǎn)擊Test提供如下Event JSON{ Item: { Id: 1001, Color: tangerine, Pattern: solid }, TableName: lambda-for-browser }如果測(cè)試成功可在 DynamoDB 控制臺(tái)的lambda-for-browser表中看到Id 1001的記錄。這一步驗(yàn)證了 Lambda 的 IAM 執(zhí)行角色、表名與字段映射全部正確為接下來的前端聯(lián)調(diào)掃清障礙。第五步打包并運(yùn)行前端瀏覽器端代碼必須經(jīng)過 webpack 打包才能把瀏覽器兼容的 AWS SDK for JavaScript 一并產(chǎn)出。前端工程的打包配置 frontend/webpack.config.js 非常簡(jiǎn)單僅指定mode: production其余交給 webpack 默認(rèn)行為。前端配置修改打開 frontend/src/lambdaClient.js完成兩處替換IDENTITY_POOL_ID IDENTITY_POOL_ID→ 替換為第一步創(chuàng)建的身份池 ID。REGION REGION→ 替換為承載本示例所有資源的 Region。該文件的核心邏輯展示了瀏覽器側(cè)最重要的安全機(jī)制——用 Cognito 身份池憑據(jù)初始化 Lambda 客戶端import { LambdaClient } from aws-sdk/client-lambda; import { fromCognitoIdentityPool } from aws-sdk/credential-provider-cognito-identity; import { CognitoIdentityClient } from aws-sdk/client-cognito-identity; const IDENTITY_POOL_ID IDENTITY_POOL_ID; const REGION REGION; const lambdaClient new LambdaClient({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: IDENTITY_POOL_ID, }), }); export { lambdaClient };fromCognitoIdentityPool是aws-sdk/credential-provider-cognito-identity提供的憑據(jù)提供者瀏覽器無需任何長期密鑰只需提供身份池 IDSDK 便會(huì)自動(dòng)向 Cognito 換取一組臨時(shí)安全憑據(jù)并使用這些憑據(jù)初始化LambdaClient。前端交互邏輯frontend/src/index.js 是頁面的核心交互邏輯import { InvokeCommand } from aws-sdk/client-lambda; import { lambdaClient } from ./lambdaClient.js; const myFunction async () { const color document.getElementById(c1).value; const pattern document.getElementById(p1).value; const id Math.floor(Math.random() * (10000 - 1 1)) 1; const params { FunctionName: examplePutItem, Payload: JSON.stringify({ Item: { Id: id, Color: color, Pattern: pattern, }, TableName: lambda-for-browser, }), }; try { const data await lambdaClient.send(new InvokeCommand(params)); alert(Success. Data added to table.); console.log(Success, payload, data); } catch (err) { alert(Oops an error occurred.); console.log(Error, err); } }; window.myFunction myFunction;值得注意的細(xì)節(jié)從頁面兩個(gè)下拉框c1顏色、p1圖案讀取用戶輸入隨機(jī)生成 1–10000 的整數(shù)作為Id分區(qū)鍵值。通過lambdaClient.send(new InvokeCommand(params))觸發(fā)名為examplePutItem的函數(shù)Payload中的Item與TableName結(jié)構(gòu)正是后端handler期望的事件格式前后端字段契約在這里完成對(duì)齊。函數(shù)被掛載到window.myFunction與頁面index.html中按鈕的onclickmyFunction();綁定。頁面表單源碼可參見 frontend/dist/index.html顏色下拉框提供 Red、Orange、Yellow、Green、Blue、Indigo、Violet 七種選項(xiàng)圖案下拉框提供 Floral、Modern、Paisley、Plain、Plush、Squares、Stripes 七種選項(xiàng)。啟動(dòng)與驗(yàn)證按 README 流程完成前端構(gòu)建與運(yùn)行完成lambdaClient.js的兩處替換后cd frontend。安裝依賴npm i。打包npm run build對(duì)應(yīng) frontend/package.json 中的build: webpack。在dist目錄啟動(dòng) HTTP 服務(wù)器npx http-server ./dist。瀏覽器訪問服務(wù)器地址選擇一種顏色和圖案。點(diǎn)擊Submit提交。若插入成功頁面彈出Success. Data added to table.提示同時(shí)可在 DynamoDB 控制臺(tái)刷新lambda-for-browser表看到新寫入的記錄。若失敗則彈出Oops an error occurred.此時(shí)應(yīng)優(yōu)先檢查IDENTITY_POOL_ID與REGION是否已替換、訪客角色是否具備lambda:InvokeFunction權(quán)限、Lambda 函數(shù)名是否與FunctionName一致、表名是否與TableName一致、以及所有資源是否位于同一區(qū)域。權(quán)限模型與安全要點(diǎn)回顧從源碼可以梳理出本示例的三層權(quán)限邊界理解它們對(duì)排查問題與安全加固都很有幫助層級(jí)承載者權(quán)限內(nèi)容配置位置瀏覽器端Cognito 訪客角色lambda:InvokeFunctionIAM 控制臺(tái)訪客角色策略Lambda 執(zhí)行Lambda 執(zhí)行角色DynamoDB 訪問Simple microservice permissions模板Lambda 創(chuàng)建向?qū){據(jù)簽發(fā)Cognito 身份池為訪客簽發(fā)臨時(shí)憑據(jù)Cognito 控制臺(tái)身份池設(shè)置瀏覽器永不接觸 DynamoDB 憑據(jù)訪客角色僅授權(quán)l(xiāng)ambda:InvokeFunction即便前端 SDK 被逆向也無法直接讀寫數(shù)據(jù)庫。數(shù)據(jù)校驗(yàn)后移所有寫入 DynamoDB 的動(dòng)作發(fā)生在 Lambda 內(nèi)部后續(xù)如需增加輸入校驗(yàn)、字段過濾或?qū)徲?jì)日志只需修改函數(shù)代碼無需改動(dòng)前端。資源命名強(qiáng)約束FunctionNameexamplePutItem、TableNamelambda-for-browser、Id分區(qū)鍵均被前后端源碼硬編碼修改任一處都需同步調(diào)整另一端這也是本示例最常見的故障來源。清理資源教程完成后請(qǐng)?jiān)诳刂婆_(tái)依次刪除以下資源避免持續(xù)計(jì)費(fèi)在 Lambda 控制臺(tái)刪除函數(shù)examplePutItem。在 DynamoDB 控制臺(tái)刪除表lambda-for-browser。在 Cognito 控制臺(tái)刪除身份池。在 IAM 控制臺(tái)刪除為訪客創(chuàng)建的 IAM 角色及為 Lambda 創(chuàng)建的執(zhí)行角色。小結(jié)通過本教程你完成了一個(gè)完整的“瀏覽器 → Cognito 身份池 → Lambda → DynamoDB”跨服務(wù)示例掌握了身份池訪客憑據(jù)的配置、最小權(quán)限 IAM 策略的收緊、Lambda 函數(shù) ESM 打包與上傳以及前端 webpack 打包與聯(lián)調(diào)驗(yàn)證。整個(gè)示例的源碼、打包配置與測(cè)試事件均已包含在 javascriptv3/example_code/cross-services/lambda-for-browser 目錄中可作為后續(xù)在瀏覽器中安全調(diào)用 AWS 服務(wù)的可復(fù)用起點(diǎn)。贊分享示例工程教程后端【免費(fèi)下載鏈接】aws-doc-sdk-examplesWelcome to the AWS Code Examples Repository. This repo contains code examples used in the AWS documentation, AWS SDK Developer Guides, and more. For more information, see the Readme.md file below.項(xiàng)目地址https://gitcode.com/gh_mirrors/aw/aws-doc-sdk-examples點(diǎn)擊查看免費(fèi)下載相關(guān)推薦使用 AWS SDK for JavaScript (v3) 調(diào)用 AWS Step FunctionsStartExecution 示例精講使用 AWS SDK for JavaScript v3 調(diào)用 AWS Step FunctionsStartExecution 示例精講 導(dǎo)讀 本文圍繞 j示例工程教程后端使用 AWS SDK for JavaScript v3 在 Web 應(yīng)用中構(gòu)建多語言 Amazon Lex 聊天機(jī)器人lex-bot 示例使用 AWS SDK for JavaScript v3 在 Web 應(yīng)用中構(gòu)建多語言 Amazon Lex 聊天機(jī)器人lex bot 示例 導(dǎo)讀 本文圍繞示例工程教程后端Eigent 前端的用戶認(rèn)證集成stackframe/reactStack Auth源碼級(jí)配置與接入指南Eigent 前端的用戶認(rèn)證集成stackframe/reactStack Auth源碼級(jí)配置與接入指南 本文以 Eigent 倉庫中內(nèi)置的 stac示例工程教程后端上一篇實(shí)用高效電路板查看指南OpenBoardView完整部署與使用教程下一篇特斯拉Model 3/Y CAN總線DBC文件3步掌握汽車數(shù)據(jù)解析的終極指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考