Simple Website

Prerequisites

  1. AWS account

  2. Install the AWS CLI and Configure CLI credentials

  3. Install the Attini CLI

  4. Setup/Configure the Attini framework with the following command:

attini setup --accept-license-agreement --create-deployment-plan-default-role --create-init-deploy-default-role --give-admin-access

Note

This configuration gives Attini a lot of access so only do this in a sandbox accounts.

Description

This is a simple website busing S3 and CloudFront and a serverless backend based on API Gateway, Lambda and DynamoDB put together using SAM.

The Init deployment stack contains one Attini deployment plan and one Lambda that copies the static web content from the Attini distribution to the S3 bucket which is the source of the CloudFront distribution.

As you can see in the diagrams, we create one Lambda in the Init deployment stack. This might seem like an anti-pattern but, this Lambda is not used by an application, it is used by the deployment plan to upload website content to s3 and invalidate the CloudFront cache. Because this Lambda is a “deployment” resource, its ok to have it in the Init deployment stack. However, its also ok to have it as a step in the deployment-plan if you prefer.

CloudFormation architecture

ExampleWebSite-CfnArchitecture

Deployment plan

ExampleWebSite-DeploymentPlan

Deployment guide

  1. Clone the example repository:

    git clone git@github.com:attini-cloud-solutions/example-website.git

  2. Deploy the distribution using the Attini CLI:

    attini environment create test
attini deploy run --environment test example-website

    Note

    Now we name the environment “test”, you can change this to any name you want. Keep in mind that it will affect the name of the CloudFormation stacks.

Verify the website

  1. Go to CloudFront in the AWS Console

  2. Find the CloudFront distribution with the Comment “Attini example website”

  3. Open the CloudFront URL in your web browser

Clean up

Clean up using the AWS console

  1. Empty the webasset bucket test-webassets-bucket

  2. Delete the CloudFormation stack test-website

  3. Delete the CloudFormation stack test-backend

  4. Delete the CloudFormation stack test-website-init-deploy

Clean up using the AWS CLI

BUCKET_NAME=$(aws cloudformation describe-stacks --stack-name test-website --query 'Stacks[0].Outputs[?OutputKey==`WebassetsBucket`].OutputValue' --output text)
aws s3 rm "s3://$BUCKET_NAME" --recursive
aws cloudformation delete-stack --stack-name test-website
aws cloudformation delete-stack --stack-name test-backend
aws cloudformation delete-stack --stack-name test-website-init-deploy

If you want to remove the whole Attini framework, see Deleting/Clean up the Attini framework