Albums Manager Setup

Install and configure albumsManager CMS

Download stack

git clone https://github.com/yapawa/albumsManager.git
cd albumsManager
nvm use
npm ci

Project Name

The projectName is only used to name the Cloudformation stack.

The default project name YapawaManager can be changed by replacing projectName in amplify/.config/project-config.json.

Initialize Amplify

Reply to the questions.

When asked about configuring a Cognito Lambda Trigger: reply no.

Else, use the default value when one is proposed.

amplify init

Add missing hosting configuration

We will be using S3 and Cloudfront to host our CMS and not Amplify Console. S3 hosting doesn’t allow to configure CNAME and certificates out of the box. We need to add it manually to our configuration.

Edit amplify/team-provider-info.json. Under prod.categories add and entry for hosting, and replacing the values with the correct ones:

{
  "prod": {
    "awscloudformation": {
      ...
    },
    "categories": {
      ...,
      "hosting": {
        "S3AndCloudFront": {
          "domainName": "admin.gallery.example.com",
          "hostedZoneId": "XXXXXXXXXX",
          "certificateArn": "arn:aws:acm:us-east-1:abcdef:certificate/yyyyyyy"
        }
      }
    }
  }
}

Create a .env file and define the domain that will be used by imageResize (cacheDomain variable). Decide also if you want to use S3 Transfer Acceleration when uploading images:

cacheDomain=img.gallery.example.com
transferAcceleration=true

Creating the stack and deploying the code

Tell amplify to publish your site. Amplify will automatically provision the stack.

amplify publish -c --yes
  • -c tells Cloudfront to invalidate existing cache. But you still need to invalidate the cache in your Browser manually.
  • --yes tells Amplify to answer automatically yes to any question.

Be patient, this will take some time, mainly because of the Cloudfront distribution.

Open src/aws-exports.js and store somewhere the value for aws_user_files_s3_bucket, you will need it when configuring Image Resize.

Open src/aws-exports.js and store somewhere the value for aws_user_pools_web_client_id, you will need it when configuring Public Site.

What is created ?

  • Cognito User Pool
  • Cognito Federated Identity
  • Appsync Endpoint
  • DynamoDB Table for Albums
  • DynamoDB Table for Images
  • Lambda functions:
    • Exif Reader
    • JSON Generator trigger
    • build JSON: album tree
    • build JSON: album details
    • Run Public Site build
    • Rotate Image
  • S3 Bucket for image storage
  • S3 Bucket for hosting
    • Triggers Lambda Exif Reader on PutObject
  • Route53 CNAME
  • Cloudfront Distribution for hosting
  • Event Bridge: to dispatch build events

Create a user

Open your browser and go to the Cognito Console.

Open the created User Pool and create a new user. This user will be the one used to administer the albums and images.

Next

Last modified May 26, 2020: Add -c option to publish (206ee36)