Error when amplify push with custome category (AWS CodeBuild)

[tmizuma]

Note: If your issue/bug is regarding the AWS Amplify Console service, please log it in the
Amplify Console GitHub Issue Tracker

I try to create AWS CodeBuild by custome category in order to deploy Server Side Rendering application with Amplify Library when git push.
I faced the error when issue amplify push.

Describe the bug
A clear and concise description of what the bug is.

$ amplify push -y
✔ Successfully pulled backend environment prod from the cloud.

Current Environment: prod

| Category  | Resource name    | Operation | Provider plugin   |
| --------- | ---------------- | --------- | ----------------- |
| Codebuild | amplifycodebuild | Update    | awscloudformation |
| Auth      | myssr4f2479c7    | No Change | awscloudformation |
| Api       | myssr            | No Change | awscloudformation |
Invalid CloudFormation template: /home/ec2-user/environment/amplify-nextjs-ssr/amplify/backend/codebuild/amplifycodebuild/template.yaml
✖ An error occurred when pushing the resources to the cloud

Cannot read property '0' of undefined
An error occurred during the push operation: Cannot read property '0' of undefined

template.yml is below.

---
AWSTemplateFormatVersion: "2010-09-09"

Parameters:
  env:
    Type: "String"
    Description: "The environment name. e.g. Dev, Test, or Production"
    Default: "NONE"
  GitRepository:
    Type: "String"
    Description: "Github Repository"

Resources:
  CodeBuildAmplifySSRServiceRole:
    Type: AWS::IAM::Role
    Properties:
      Path: /
      AssumeRolePolicyDocument:
        Statement:
          - Effect: Allow
            Principal:
              Service:
                - codebuild.amazonaws.com
            Action:
              - sts:AssumeRole
      Policies:
        - PolicyName: !Sub Amplify-SSR-Hands-On-${env}
          PolicyDocument:
            Version: 2012-10-17
            Statement:
              - Effect: Allow
                Resource:
                  - "*"
                Action:
                  - s3:*
                  - secretsmanager:*
                  - logs:*

  AmplifyCodeBuild:
    Type: "AWS::CodeBuild::Project"
    Properties:
      Artifacts:
        Type: NO_ARTIFACTS
      Triggers:
        Webhook: true
        FilterGroups:
          - - Type: EVENT
                Pattern: PUSH
            - Type: HEAD_REF
                Pattern: ^refs/heads/develop$
      Name:
        Fn::Join:
          - "-"
          - - amplify-ssr-hands-on
            - Ref: env
      ServiceRole: !Ref CodeBuildAmplifySSRServiceRole
      Environment:
        ComputeType: BUILD_GENERAL1_SMALL
        Image: aws/codebuild/amazonlinux2-x86_64-standard:1.0-1.13.0
        Type: LINUX_CONTAINER
      SourceVersion: !FindInMap [EnvBranchMap, !Ref env, Name]
      Source:
        Auth:
          Resource: !Sub arn:aws:codebuild:${AWS::Region}:${AWS::AccountId}:token/github
          Type: OAUTH
        Type: GITHUB
        Location:
          Ref: GitRepository
        ReportBuildStatus: true
        BuildSpec: |
          version: 0.2
          phases:
            pre_build:
              commands:
                - aws sts get-caller-identity
                - npm install -g @aws-amplify/cli
                - if [ "${CODEBUILD_WEBHOOK_TRIGGER#branch/}" = "master" ]; then ENV=prod; fi
                - if [ "${CODEBUILD_WEBHOOK_TRIGGER#branch/}" = "develop" ]; then ENV=dev; fi
                - echo $ENV
                - sh amplify_init.sh $ENV
                - npm install -g serverless
                - npm install
                - aws s3 sync s3://my-bucket-name/${ENV}/.serverless .serverless --delete
            build:
              commands:
                - echo "build start!"
                - npx serverless

When I remove below settings, I can deploy correctly.

        FilterGroups:
          - - Type: EVENT
                Pattern: PUSH
            - Type: HEAD_REF
                Pattern: ^refs/heads/develop$

Amplify CLI Version
You can use amplify -v to check the amplify cli version on your system

$ amplify --version
4.30.0

To Reproduce
Steps to reproduce the behavior or terminal output if applicable

# step.1
amplify init
# step.2
mkdir -p amplify/backend/codebuild/amplifycodebuild
# step.3
touch amplify/backend/codebuild/amplifycodebuild/template.yaml
# step.4
# copy & paste the above template.yml
# step.5
cat <<EOF > amplify/backend/codebuild/amplifycodebuild/parameters.json
{
    "GitRepository": "<github repository url>",
}
EOF
# step.6
amplify env checkout dev
amplify push -y

