Skip to content
Search

AWS Amplify

lastmod 2023-02-15created 2023-02-0822 edits

Create app backends / build frontend web UIs / host web apps

Categories

Amplify CLI

How to upload directly with the CLI

See AWS:CLI:Amplify for details.

Deploying without a Git Provider

Add a custom domain managed by a third-party DNS provider

See AWS:Amplify:Domain.

Using redirects

Redirects for single-page web apps (SPA)

Most SPA frameworks support HTML5 history.pushState() to change the browser location without triggering a server request. This is not suitable for users who begin their journey at the root (or /index.html) but navigate directly to another page. The following example uses a regular expression to set up a rewrite (200) of all files to the index.html file, except for the specific file extensions specified in the regular expression.

Source address

Target address

Redirect type

Country code

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>

/index.html

200

Custom headers

Security headers example

Custom security headers enable enforcing HTTPS, preventing XSS attacks, and defending your browser against clickjacking. Use the following YAML syntax to apply custom security headers to your app. 

customHeaders:
  - pattern: '**'
    headers:
      - key: 'Strict-Transport-Security'
        value: 'max-age=31536000; includeSubDomains'
      - key: 'X-Frame-Options'
        value: 'SAMEORIGIN'
      - key: 'X-XSS-Protection'
        value: '1; mode=block'
      - key: 'X-Content-Type-Options'
        value: 'nosniff'
      - key: 'Content-Security-Policy'
        value: "default-src 'self'"
  • Strict-Transport-Security
  • X-Frame-Options
  • X-XSS-Protection
  • X-Content-Type-Options
  • Content-Security-Policy

Disable caching of the index.html file

Used to solve the Cache Busting problem. Typically use it in an SPA. 

customHeaders:
  - pattern: '/index.html'
    headers: &cacheBustingGuard
      - key: 'Cache-Control'
        value: 'no-cache, no-store, must-revalidate'
  - pattern: '/favicon.ico'
    headers: *cacheBustingGuard
  - pattern: '/logo*.png'
    headers: *cacheBustingGuard
  - pattern: '/*manifest.json'
    headers: *cacheBustingGuard
  - pattern: '/robots.txt'
    headers: *cacheBustingGuard
  - pattern: '/service-worker.js*'
    headers: *cacheBustingGuard

See also

Favorite site

Getting started

author Zer0 sitemap