🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 01月03日

使用 Amplify 和 AgentCore，維護成本極低！輕鬆建構傳統的全端 AI 代理程式。

AWS的最新功能充分利用，讓我們來製作一個全棧的AI代理Web應用程式吧。

前端： React on Amplify Gen2
後端： Strands Agents on Bedrock AgentCore

スクリーンショット 2026-01-02 2.02.19.png

看膩了Streamlit的畫面，該畢業了！
完成的應用程式示範可以從以下連結試用，任何人都能使用。

https://main.d32c8uilwurx3w.amplifyapp.com/

スクリーンショット 2026-01-02 1.54.49.png

AWS Amplify Gen2的優點在於「無伺服器且便宜」、「可管理且輕鬆」。

為了幫助那些不擅長前端的人，我們刪除了不必要的檔案和代碼，大幅減少了步驟數，並大幅降低了認知負擔。

事前準備

帳號註冊

創建AWS帳號
創建GitHub帳號

申請使用Claude

登入AWS帳號（https://console.aws.amazon.com）
- 將區域改為東京
申請使用Claude模型
- 搜尋Amazon Bedrock > 聊天/文本的遊樂場
- 選擇模型 > Anthropic > Claude Haiku 4.5 > 應用
- 如果出現表單，請填寫並提交（等幾分鐘）
- 如果能在遊樂場中與Haiku聊天，表示成功

之後的AWS CLI認證將使用此帳號，因此請保持在AWS管理控制台中的登入狀態。

1. 建立前端

從範本創建環境

訪問Amplify的快速入門
從範本創建GitHub儲存庫
- 在快速入門中點擊「從範本創建儲存庫」
- 儲存庫名稱： amplify-agentcore
- 選擇可見性：私密
啟動開發環境
- 代碼 > 代碼空間 > 在主分支上創建代碼空間

スクリーンショット 2026-01-01 23.12.44.png

AWS認證設定

安裝AWS CLI

# 下載
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

# 解壓
unzip awscliv2.zip

# 安裝
sudo ./aws/install

# 清理
rm -rf aws awscliv2.zip

進行AWS認證

aws login --remote

當詢問區域時，輸入 ap-northeast-1
- 訪問URL並選擇現有會話
- 複製驗證碼並粘貼到終端機

前端開發

前端會生成大量檔案，因此可能不易上手。
我們將削減不必要的檔案和代碼，並對此進行各種減少認知負擔的努力。

刪除不必要的檔案

# 刪除根目錄的不必要檔案
rm -rf .eslintrc.cjs CODE_OF_CONDUCT.md CONTRIBUTING.md LICENSE README.md

# 刪除不必要的目錄以及各層的檔案
rm -rf public amplify/data src/assets

在amplify目錄內，定義我們想要在Amplify中創建的雲功能。這次我們只啟用使用Cognito的認證功能。

以下檔案依據下列內容進行覆蓋

amplify/auth/resource.ts

import { defineAuth } from '@aws-amplify/backend';

export const auth = defineAuth({
  loginWith: {
    email: true,
  },
});

amplify/backend.ts

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';

defineBackend({
  auth,
});

在src目錄內，放置前端的主代碼。

以下檔案依據下列內容進行覆蓋

src/index.css

/* 全域樣式 */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fafbfc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#root {
  height: 100vh;
  width: 100vw;
}

main.tsx

// 載入所需的包
import React from "react";
import ReactDOM from "react-dom/client";
import { Amplify } from "aws-amplify";
import { Authenticator } from '@aws-amplify/ui-react';
import App from "./App.tsx";
import outputs from "../amplify_outputs.json";
import '@aws-amplify/ui-react/styles.css';
import "./index.css";

// 初始化Amplify
Amplify.configure(outputs);

// 應用程式的入口（帶認證的渲染）
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Authenticator>
      <App />
    </Authenticator>
  </React.StrictMode>
);

新增所需的包資訊

npm install react-markdown

2. 建立後端

mkdir agent
cd agent

touch main.py
touch requirements.txt

以下檔案依據下列內容進行覆蓋

agent/main.py

# 載入所需的庫
from strands import Agent
from strands_tools.rss import rss
from bedrock_agentcore.runtime import BedrockAgentCoreApp

# 創建AgentCore運行時的API伺服器
app = BedrockAgentCoreApp()

def convert_event(event) -> dict | None:
    """將Strands的事件轉換為前端JSON格式"""
    try:
        if not hasattr(event, 'get'):
            return None

        inner_event = event.get('event')
        if not inner_event:
            return None

        # 偵測文本差分
        content_block_delta = inner_event.get('contentBlockDelta')
        if content_block_delta:
            delta = content_block_delta.get('delta', {})
            text = delta.get('text')
            if text:
                return {'type': 'text', 'data': text}

        # 偵測工具使用開始
        content_block_start = inner_event.get('contentBlockStart')
        if content_block_start:
            start = content_block_start.get('start', {})
            tool_use = start.get('toolUse')
            if tool_use:
                tool_name = tool_use.get('name', 'unknown')
                return {'type': 'tool_use', 'tool_name': tool_name}

        return None
    except Exception:
        return None

