DEV Community: Yinlin Chen

AWS Amplify AppSync GraphQL custom resolver examples

Yinlin Chen — Wed, 09 Jun 2021 02:39:22 +0000

AWS Amplify is great! It handles AppSync backend with AWS resources, like DynamoDB, ElasticSearch, etc for you. However, sometimes these default generated GraphQL schema and resolvers are not fulfill our business need. We create an Amplify Appsync GraphQL GitHub repo to document some of the custom AppSync Resolver.

There are three steps to create your custom resolvers using AWS Amplify CLI

Step1: Add custom type to the schema
- Add custom Query, Mutation or Subscription type to your schema.
Step2: Create custom resolver template
- Request and response template should be located in <project-root>/amplify/backend/api/<api-name>/resolvers folder.
- Graphql Transformer follows <TypeName>.<FieldName>.<req/res>.vlt as convention to name the resolvers.
  - Request template: Query.myCustomQuery.req.vtl
  - Response template: Query.myCustomQuery.res.vtl
Step3: Add resolvers resource by creating a custom stack
- By default, there is a file called CustomResources.json in <project-root>/amplify/backend/api/<api-name>/stacks directory of your API.
- Example: CustomResource.json

Currently, we provides these examples:

You can deploy the entire example app here:

We hopes these examples help! Please feel free to contribute more custom examples to us and make it better!

A Thumbnail Creator Serverless application

Yinlin Chen — Sun, 09 May 2021 00:24:16 +0000

Thumbnail Creator

A Thumbnail Creator Serverless application. This application automatically creates a thumbnail for image, PDF, and video files. Once this application is deployed, you only need to upload files into an S3 bucket and all the thumbnails will be automatically created and saved in the result S3 bucket.

When a file is uploaded to an S3 bucket, the application will detect the file type, create a thumbnail, and save it to another S3 bucket.

Architecture

Upload image, video, or pdf file to the S3 upload bucket
Thumbnail files will be created and stored in the S3 result bucket

Lambda Function

app.py: Create a thumbnail for the image, pdf, and video file that uploaded to an S3 bucket
sharedutils: a custom Lambda Layer filetype - Python package to infer binary file types

Note: This application uses the below three custom Lambda Layers and you must deploy these Lambda Layers before deploying this application.

ps. Since it uses Lambda temporary storage with a fixed size of 512MB. So you may need to consider using Amazon EFS for Lambda in order to process large-size files. Learn more

Deployments

You can deploy this application directly from the AWS Serverless Application repository, on-click button CloudFormation deploy, or using SAM CLI.

For more information, check out the Thumbnail-Creator application in the Serverless App Repository.
For manual deployments and custom builds through CloudFormation or SAM, see below sections.

Deploy Thumbnail Creator application using CloudFormation stack

Step 1: Launch CloudFormation stack

Click Next to continue

Step 2: Specify stack details

Name	Description	Example value
Stack name	any valid stack name	filethumbnail
ImageMagickLayer	ImageMagick Lambda Layer ARN	arn:aws:lambda:us-east-1::layer:image-magick:1
GhostscriptLayer	Ghostscript Lambda Layer ARN	arn:aws:lambda:us-east-1::layer:image-magick:1
FfmpegLayer	Ffmpeg Lambda Layer ARN	arn:aws:lambda:us-east-1::layer:image-magick:1
ConversionFileType	a valid file type	jpg
ConversionMimeType	a valid mime type	image/jpeg
ThumbnailWidth	a valid number	150

Step 3: Configure stack options

Leave it as is and click Next

Step 4: Review

Make sure all checkboxes under Capabilities section are CHECKED

Click Create stack

Deploy Thumbnail Creator application using SAM CLI

To use the SAM CLI, you need the following tools.

SAM CLI - Install the SAM CLI
Python 3 installed
Docker - Install Docker community edition

To build and deploy your application for the first time, run the following in your shell:

sam build --use-container

Above command will build the source of the application. The SAM CLI installs dependencies defined in requirements.txt, creates a deployment package, and saves it in the .aws-sam/build folder.

To package the application, run the following in your shell:

sam package --output-template-file packaged.yaml --s3-bucket BUCKETNAME --region us-east-1

Above command will package the application and upload it to the S3 bucket you specified.

Run the following in your shell to deploy the application to AWS:

sam deploy --template-file packaged.yaml --stack-name STACKNAME --s3-bucket BUCKETNAME \
 --parameter-overrides 'ImageMagickLayer=layerARN GhostscriptLayer=layerARN FfmpegLayer=layerARN ThumbnailWidth=150' \
 --capabilities CAPABILITY_IAM --region us-east-1

You should see the cloudformation resource like below

Usage

Upload files to the UploadBucket
Thumbnail files will be created and stored in the ResultsBucket

Cleanup

