Setting up a Lambda/Cloudfront setup to fetch subdirectories in S3

Links

Setup

1. S3 Bucket

Set up a restricted S3 bucket. Within this bucket, have subdirectories that house their own index.html file.

2. Set up CloudFront

Follow the permissions setup in the above article to know how to set up the correct event.

3. This is the setup for a JavaScript Lambda call.

This must be done in a region that supports Lambda@next.

'use strict';
exports.handler = (event, context, callback) => {
 // Extract the request from the CloudFront event that is sent to Lambda@Edge
 var request = event.Records[0].cf.request;

 // Extract the URI from the request
 var olduri = request.uri;

 // Match any '/' that occurs at the end of a URI. Replace it with a default index
 var newuri = olduri.replace(/\/$/, '/index.html');

 // Log the URI as received by CloudFront and the new URI to be used to fetch from origin
 console.log('Old URI: ' + olduri);
 console.log('New URI: ' + newuri);

 // Replace the received URI with the URI that includes the index page
 request.uri = newuri;

 // Return to CloudFront
 return callback(null, request);
};
copy

Deploying CRA App

1. Update package.json

"homepage": ".",
copy

2. Update router

export const devRouter = () => (
 <Router history={browserHistory}>
  <Route path={'/page-profile'} component={PageProfile} />
  <Route path="*" exact={true} component={PageHome} />
 </Router>
);

export const prodRouter = () => (
 <Router history={browserHistory}>
  <Route path={'/page-profile'} component={PageProfile} />
  <Route path={'/'} component={PageHome} />
  <Route path={'*'} exact={true} component={PageHome} />
 </Router>
);

export const router = () =>
 process.env.NODE_ENV !== 'development' ? prodRouter() : devRouter();
copy

3. Update router.push calls

import Config from 'src/app.json';
router.push(process.env.PUBLIC_URL + '/test');

// In use
function handleLink(e, d) {
 if (d.href[0] === '/') {
  e.preventDefault();
  const { router } = this.props;
  router.push(Config.baseUrl + d.href);
 }
}
copy

4. Set a baseUrl in app.json

{
 "baseUrl": "/dato-cms-test"
}
copy