Skip to content

Angular / Deploy Application / Amazon Web Services

This page describes how to deploy an Angular application to Amazon Web Services (AWS).

Introduction

An Angular application can be deployed as an AWS S3 bucket public static website, which is only available for http and can only serve the full folder path (no mapping of folders to URLs).

Optionally, AWS CloudFront can be used to serve content that is stored in S3. CloudFront allows using https, serving an S3 bucket folder as a website, and other Content Delivery Network (CDN) features.

The approach used to deploy the Angular application to AWS should consider important requirements, including:

See also:

Deploy to Dedicated S3 Bucket

A dedicated S3 bucket means that the bucket contains only the application's files. The S3 bucket name may therefore be something similar to the following, assuming an application name ngapp and domain openwaterfoundation.org.

ngapp.openwaterfoundation.org

The following table summarizes configuration information for this example.

S3 Dedicated Bucket Configuration

Scope Configuration Item Value Description
S3 Bucket name. ngapp.openwaterfoundation.org Use a domain name that allows direct access to the application via top-level index.html. A DNS CNAME alias is required for nice URL.
S3 Folder for Angular application. / Angular application is uploaded directly to bucket root.
DNS CNAME alias ngapp.openwaterfoundation.org Points to the S3 endpoint domain for the above bucket.
Browser URL http://ngapp.openwaterfoundation.org S3 only allows http and the index document for public static website should be set to index.html.
Angular Need to list Angular configuration properties.

If it is desired to use CloudFront features, see Using CloudFront to Serve an S3 Dedicated Bucket.

Versioned Folders in Dedicated S3 Bucket

Because the approach uses a dedicated S3 bucket for the application, deploying versions of the application require creating buckets for each version. For example, use ngapp-v1 instead of ngapp. Although this approach is valid, it requires multiple buckets and therefore counts against the AWS account bucket limits.

If it is desired to use CloudFront features, see Using CloudFront to Serve an S3 Dedicated Bucket. A CloudFront distribution can be created for each versioned bucket.

Another option for versioned software is to use S3 bucket folders, as discussed in the next section.

Deploy to S3 Bucket with Folders

Using an S3 bucket with folders requires one of the following configurations:

  1. If using only S3, the URL to the application will contain the folder and the folder must therefore be handled by the application configuration.
  2. If using S3 and CloudFront:
    1. The CloudFront distribution Origin Path can be defined using the folder so that the folder is not visible in the URL.
    2. Or, the CloudFront distribution Origin Path is not defined; therefore the URL will contain the folder and be similar to option 1.

Folders may be used with an S3 bucket for several reasons, as illustrated in the following examples.

For example, as shown below, a bucket may be dedicated to a single Angular application, but folders indicate versions of the application. This is useful for testing a development version, allows transition from one version of the application to another, and supports access to long-term releases. For example the latest version can be archived with a version number folder, and dev version can be released into latest.

Use S3 Bucket Folders for Different Versions of the Software 

/ngapp.openwaterfoundation.org/      Bucket name is domain - see discussion below.
/owf-ngapp/                          Bucket name uses organization.
/ngapp/                              Bucket name must be unique in S3.
       latest/                       See discussion below.
       dev/
       1.1.0/
       1.2.0/

The following illustrates serving multiple applications from the same bucket, each with its own folder. This may be more convenient than creating a bucket for each application.

Use S3 Bucket Folders for Different Software Products 

/apps.openwaterfoundation.org/       Bucket name is domain - see discussion below.
/owf-apps/                           Bucket name uses organization.
/apps/                               Bucket name must be unique in S3.
      app1/                          See discussion below.
      app-abc/
      demo-app/

The following is a combination of the previous two examples and illustrates serving multiple applications from the same bucket, each with its own folder, and with versions for each software product. This may be more convenient than creating a bucket for each application.

Use S3 Bucket Folders for Different Software Products and Versions 

/apps.openwaterfoundation.org/       Bucket name is domain - see discussion below.
/owf-apps/                           Bucket name uses organization.
/apps/                               Bucket name must be unique in S3.
     app1/                           See discussion below.
         latest/
         dev/
         1.1.0/
         1.2.0/
     app-abc/
            latest/
            dev/
            1.1.0/
            1.2.0/
     demo-app/
             latest/
             dev/
             1.1.0/
             1.2.0/

