Hosting static web applications with AWS Amplify

Question

Pulumi · Accepted Answer

Hosting a static web application using AWS Amplify involves several steps which include setting up an Amplify App, connecting it to a code repository, and configuring build and deploy settings. AWS Amplify is a set of tools and services that enables developers to build scalable full stack applications, managed by AWS. For a static web application, we use Amplify's hosting feature, which simplifies setting up a continuous deployment pipeline for your website and also provides a global CDN for distribution.

Below is a Pulumi TypeScript program that demonstrates how to host a static web application with AWS Amplify. The program includes setting up an Amplify App, which represents the web application; setting up a Branch, which represents a branch in your source code repository (for example, 'master' or 'main'); and adding a Domain Association, which links a custom domain to your Amplify App. We will also cover setting up the webhook to trigger builds and the deployment of the static assets.

Before running this Pulumi program, ensure you have the AWS CLI configured with the access and secret keys for your AWS account.

import * as pulumi from "@pulumi/pulumi";
import * as aws from "@pulumi/aws";

// Create an AWS resource (Amplify App)
const appName = "my-static-site";
const app = new aws.amplify.App(appName, {
    // The name for the application
    name: appName,
    // The repository that contains the source code for your application. (e.g., GitHub, GitLab, etc.)
    repository: "https://github.com/<your-username>/<your-repo-name>",
    // Build & deploy settings, this example uses a simple build setting for a static site.
    buildSpec: `version: 0.1
frontend:
  phases:
    build:
      commands: ['npm install', 'npm run build']
  artifacts:
    baseDirectory: /public
    files:
      - '**/*'
  cache:
    paths: []
`,
    // Environment variables that will be accessible during the build process.
    environmentVariables: {
      "EXAMPLE_ENV_VAR": "example-value",
    },
    // Optionally, set up basic authentication for the application.
    enableBasicAuth: false,
    // Set custom headers for your static site.
    customHeaders: "/*\n  Cache-Control: max-age=31536000, public\n",
});

// Create a main branch that will be built and deployed by Amplify.
const branch = new aws.amplify.Branch("main", {
    appId: app.id,
    branchName: "main"
});

// Optionally, attach a custom domain to the Amplify App.
const domainName = "example.com"; // Replace with your own custom domain name.
const domain = new aws.amplify.DomainAssociation(domainName, {
    appId: app.id,
    domainName,
    subDomains: [{
        branchName: branch.branchName,
        prefix: "www", // or any subdomain prefix like `blog` or `shop`.
    }],
});

// Output the URLs needed to access the Amplify App and its settings.
export const amplifyAppId = app.id;
export const amplifyAppArn = app.arn;
export const amplifyAppDefaultDomain = app.defaultDomain;
export const amplifyAppName = app.name;
export const branchName = branch.branchName;
export const customDomainName = domain.domainName;
export const customDomainUrl = domain.dnsRecord;

// To build a more complex frontend with additional backend resources like Lambda functions or API Gateway endpoints,
// you may need to declare those resources and link them to your Amplify App as well.

In this program:

We import the necessary Pulumi and AWS SDK components.
We define the Amplify App with aws.amplify.App, which will be the cornerstone of our static site deployment. Here you specify the repository URL.
The buildSpec is defined for the Amplify service to know how to build and deploy your application. This should be configured to match the commands you'd run locally to test your site.
We add a branch with aws.amplify.Branch. Each branch is automatically deployed when changes are merged into it.
Optionally, we set up a custom domain with aws.amplify.DomainAssociation if you want to use a domain other than the one provided by AWS Amplify.
Finally, we export several important values, such as URLs and IDs, that you can use to access your web application or further manage your Pulumi stack.

To deploy this stack, run the following commands:

pulumi up

After running pulumi up, you'll get a prompt asking if you want to perform the update. Confirm it, and Pulumi will provision the resources as per the script. Ensure your repository has a buildspec.yml or an equivalent build configuration in it.

This is a pretty basic setup for a static site. Depending on your use case, you may need to configure a more complex buildSpec, handle environment-specific parameters, set up a testing branch, or add a backend.