将现有的 AppSync API 添加到 AWS Amplify 问题详情我的目标我已经尝试过的涉及的文件

如何解决将现有的 AppSync API 添加到 AWS Amplify 问题详情我的目标我已经尝试过的涉及的文件

问题

当我在 Amplify 中运行 CodeBuild 时，我的 AppSync 凭据被覆盖，从而破坏了构建。

详情

我正在使用 AWS Amplify 作为后端构建一个 ReactJS 站点。该项目正在使用 Amplify 内置 CodeBuild 进行部署。 AppSync API 是为 Amplify 单独创建的，不会直接出现在 Amplify 控制台中。

当我运行 amplify codegen add --apiId xxx 时，会生成 aws-exports.js 文件，其中包含以下字段：

const awsmobile = {
    "aws_project_region": "eu-west-2","aws_appsync_graphqlEndpoint": "https://xxxxx.appsync-api.eu-west-2.amazonaws.com/graphql","aws_appsync_region": "eu-west-2","aws_appsync_authenticationType": "API_KEY","aws_appsync_apiKey": "xxxxx"
};

但是，当 Amplify Frontend CodeBuild 作业运行时，AppSync 字段不存在。在后端作业期间运行 amplifyPush --simple 会用以下内容覆盖 aws-exports.js 文件：

const awsmobile = {
    "aws_project_region": "eu-west-2"
};

这与 amplifyPush --simple 命令似乎生成的格式相同。这样做的结果是在构建过程中，React 找不到它需要的变量。

> react-scripts build
  [INFO]: Creating an optimized production build...
  [INFO]: Failed to compile.
  [INFO]: /codebuild/output/src143434459/src/site/src/index.tsx
          TypeScript error in
          /codebuild/output/src143434459/src/site/src/index.tsx(12,20):
          
          Property 'aws_appsync_graphqlEndpoint' does not exist on type 
          '{ aws_project_region: string; }'.  TS2339

          10 |
          11 | export const client = new AWSAppSyncclient({
        > 12 |     url: awsconfig.aws_appsync_graphqlEndpoint,|                    ^
          13 |     region: awsconfig.aws_appsync_region,14 |     auth: {
          15 |         type: AUTH_TYPE.API_KEY,

我的目标

我希望 aws_appsync 文件中的 aws-exports.js 变量在由 CodeBuild 生成后出现。我不想将 API 密钥保留在版本控制中，因此在构建过程中提供它是理想的选择。

我已经尝试过的

• 研究是否可以在前端构建期间运行 amplify codegen add --apiId xxx 作业，但由于它需要参数，我不确定如何实现这一点。
• 考虑尝试将 API 添加到 Amplify 本身，因为我单独为 Amplify 创建了它。然后 amplify env pull 将正确获取这些环境详细信息。

Screenshot showing empty API tab in Amplify

---

涉及的文件

amplify.yml

这是一个新的 ReactJS / Amplify 项目附带的默认文件。

version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
import AWSAppSyncclient,{ AUTH_TYPE } from 'aws-appsync';
import awsconfig from 'aws-exports';


export const client = new AWSAppSyncclient({
    url: awsconfig.aws_appsync_graphqlEndpoint,region: awsconfig.aws_appsync_region,auth: {
        type: AUTH_TYPE.API_KEY,apiKey: awsconfig.aws_appsync_apiKey,}
});

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,document.getElementById('root')
);

reportWebVitals();