The S3 URLs that result are not typical URLs for an organization because they follow the pattern http://bucketname.s3-website-us-west-2.amazonaws.com. Consequently, the S3 bucket URL is typically aliased to an organization's subdomain using a DNS CNAME record. This is only allowed if the bucket name matches a valid subdomain pattern for the organization's domain.

The decision of whether the bucket name should match a domain (e.g., ngapp.openwaterfoundation.org or apps.openwaterfoundation.org) depends on whether:

  • The bucket will be served as a public static website. In this case the bucket name should match the domain that will be served.
  • The URLs for the deployed application can contain visible folder or not (if not, then see CloudFront sections below which can serve a folder that can be aliased using DNS CNAME).
  • S3 bucket names must be unique across S3. Therefore, short, generic names may already be taken and are prone to conflicts. Using the organization name in the bucket name in some way, either using the domain or otherwise, helps ensure that the bucket name is unique and is associated with the organization.

The following table summarizes configuration information assuming an application name ngapp, domain name ngapp.openwaterfoundation.org, and folders are allowed in the URL for different application versions.

S3 Bucket Folder Configuration with Folder in URL

Scope Configuration Item Value Description
S3 Bucket name. ngapp.openwaterfoundation.org Use a domain name that allows access to the application via a folder-level index.html. A DNS CNAME alias is required for nice URL.
S3 Folder for Angular application. latest/, dev/, 1.0.0, etc. Angular application is uploaded directly to the latest folder, indicating latest software release.
DNS CNAME alias ngapp.openwaterfoundation.org Points to the S3 endpoint domain for the above bucket.
Browser URL http://ngapp.openwaterfoundation.org/latest/ The URL contains the version folder.
Angular Need to list Angular configuration properties.

If it is desired that the application URL not contain a folder, see the Using CloudFront to Serve an S3 Bucket Folder section.

Using CloudFront to Serve an S3 Dedicated Bucket

AWS CloudFront can be used to serve a dedicated S3 bucket. For example, the CloudFront Origin Domain Name is the S3 dedicated bucket and the Origin Path is not specified, meaning that the bucket root folder is served.

CloudFront provides the following features over S3:

  • can serve as http and/or https
  • can be configured as an authenticated website (S3 can only provide public static website)
  • CDN features to distribute content to regional servers and cache content

Similar to the S3 public static website, the CloudFront URL can be used to define a DNS CNAME. The CloudFront settings can also optionally restrict URL access to only CloudFront URL (this is useful if the S3 bucket is private but may not be needed for S3 public static website). Therefore, if using CloudFront, defining a DNS CNAME for the S3 URL can be skipped.

Using CloudFront to Serve an S3 Bucket Folder

See the previous section for background.

AWS CloudFront can be used to serve an S3 bucket folder. For example, the CloudFront Origin Domain Name is the S3 dedicated bucket and the Origin Path is specified as a folder found in the bucket.

For example, if a software application has multiple S3 bucket folders for different versions, the app/latest folder can be served as a domain so that no folder is visible in the URL. See the following table for configuration.

S3 Bucket Folder Configuration with no Folder in URL

Scope Configuration Item Value Description
S3 Bucket name. ngapp.openwaterfoundation.org Use a domain name that allows access to the application via a folder-level index.html. A DNS CNAME alias is required for nice URL.
S3 Folder for Angular application. latest/, dev/, 1.0.0, etc. Angular application is uploaded directly to the latest folder, indicating latest software release.
CloudFront Origin Domain Name The S3 bucket URL Select from list when configuring CloudFront.
CloudFront Origin Path latest/ The CloudFront distribution will serve the content of the specified folder, rather than the bucket root folder.
DNS CNAME alias ngapp.openwaterfoundation.org Points to the CloudFront endpoint domain for the above bucket folder, in this example serving the latest version of the application by default for the domain name.
Browser URL http://ngapp.openwaterfoundation.org/ The URL contains the version folder.
Angular Need to list Angular configuration properties.