将现有 AppSync API 添加到 AWS Amplify

Question

问题

当我在 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将正确获取这些环境详细信息。

显示 Amplify 中空 API 选项卡的屏幕截图

---

涉及文件

放大.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/**/*

索引.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();