To delete the sample application that you created, use the AWS CLI. Assuming you used your project name for the stack name, you can run the following:

aws cloudformation delete-stack --stack-name stackname

AWS Amplify Pull-Request Previews for Public GitHub repository

Yinlin Chen — Sun, 13 Sep 2020 15:25:39 +0000

My Workflow

AWS Amplify Pull-Request Previews currently only supports private GitHub repository. This amplify-preview-actions GitHub action enables the ability to deploy AWS Amplify Pull-Request Previews for your open source and public GitHub repository.

With this amplify-preview-actions GitHub action, you can define your own rule to deploy the Pull-Request branch to the AWS Amplify console app page for a preview. For example, you can setup a rule only a pull request is labeled with Ready for review and is assigned to a reviewer; and clean up the previews after the pull request is merged or closed.

Submission Category:

DIY Deployments

Yaml File or Link to Code

GitHub Page

yinlinchen / amplify-preview-actions

This action deploys your AWS Amplify pull request preview for your public repository

amplify-preview-actions

Getting Started

You can include the action in your workflow as actions/amplify-preview-actions@master.

Basic `workflow.yml` Example

Deploy a PR preview branch to the Amplify console App page (not the Previews page) after a reviewer is assigned.

Place in a .yml file such as this one in your .github/workflows folder. Refer to the documentation on workflow YAML…

View on GitHub

GitHub Marketplace page

Installation

- name: amplify-preview-actions
  uses: yinlinchen/amplify-preview-actions@v1.0

An example of how to use the Action:

name: 'Amplify PR Preview'
on:
  pull_request:
    types: [review_requested]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master

    - name: set branchname env
      id: setenvname
      run: |
        # use GITHUB_HEAD_REF that is set to PR source branch
        echo "##[set-output name=setbranchname;]$(echo ${GITHUB_HEAD_REF})"

    - name: deploy PR preview
      uses: yinlinchen/amplify-preview-actions@master
      with:
        branch_name: ${{ steps.setenvname.outputs.setbranchname }}
        amplify_command: deploy
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AmplifyAppId: ${{ secrets.AmplifyAppId }}
        BackendEnvARN: ${{ secrets.BackendEnvARN }}
        AWS_REGION: 'us-east-1'

Additional Resources / Info

Screenshots:

Open source projects that are using this workflow:

Deploy a Lambda function triggered by S3 event using CodePipeline

Yinlin Chen — Fri, 03 Apr 2020 14:31:22 +0000

This post demonstrates how to deploy a Lambda function hosted in the GitHub using CodePipeline. We use one of our projects S3toDDB as an example. The Lambda function in this project receives event notifications from a S3 bucket, process data in files, and create or update data in DynamoDB. Please see project README for details.

Go to the CodePipeline console and select “create pipeline”.

In the Step 1:

Enter a pipeline name
Under service role, select new service role and enter a role name, click Next button.

In the Step 2:

Select GitHub as the source provider
Select target GitHub repository
Select target branch

In the step 3:

Select AWS CodeBuild
Select create project In the create build project popup window
Enter a project name
Select Ubuntu as the Operating system
Select "Standard"
Select "image:2.0"
select New service role and role name
go to IAM console and add a PutObject permission to the S3 bucket as specified in the buildspec.yml

{
    "Effect": "Allow",
        "Resource": [
            "arn:aws:s3:::bucketname/*"
        ],
        "Action": [
            "s3:PutObject"
        ]
}

In the step 4:

Select AWS Cloudformation
Under the action mode, select “create or update a stack”
Enter a stack name
Under the Artifact name, select “BuildArctifact”. Enter “packaged-template.yml” in the File name
Under the Capabilities, select “CAPABILITY_AUTO_EXPAND” and “CAPABILITY_IAM”
Select a role name. (Note. You need to create a role with the necessary permissions)
Under the advanced, supply the Parameter Override

{"APPIMGROOTPATH":"https://img.cloud.lib.vt.edu/iawa/","BibliographicCitation":"Researchers wishing to cite this collection should include the following information: - Special Collections, Virginia Polytechnic Institute and State University, Blacksburg, Va.","CollectionCategory":"IAWA","DYNOCollectionTABLE":"Collection-xxxxxx","DYNOArchiveTABLE":"Archive-yyyyyy","NOIDNAA":"53696","NOIDScheme":"ark:/","NOIDTemplate":"eeddeede","REGION":"us-east-1","RightsHolder":"Special Collections, University Libraries, Virginia Tech","RightsStatement":"Permission to publish material from the must be obtained from University Libraries Special Collections, Virginia Tech.","S3BucketName":"iawa-s3csv","LambdaLayerParameter":"arn:aws:lambda:us-east-1:xxxxxxxxx:layer:iawa-layer:1"}

That's it, click the next button and start the codepipeline. If everything works, it should show succeed in every stages.