AWS CDN + Lambda@Edge MimeType 问题

Question

I've been working lately with AWS CDN + S3 bucket as origin.

When no lambda@edge function attached into the Origin Request it works fine but I need the lambda@edge fn for rerouting. Some of the js file's mimetype are not text/javascript instead text/html . Any idea?

Lambda@edge function is just a simple rerouting no special feature.

Here is the function:

'use strict';

exports.handler = (evt, context, cb) => {
  const { request } = evt.Records[0].cf;

  const uriParts = request.uri.split("/")[1];

  const locales = ['en-US', 'ja', 'ms'];

  if (!uriParts || !locales.includes(uriParts)) {
    request.uri = '/en-US/index.html';
    return cb(null, request)
  }

  request.uri = `/${uriParts}/index.html`;
  
  console.log(`Request Uri: ${request.uri}`);

  cb(null, request);

}

Sample response image

Setup:

S3 Bucket
  en-US/
    index.html
    <bunch of js files from angular>
  ja/
    index.html
    <bunch of js files from angular>
  ms/
    index.html
    <bunch of js files from angular>


CDN Distribution + Origin is the S3

Answer 1

Solved. First of all, my bad for not understanding well the triggers of Lambda@Edge function. Refer to this article .

First try, I used origin request as s trigger and somehow came to understand that it wasn't I need for my case.

After some debug and reading, I used viewer request this time. Also, alter my Lambda@Edge function to this.

'use strict';

const path = require("path");

exports.handler = async (evt,context,cb) => {
  const { request } = evt.Records[0].cf;

  console.log(`Original Uri: ${request.uri}`);

  const uriParts = request.uri.split("/");

  const locale = uriParts.length > 1 ? uriParts[1] : "";
  const locales = ["en-US", "ja", "ms"];

  if (locale === "" || locale === "index.html") {
    request.uri = "/en-US/index.html";
    return cb(null, request);
  }

  if (!locales.includes(locale)) return cb(null, request);

  const lastPartUrl = uriParts[uriParts.length - 1];
  const fileExt = path.extname(lastPartUrl);

  if (!fileExt) request.uri = `/${locale}/index.html`;

  console.log(`New Uri: ${request.uri}`);
  return cb(null, request);
};

Now every locale in our application is now working fine.