💻
Building and hosting a WebApp
  • Getting started
  • Project setup
    • Requirements
    • Files organisation
    • Lerna
    • Linter
    • Prettier
    • GitHook
    • Testing
    • Conclusion
  • Backend
    • Files organisation
    • Environment config
    • Express API
    • Security
    • Database
    • GraphQL
    • User authentication
    • Conclusion
  • Frontend
    • Create React App
    • Files organisation
    • Styles
    • Apollo Hooks
    • Form management
    • User authentication
    • Writing tests
    • Types generation
    • Conclusion
  • DevOps
    • CI/CD
    • AWS
      • Managing secrets
      • Pricing
      • RDS
      • S3
      • Route53
      • CloudFront
      • Serverless
      • Security
      • CloudFormation
    • Conclusion
  • 🚧Stripe payment
  • 🚧File upload
Powered by GitBook
On this page

Was this helpful?

  1. DevOps
  2. AWS

CloudFront

PreviousRoute53NextServerless

Last updated 5 years ago

Was this helpful?

We are going to use to route the traffic to the relevant resources.

  • / will go to S3 to serve the React app static files, and

  • /api will go to the GraphQL API.

Creating a distribution

Go to CloudFront > Create Distribution:

Select Web as a delivery method and use the following configuration:

  • Origin Domain Name: The S3 bucket with resources

  • Viewer Protocol Policy: Redirect HTTP to HTTPS

  • Alternate Domain Names: The domain you bought (e.g daedalost.com)

  • SSL Certificate: Custom SSL Certificate and click "Request or Import a Certificate with ACM" then follow the wizard.

Once you distribution is created, click its ID to edit it.

  • Origins and Origin Groups > Create Origin, paste the API Gateway URL.

  • Paste the API Gateway URL

  • Once created, go to Behaviors > Create Behavior

  • Path Pattern: /api

  • Select the newly created origin

  • Allowed HTTP Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

  • Object Caching: Customize0 everywhere.

CloudFormation
You can find the API Gateway URL in Stages