agentkit

agentkit 使用 Encore 作为后端，并使用 Next.js 作为 BFF (Backend For Frontend) 和前端。 这是学习如何将 Encore 的后端功能与现代 Web 框架相结合的绝佳方式，非常适合构建 Web 应用程序。

安装 Encore

• macOS: brew install encoredev/tap/encore
• Linux: curl -L https://encore.dev/install.sh | bash
• Windows: iwr https://encore.dev/install.ps1 | iex

从该模板创建一个本地应用

encore app create --example=ts/nextjs-starter

从应用程序的根文件夹运行以下命令来启动 Encore

encore run

在另一个终端窗口中，启动 Next.js 前端

npm run dev

在浏览器中访问 https://:3000 以查看示例前端。

您还可以访问 Encore 的 本地开发者仪表板，地址为 https://:9400/，以查看跟踪、API 文档等。

通过在每次更改 Encore 端点时重新生成请求客户端，来保持后端和前端之间的协议同步。

npm run gen # Will create a new request client app/lib/client.ts

请参阅 自托管说明，了解如何使用 encore build docker 创建 Docker 镜像并进行配置。

使用 git push encore 将您的应用程序部署到 Encore 开发云中的免费暂存环境

git add -A .
git commit -m 'Commit message'
git push encore

您还可以在 云仪表板 中打开您的应用程序，以与 GitHub 集成，或者连接您的 AWS/GCP 帐户，使 Encore 能够自动处理云部署。

您需要做的就是在 Vercel 上创建一个新项目，并将其指向您新创建的 GitHub 存储库。

按照以下步骤将您的应用链接到 GitHub

1. 创建一个 GitHub 仓库，提交并将应用程序推送到仓库。
2. 在 云仪表板 中打开您的应用程序。
3. 转到Settings ➔ GitHub，然后单击Link app to GitHub，将您的应用程序链接到 GitHub，并选择您刚创建的仓库。
4. 要配置 Encore 以在推送到特定分支名称时自动触发部署，请转到所需环境的Overview页面。 点击Settings，然后在Branch Push部分配置Branch name，然后点击Save。
5. 提交更改并推送到 GitHub 以触发部署。

在文档中了解更多信息

如果您在从前端调用 Encore API 时遇到 CORS 问题，则可能需要指定允许哪些来源（通过浏览器）访问您的 API。 您可以通过在 encore.app 文件中指定 global_cors 键来实现，该文件具有以下结构

global_cors: {
  // allow_origins_without_credentials specifies the allowed origins for requests
  // that don't include credentials. If nil it defaults to allowing all domains
  // (equivalent to ["*"]).
  "allow_origins_without_credentials": [
    "<ORIGIN-GOES-HERE>"
  ],
        
  // allow_origins_with_credentials specifies the allowed origins for requests
  // that include credentials. If a request is made from an Origin in this list
  // Encore responds with Access-Control-Allow-Origin: <Origin>.
  //
  // The URLs in this list may include wildcards (e.g. "https://*.example.com"
  // or "https://*-myapp.example.com").
  "allow_origins_with_credentials": [
    "<DOMAIN-GOES-HERE>"
  ]
}

有关 CORS 配置的更多信息，请参见：https://encore.dev/docs/develop/cors

• Encore 文档
• Next.js 文档