# 將代理呼叫函數設置為API伺服器的入口點
@app.entrypoint
async def invoke_agent(payload, context):
    # 獲取前端輸入的提示
    prompt = payload.get("prompt")

    # 創建AI代理
    agent = Agent(
        model="jp.anthropic.claude-haiku-4-5-20251001-v1:0",
        system_prompt="aws.amazon.com/about-aws/whats-new/recent/feed 取得RSS",
        tools=[rss]
    )

    # 以串流形式獲取代理的回應
    async for event in agent.stream_async(prompt):
        converted = convert_event(event)
        if converted:
            yield converted

# 啟動API伺服器
if __name__ == "__main__":
    app.run()

Strands Agents中內建了RSS工具，可以從AWS的「What's New」RSS中獲取資訊。

agent/requirements.txt

botocore
bedrock-agentcore

strands-agents
strands-agents[otel]
strands-agents-tools[rss]

推送至GitHub儲存庫

在代碼空間左側打開「源管理」面板
- 輸入提交訊息「前端開發完成」並點擊「提交」
- 當詢問「是否要直接提交所有更改？」 >「是」
- 點擊「同步更改」>「確定」

將代碼放在GitHub儲存庫中，後續步驟只需指定該儲存庫即可輕鬆部署至Amplify，這真的非常方便！

3. 部署至AWS

部署前端

在AWS管理控制台中搜尋並訪問Amplify > 創建新應用
- 選擇GitHub，然後點擊「下一步」
- 出現GitHub認證彈出窗口時，根據畫面上的說明進行操作
- 選擇儲存庫 amplify-agentcore 和 main 分支，然後點擊「下一步」
- 繼續「下一步」>「保存並部署」，等待約三分鐘

スクリーンショット 2026-01-02 1.34.49.png

React將自動部署到無伺服器環境中，並自動創建作為認證功能所新增的Cognito用戶池等。真方便！

確認Cognito設置

在AWS管理控制台中搜尋並訪問Cognito
- 記錄下創建的用戶池ID
- 點擊用戶池名稱 > 左側邊欄的「應用程式客戶端」，記下客戶端ID

部署後端

個人建議在Mac的本地環境中創建容器並推送至ECR，然後從管理控制台創建運行時，這樣更加直觀。
但是，由於此次為了統一環境進行操作，而使用了GitHub Codespaces（x86），因此ARM架構的容器建構需要花費大量時間，所以無奈之下只能使用AgentCore啟動工具包。

在代碼空間中創建部署用的配置檔案

# 切換到後端目錄
cd /workspaces/amplify-agentcore/agent

# 安裝AgentCore啟動工具包
pip install bedrock-agentcore-starter-toolkit "boto3[crt]"

# 創建AgentCore部署用的配置檔案
agentcore configure

在精靈中輸入以下資訊
- 入口點： main.py
- 代理名稱： update_checker
- （其餘部分可按Enter使用預設值）
- 是否配置OAuth授權器？ (yes/no) [no]: yes
- 輸入OAuth發現URL: https://cognito-idp.ap-northeast-1.amazonaws.com/ap-northeast-1_XXXXXXXXX/.well-known/openid-configuration
- 在ap-northeast-1_XXXXXXXXX部分填入記下的用戶池ID
- 輸入允許的OAuth客戶端ID（以逗號分隔）：填入記下的客戶端ID
- （其餘部分可按Enter使用預設值）
- 您的選擇： s（不建立記憶體而跳過）

在創建AgentCore運行時時，設置為只能接受用Cognito授權的用戶發出的請求。
認證方式可以選擇IAM或JWT，但如果選擇IAM，就需要在前端攜帶AWS認證資訊，安全性顯得有些微妙，因此這裡採用了JWT。

執行agentcore configure命令後會生成 .bedrock_agentcore.yaml。
因為這裡面包含Cognito的敏感資訊，因此若稍後要重新推送至儲存庫的人，請務必將其加入到 .gitignore 中。
（因為此步驟中前端已部署完成，所以不會進行重新推送）

使用以下命令進行建構與部署（大約需要1分鐘）

agentcore deploy

部署後，會根據精靈中的設定自動創建以下內容。

CodeBuild專案（用於容器建構）
ECR儲存庫（容器的推送位置）
IAM角色（用於AgentCore運行時）
AgentCore運行時

確認AgentCore設置

在AWS管理控制台中搜尋Bedrock AgentCore並訪問
- 左側邊欄「代理運行時」> 點擊已部署的代理
- 複製「運行時ARN」

在前端設定環境變數

從Amplify > amplify-agentcore，左側邊欄「霍斯特」>「環境變數」
- 在「管理變數」中新增以下內容並點擊「保存」
- 變數： VITE_AGENT_ARN
- 值：填入複製的運行時ARN
回到Amplify > amplify-agentcore，點擊main分支，然後選擇「重新部署此版本」

AgentCore運行時的ARN將會編譯到前端，因此使用者在瀏覽器中利用開發者工具查看時可能會看到ARN。
ARN中包含AWS帳號ID，因此不算是機密資訊，但請在使用時留意。