> For the complete documentation index, see [llms.txt](https://tutorial.specian.co.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tutorial.specian.co.uk/devops/aws/cloudformation.md).

# CloudFront

We are going to use [CloudFormation](https://aws.amazon.com/cloudfront/) 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.

![](https://2559875260-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnRxZ2gbXvMdM70TAFz%2F-LrFSZAHX5n8JEDas3Z_%2F-LrFYHYRkX9DW4BnqB6w%2Fimage.png?alt=media\&token=4b5379b6-37fe-4ddc-8709-1f6bc5471cdd)

### Creating a distribution

Go to `CloudFront` > `Create Distribution`:

![](https://2559875260-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnRxZ2gbXvMdM70TAFz%2F-LrFSZAHX5n8JEDas3Z_%2F-LrFZBi-GMxJGx5vclH2%2Fimage.png?alt=media\&token=25d324f4-6f59-4eb1-9fef-0b0a084e0aad)

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

![You can find the API Gateway URL in Stages](https://2559875260-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnRxZ2gbXvMdM70TAFz%2F-LrFSZAHX5n8JEDas3Z_%2F-LrFawgBjvpY_HFcAKhX%2Fimage.png?alt=media\&token=02ab3318-ff25-437d-ba53-25b97c0d4546)

* 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: Customize`0` everywhere.