Expected behavior
A clear and concise description of what you expected to happen.

I expected to create CodeBuild which starts build when I issue git push command with specified branch.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. Mac/Windows/Ubuntu]
• Node Version. You can use node -v to check the node version on your system

OS: AWS Cloud9 (Amazon Linux 2)
node version: v10.22.1

Additional context

Amplify Console can't be used Server Side Rendering deployment, so I tried to create CI/CD pipeliine with AWS CodeBuild.
aws-amplify/amplify-hosting#412

[kaustavghosh06]

@tmizuma I looked at the CodeBuild CloudFormation documentation (https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-codebuild-project-webhookfilter.html#cfn-codebuild-project-webhookfilter-pattern) and I believe there is an issue with the YML tied to your FilterGroups resource which you've mentioned above. The FilterGroups ClodFormation resource should like the following:

  AmplifyCodeBuild:
    Type: 'AWS::CodeBuild::Project'
    Properties:
      Artifacts:
        Type: NO_ARTIFACTS
      Triggers:
        Webhook: true
        **FilterGroups:
          - Pattern: PUSH
            Type: EVENT
          - Pattern: ^refs/heads/develop$
            Type: HEAD_REF**

One quick tip when designing custom cloudFormation stacks is to use the CloudFormation designer to find out formatting issues like these upfront - https://console.aws.amazon.com/cloudformation/designer/home?region=us-east-1

[kaustavghosh06]

Closing this issue based on my recommendation above. I was able to deploy the CloudFormation template with the above changes. Please let me know if you're still not able to deploy.

[tmizuma]

@kaustavghosh06

Thanks for the answer.
But yml file I posted looks correct.

        FilterGroups:
          - - Type: EVENT
              Pattern: PUSH
            - Type: HEAD_REF
              Pattern: ^refs/heads/develop$

CloudFormation designer doesn't show any errors.

I could deploy with Management Console.

I couldn't deploy with amplify cli only.
In addition, I failed to deploy the yml file that you proposed because * FilterGroup* needs List type of WebhookFilter

https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-codebuild-project-filtergroup.html

✖ An error occurred when pushing the resources to the cloud

Cannot read property 'Pattern' of undefined
An error occurred during the push operation: Cannot read property 'Pattern' of undefined

[undefobj]

@tmizuma Could you give more details about your use case? I see that you're trying to create a "Custom Category" here but why do you need CodeBuild for SSR? Is this for a container deployment or something else? Can you give more details about what you're trying to accomplish?

[tmizuma]

@undefobj
We cannot use the Amplify Console to deploy because SSR(Next.js) is not static hosting.
The AWS Blog says that Serverless Framework should be used to deploy the SSR with Amplify.
I am considering using CodeBuild to deploy my application with Serverless Framework.
By building CodeBuild with custom categories, we expect to be able to handle an increasing number of environments with amplify env add command.

[undefobj]

@tmizuma what piece of deployment are you doing here? Will your backend be running on Lambda? Can you clarify a bit what is running in CodeBuild?

[tmizuma]

@undefobj
The purpose of this build is to deploy the SSR application built in Next.js to CloudFront and Lambda@Edge
I'm considering automating the SSR deployment method described in the following Blog at CodeBuild.

https://aws.amazon.com/jp/blogs/mobile/ssr-support-for-aws-amplify-javascript-libraries/

We can deploy to CloudFront and Lambda@Edge with the npx serverless command.

[undefobj]

Ok understood. This might be a bit out of our scope right now as we don't have customers combining frameworks with Amplify and serverless. It might be more difficult in your workflow and automating it all in Amplify or serverless is a better bet.

[tmizuma]

I believe that if we can resolve the CloudFromation errors I mentioned above, automation with CodeBuild can be achieved. The problem here is that I get an error when I write the following yml and issue amplify push command

       # Adding the following configuration template.yml causes an error.
        FilterGroups:
          - - Type: EVENT
              Pattern: PUSH
            - Type: HEAD_REF
              Pattern: ^refs/heads/develop$

↓ I get an error when issue amplify push command

Invalid CloudFormation template: /home/ec2-user/environment/amplify-nextjs-ssr/amplify/backend/codebuild/amplifycodebuild/template.yaml
✖ An error occurred when pushing the resources to the cloud

Cannot read property '0' of undefined
An error occurred during the push operation: Cannot read property '0' of undefined

[kaustavghosh06]

@tmizuma Were you able to resolve this issue?

[kaustavghosh06]

Closing due to lack of response and further communication.

[descaloni-thinkwhy]

@kaustavghosh06
I am having this issue, any notes on a resolution?

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels for those types of questions.