Hosting multiple React apps from S3 via Cloudfront

Question

We are hosting a react app in an s3 bucket via cloudfront, hosting on mydomain.com/app (s3 origin) and the backend via ELB on mydomain.com/api (elb orgin), with the default path going to the elb origin. We had to override the 403 response to get it to work, returning a 200 status with /app/index.html. We are unclear if there is any other workaround besides the custom error response, but if we want to add another app, say mydomain.com/app2 (another s3 orgin), we cannot because of the 403 custom error going to /app/index.html

Is there any way to get it to work without the custom 403 override or to have multipe 403 pages, one for each origin?

HotJavaJoeDev · Accepted Answer

Thanks to Paul L... Here is the python solution and a few notes about using python..

1. You can't use a template, you have to create the lambda manually (make sure you don't select arm, only works with x86)
2. Add a trigger for your cloudfront, for me I added it to my /app/* behavior and once I got that working I added to my /app2/* behavior, etc. You need to deploy to both to get them on the same verison.

```
#!/usr/bin/python
# -*- coding: utf-8 -*-
import json
from os.path import splitext

def lambda_handler(event, context):
    request = event['Records'][0]['cf']['request']

#print("Request before ", request)
    ext = splitext(request['uri'])[1]
    #print("extension = ", ext)

#only do this for URI's with no extension!!!
    if (ext == ""):
        if request['uri'].startswith('/app'):
            request['uri'] = '/app/index.html'
        elif request['uri'].startswith('/app2'):
            request['uri'] = '/app2/index.html'
        #print("Request after ", request)
    return request
```

Paul_L · Answer

In order to run multiple apps under the same domain, you'll need to use Lambda@Edge or Cloudfront Functions to implement the functionality you need.

There are two options I can think of - either you examine the *request* and **rewrite** the URI path to /app/index.html, or you examine the *response* where you'd look for error codes and adjust the status code and body accordingly (see example [here](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-examples.html#lambda-examples-custom-error-static-body))

I think the response option is slightly more complex as you'd either need to embed the contents of index.html inside the function, or make a network call from the function to retrieve it from S3.

For the request option, I don't think we have any sample CloudFront functions that do exactly this, but there is one [here](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-index.html) that is close - just adjust the IF statements to suit- eg.

```
    if (uri.startsWith('/app1/')) {
        request.uri = '/app1/index.html';
    }
    else if (uri.startsWith('/app2/')) {
        request.uri = '/app2/index.html';
    }
```

fpelaezt · Answer

Hi, have you tested the Path Pattern option [1] ? That will give you a way to use specific origins for specif routes or paths.

[1] https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html?icmpid=docs_cf_help_panel#DownloadDistValuesPathPattern

Hosting multiple React apps from S3 via Cloudfront

Relevant content