raaedkabir / personal-website Goto Github PK

AWS Hosting

• DNS setup with Route 53
• SSL Certificate from Certificate Manager
• Static hosting on S3
• Distribution with CloudFront

CI/CD Build Pipeline using Travis CI

1. Merge code to master branch
2. Run build
3. Upload /dist to S3
4. Invalidate CloudFront's cache

Problems with Configuring Client-Side Routing (for SPAs)

• Setting the Error Document in S3 makes potential valid URLs treated as 404s
• Customizing the Error Response in CloudFront treats invalid URLs as 200s
• Adding a Lamda@Edge Viewer Request Interceptor to check the route against known routes will correctly serve 200s and 404s respectively but will require extra work of updating the list of known routes

This webapp was using the third option but has instead now migrated to Nuxt. But for reference the Lamda@Edge code is still here:

// array of known routes
const pages = [...known_routes]

exports.handler = (event, context, callback) => {
  const request = event.Records[0].cf.request

  // replace URI if route is valid
  if (pages.indexOf(request.uri.slice(1)) > -1) {
    request.uri = '/index.html'
  }

  // pass route back to request
  callback(null, request)
}