AWS Amplify

Summary

I found an article that introduced five different services to publish websites on AWS.
S3 + CloudFront and Amplify will be compared.

Services on AWS

---

• S3 + CloudFront
• Amplify Console
• Lightsail
• Elastic Beanstalk
• Do it yourself (Docker with ECS)

---

Suitable services for Kalender-UI

Kalender-UI is a single-page application - a static website so Lightsail, Elastic Beanstalk, and ECS are not suitable for this project.

As a newcomer service, Amplify Console feels much simpler than S3 + Cloudfront.
When we deploy with S3 + CloudFront, we should create each bucket for the feature branch and create a new CloudFront distribution with a certificate manager. Both Github Actions and amplify console are required to modify the workflow on CD so it seems similar.

 

S3 + CloudFront

Amplify Console

 

continuous deployment (CD)	GitHub Actions	Support
access environment	GitHub Actions + Bucket	Support
feature branch deployment	GitHub Actions + Bucket	Support
manual deployment	Support	Support
CDN support	Support	Support
SSL	Certificate Manager	Support

Not only the above features but also many of the features are integrated on Amplify Console, so amplify console has more usability and maintainability.

Pricing

Amplify Framework

When you use the Amplify Framework (Libraries, CLI, UI Components), you pay only for the underlying AWS services you use. There are no additional charges for using the Amplify Framework.

Amplify uses CloudFront but the price is different but almost the same on ap-southeast-1

 

CloudFront

Amplify Console

 

Data transfer per 1GB	0.120 USD	0.150 USD
Build per min		0.01 USD

• Example from AWS Amplify
  • A startup team with 5 developers has an app that has 300 daily active users. The team commits code 2 times per day.
  • Total charges = Build & deploy charges + Hosting charges = $6+$2.08 = $8.08 per month

 

Issue

 

During the first setup, there’s a checkbox that describes mono-repo, then I encountered the issue after the setup has been finished.

Firstly I couldn’t find the kind of below sample on amplify.yml

on:
  push:
    paths:
      - kalender/**
    branches:
      - master
      - main

 

Despite settings like the above screenshot, it builds whenever the branch merged onto the main.
+ preview feature too ( automatically generate URL from pr and it deletes URL after pr branch removed )

MONO REPO ISSUE

 

With AMPLIFY_DIFF_DEPLOY, it creates docker images and clones from GitHub to check there’s a difference.
It costs during the configuration.

1. Can’t use preview.
2. Should create Github workflow
3. Can’t use a single branch to have multiple environments → must use dev QA prod to use .env or doppler

So should decide to deploy with a specific branch name dev QA prod or just S3 + CloudFront + Jenkins/GitHub workflow
looks better because we do not even use more amplify features like REST or GRAPHQL integrations.

 

Pros

But there are still pros to using amplify,
1. Free and simple auth

2. Easy to manage
- It’s all in one so no need to move S3, Route 53, CloudWatch, and CloudFront.

 

Instructions

Create a step-by-step guide:

 

• Get started with Host your web app

• Select GitHub from existing code

 

• Add repository branch with monorepo options

• Configure build settings

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - curl --request GET --header 'Accept: application/json' --header "api-key: ${DOPPLER_TOKEN}" --url 'https://api.doppler.com/v3/configs/config/secrets/download?format=env&project=${AMPLIFY_MONOREPO_APP_ROOT}&config=${ENVIRONMENT}' > .env
            - echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
            - npm ci
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: dist
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    appRoot: ${AMPLIFY_MONOREPO_APP_ROOT}