AWSPics

An AWS CloudFormation stack to run a serverless password-protected photo gallery

Credentials: "username" / "password"

Goals

Host a self-contained, declarative infrastructure, password-protected, data-driven static photo gallery to share personal pictures with friends and family, without needing to run, maintain (or pay for) servers.

Architecture

There are 7 main components:

CloudFront with restricted bucket access to prevent unauthenticated access to the site or its pictures.
Login lambda function to validate authentication and sign cookies to allow access to restricted buckets.
Source S3 bucket to store original pictures and metadata driving the site.
Resized S3 bucket to store resized versions of the original pictures.
Web S3 bucket to store the static website generated from the data in the source bucket.
Resize lambda function to automatically resize images added to the source S3 bucket and store them in the resized S3 bucket.
Site builder lambda function to automatically rebuild the static website when ~~changes are made to the source S3 bucket~~ a regularly scheduled event fires from Cloudwatch Events.

Pre-requisites

Requires that aws-cli, docker and htpasswd be installed.

You'll also need a domain whose CNAME DNS value you can update.

Instructions

A video walkthrough is available on YouTube.

Configure aws-cli (recommended to use us-east-1, see "Miscellaneous" below):

$ aws configure
AWS Access Key ID [None]: AKIA...
AWS Secret Access Key [None]: illx...
Default region name [None]: us-east-1
Default output format [None]:
$ aws configure set preview.cloudfront true

Create KMS encryption key: aws kms create-key. Keep note of its KeyId in the response. Note that each KMS key costs $1/month.
Create CloudFront Key Pair (note, you must do this as the root user of your AWS account, not an administrator), take note of the key pair ID and download the private key: https://console.aws.amazon.com/iam/home?region=us-east-1#/security_credential.

Encrypt the CloudFront private key:

aws kms encrypt --key-id $KMS_KEY_ID --plaintext fileb://pk-*.pem \
                --query CiphertextBlob --output text

Create a local htpasswd file with your usernames and passwords. You can generate the hashes from the command line:
```
$ htpasswd -nB username > htpasswd
New password: **********
Re-type new password: **********
```

Encrypt your htpasswd file using KMS again:

aws kms encrypt --key-id $KMS_KEY_ID --plaintext fileb://htpasswd) \
                --query CiphertextBlob --output text

Create CloudFront Origin Access Identity, take note of the identity in the response:

aws cloudfront create-cloud-front-origin-access-identity \
               --cloud-front-origin-access-identity-config \
               "CallerReference=$(cat /dev/urandom | base64 | base64 | head -c 14),Comment=AWSPics OAI"

Create Image Magick Lambda Layer for Amazon Linux 2 AMIs.

~~While logged into AWS, go to this link:
```
<https://serverlessrepo.aws.amazon.com/applications/arn:aws:serverlessrepo:us-east-1:145266761615:applications~image-magick-lambda-layer>
```
Click Deploy (currently the orange button on the upper right).

Then click on your Lambda - Layers and you will see a version ARN that looks like:~~

The best practice for image magick for the resize function is now is to create your own lambda layer. Download this zip file from here: https://github.com/CyprusCodes/imagemagick-aws-lambda-2/tree/master/archive Upload it to AWS Lambda as a layer (and select runtime of node.js 20 and architecture arm64) as a runtime, and note the change to arm64 architecture on the image resize function in the app.yml file, because the zip file referenced is actually compiled for arm64 and node.js 20. Use the arn of the lambda layer in your dist/config.json file.
```
Name          Version  Version ARN
image-magick  1        arn:aws:lambda:us-east-1:000000000000:layer:image-magick:1
```
Hold on to that ARN for later.

Deployment

Create a configuration file called dist/config.json, based on config.example.json. Make sure you don't commit this file to source control (the dist folder is ignored).

It should contain the following info - minus the comments:

[
  // -------------------
  // PLAIN TEXT SETTINGS
  // -------------------

  // website domain
  "website=website.com",
  // title for the website
  "websiteTitle=My awesome private photo gallery",
  // S3 bucket where the static website generated from the data in the
  // source bucket will be stored
  "webBucket=html-files-here",
  // S3 bucket where original pictures and metadata driving the site will be
  // stored
  "sourceBucket=original-images-here",
  // S3 bucket where resized images will be stored
  "resizedBucket=resized-images-here",
  // Origin Access Identity from step 7
  "originAccessIdentity=EJG...",
  // how long the CloudFront access is granted for, in seconds
  // note that the cookies are session cookies, and will get deleted when the
  // browser is closed anyway
  "sessionDuration=86400",
  // Optional tracking ID for Google Analytics, if specified then a GA JS
  // snippet will be outputted in the site's HTML, or leave blank for no GA
  "googleanalytics=",
  // Optionally override the path prefix for where original albums and their
  // pictures live, or leave blank to have this default to "pics/original/"
  "picsOriginalPath=",
  // Optionally sort albums by name when building the homepage (if
  // groupAlbumsIntoCollections is disabled), or when building collection pages
  // (if groupAlbumsIntoCollections is enabled), specify either "asc" or "desc",
  // or leave blank to output albums in the order that they're returned from
  // the S3 list objects call
  "albumSort=",
  // Optionally sort pictures in all albums by name when building album pages,
  // specify either "asc" or "desc", or leave blank to output pictures in the
  // reverse order that they're returned from the S3 list objects call
  "pictureSort=",
  // Optionally sort collections by name when building the homepage (if
  // groupAlbumsIntoCollections is enabled), specify either "asc" or "desc", or
  // leave blank to output collections in the order that they're returned from
  // the S3 list objects call
  "collectionSort=",
  // Optionally specify "true" to indicate that the pictures have two grouping
  // levels, collections (first-level folders in the bucket) and albums
  // (second-level folders in the bucket), or leave blank to indicate that
  // the pictures just have one grouping level, albums
  "groupAlbumsIntoCollections=",
  // Indent homepage and album HTML output with spaces, specify "true" to
  // enable, or leave blank to instead indent HTML output with tabs
  "spacesInsteadOfTabs=",
  // Optionally show the specified custom HTML instead of a design credits link
  // to HTML5 UP on the home page, recommended that this be a link in the form:
  // <a href="https://site123.com">Site 123</a>
  // Note: a design credits link to HTML5 UP will still show on album pages
  "homePageCreditsOverride=",
  // Optionally hide the design credits link to HTML5 UP on the home page,
  // specify "true" to enable, or leave blank to show the link
  // Note: a design credits link to HTML5 UP will still show on album pages
  "hideHomePageCredits=",
  // KMS key ID created in step 2
  "kmsKeyId=00000000-0000-0000-0000-000000000000",
  // CloudFront key pair ID from step 3
  // This is not sensitive, and will be one of the cookie values
  "cloudFrontKeypairId=APK...",
  // ------------------
  // Image Magick Lambda Layer ARN
  // - this is needed for ImageMagick to resize images in Node.js 10.x
  // - from step 8 above
  // - context above in README
  // ------------------
  "ImageMagickLayer=arn:aws:lambda:us-east-1:........:layer:image-magick:...",

  // ------------------
  // ENCRYPTED SETTINGS
  // ------------------

  // encrypted CloudFront private key from step 4
  "encryptedCloudFrontPrivateKey=AQICAH...",

  // encrypted contents of the <htpasswd> file from step 6
  "encryptedHtpasswd=AQICAH...",

  // ------------------
  // SSL Certificate ARN
  // - provide this if you want to use an existing ACM Certificate.
  // - see below in the README
  // ------------------
  "sslCertificateArn=arn:aws:acm:us-east-1..."

]

You can then deploy the full stack using:

# name of an S3 bucket for storing the Lambda code
# bucket will be created if it doesn't already exist
./deploy <unique_bucket_name_here>

Or optionally deploy and specify the stack name (otherwise it defaults to AWSPics):

./deploy --stack-name=<stack_name_here> <unique_bucket_name_here>

Any subsequent changes that you make to this code can be redeployed with the same command. CloudFormation will create a "changeset" to only update the modified resources.

The first deployment should take about 30 minutes since there's a lot to set up. You'll also receive an email to approve the SSL certificate request, which you should complete quickly, so that the rest of the deployment can proceed.

You will want to update the frequency of the Cloudwatch Events Rule from its default setting at 365 days to something more appropriate to your needs. You can adjust this pre-deployment in the app.yml file or after the fact in the AWS Management console.

Note on ImageMagick Layer for Lambda

~~When Amazon deprecated Node.js 8.10, they removed ImageMagick from the Amazon Linux 2 AMIs that are required to run Node.js 10.x. Again, ImageMagick is no longer bundled with the Node.js 10.x runti

AWSPics

Install / Use

README

AWSPics

Goals

Architecture

Pre-requisites

Instructions

Deployment

Note on ImageMagick Layer for Lambda