setting up redirects and a function to deliver cloudinary images

Author: colbyfayock

package.json

@@ -1,6 +1,6 @@
 {
   "name": "netlify-plugin-cloudinary",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -14,6 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "cloudinary": "^1.27.1",
+    "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
     "jsdom": "^18.1.1",
     "node-fetch": "2"

src/index.js

@@ -1,16 +1,81 @@
-const fs = require('fs').promises;
+
+const fs = require('fs-extra')
+const path = require('path');
 const glob = require('glob');
 
-const { getCloudinary, updateHtmlImagesToCloudinary } = require('./lib/cloudinary');
+const { getCloudinary, updateHtmlImagesToCloudinary, getCloudinaryUrl } = require('./lib/cloudinary');
+
+const CLOUDINARY_ASSET_PATH = "/cloudinary-assets";
+const CLOUDINARY_IMAGES_PATH = `${CLOUDINARY_ASSET_PATH}/images`;
+
+const CLOUDINARY_MEDIA_FUNCTIONS = ['images'];
 
 /**
  * TODO
  * - Handle srcset
- * - Delivery type for redirect via Netlify redirects
  */
 
 module.exports = {
 
+  async onBuild({ netlifyConfig, constants, inputs }) {
+    const { FUNCTIONS_SRC, INTERNAL_FUNCTIONS_SRC } = constants;
+    const { uploadPreset, deliveryType } = inputs;
+
+    const cloudName = process.env.CLOUDINARY_CLOUD_NAME || inputs.cloudName;
+
+    if ( !cloudName ) {
+      throw new Error('Cloudinary Cloud Name required. Please set cloudName input or use environment variable CLOUDINARY_CLOUD_NAME');
+    }
+
+    const functionsPath = INTERNAL_FUNCTIONS_SRC || FUNCTIONS_SRC;
+
+    // Copy all of the templates over including the functions to deploy
+
+    try {
+      await fs.copy(path.join(__dirname, 'templates'), functionsPath);
+    } catch(e) {
+      console.log('Failed to copy templates:', e);
+      throw e;
+    }
+
+    // Configure reference parameters for Cloudinary delivery to attach to redirect
+
+    const params = {
+      uploadPreset,
+      deliveryType: 'fetch',
+      cloudName
+    }
+
+    const paramsString = Object.keys(params)
+      .filter(key => typeof params[key] !== 'undefined')
+      .map(key => `${key}=${encodeURIComponent(params[key])}`)
+      .join('&');
+
+    // Redirect any requests that hits /[media type]/* to a serverless function
+
+    CLOUDINARY_MEDIA_FUNCTIONS.forEach(mediaName => {
+      const functionName = `cld_${mediaName}`;
+
+      netlifyConfig.redirects.push({
+        from: `/${mediaName}/*`,
+        to: `${process.env.DEPLOY_PRIME_URL}/.netlify/functions/${functionName}/:splat?${paramsString}`,
+        status: 302,
+        force: true,
+      });
+
+      netlifyConfig.redirects.push({
+        from: `/cld-assets/${mediaName}/*`,
+        to: `/${mediaName}/:splat`,
+        status: 200,
+        force: true
+      });
+    });
+
+  },
+
+  // Post build looks through all of the output HTML and rewrites any src attributes to use a cloudinary URL
+  // This only solves on-page references until any JS refreshes the DOM
+
   async onPostBuild({ constants, inputs }) {
     const { PUBLISH_DIR } = constants;
     const {
@@ -27,12 +92,10 @@ module.exports = {
       throw new Error('Cloudinary Cloud Name required. Please use environment variable CLOUDINARY_CLOUD_NAME');
     }
 
-    const cloudinary = getCloudinary();
-
-    cloudinary.config({
-      cloud_name: cloudName,
-      api_key: apiKey,
-      api_secret: apiSecret
+    const cloudinary = getCloudinary({
+      cloudName,
+      apiKey,
+      apiSecret
     });
 
     // Find all HTML source files in the publish directory

src/lib/cloudinary.js

@@ -10,7 +10,13 @@ const { isRemoteUrl, determineRemoteUrl } = require('./util');
  * getCloudinary
  */
 
-function getCloudinary() {
+function getCloudinary(config = {}) {
+  cloudinary.config({
+    cloud_name: config.cloudName,
+    api_key: config.apiKey,
+    api_secret: config.apiSecret
+  });
+
   return cloudinary;
 }
 

src/lib/util.js

@@ -24,4 +24,27 @@ function determineRemoteUrl(url, host) {
   return url;
 }
 
-module.exports.determineRemoteUrl = determineRemoteUrl;
+module.exports.determineRemoteUrl = determineRemoteUrl;
+
+/**
+ * getQueryParams
+ */
+
+function getQueryParams(url) {
+  if ( typeof url !== 'string') {
+    throw new Error('Can not getQueryParams. Invalid URL');
+  }
+
+  const params = {};
+
+  const urlSegments = url.split('?');
+
+  urlSegments[1] && urlSegments[1].split('&').forEach(segment => {
+    const [key, value] = segment.split('=');
+    params[key] = value;
+  });
+
+  return params;
+}
+
+module.exports.getQueryParams = getQueryParams;

src/templates/cld_images/cld_images.js

@@ -0,0 +1,57 @@
+exports.handler = async function (event, context) {
+  const { rawUrl } = event;
+
+  const rawUrlSegments = rawUrl.split('.netlify/functions/cld_images');
+  const endpoint = rawUrlSegments[0].replace(/\/$/, '');
+  const pathSegments = rawUrlSegments[1].split('?');
+  const imagePath = `/cld-assets/images${pathSegments[0]}`;
+
+  const { deliveryType, uploadPreset } = getQueryParams(rawUrl);
+
+  const cloudName = process.env.CLOUDINARY_CLOUD_NAME || queryParams.cloudName;
+
+  const remoteUrl = encodeURIComponent(`${endpoint}${imagePath}`);
+
+  const cloudinaryUrl = `https://res.cloudinary.com/colbydemo/image/fetch/f_auto,q_auto/${remoteUrl}`
+
+  console.log({
+    rawUrl,
+    pathSegments,
+    imagePath,
+    cloudName,
+    endpoint,
+    imagePath,
+    remoteUrl,
+    cloudinaryUrl
+  })
+
+  return {
+    statusCode: 302,
+    headers: {
+      Location: cloudinaryUrl
+    }
+  };
+};
+
+/**
+ * getQueryParams
+ */
+
+function getQueryParams(url) {
+  if ( typeof url !== 'string') {
+    throw new Error('Can not getQueryParams. Invalid URL');
+  }
+
+  const params = {};
+
+  const urlSegments = url.split('?');
+
+  urlSegments[1] && urlSegments[1].split('&').forEach(segment => {
+    const [key, value] = segment.split('=');
+    params[key] = value;
+  });
+
+  return params;
+}
+
+module.exports.getQueryParams = getQueryParams;

yarn.lock

@@ -1182,6 +1182,15 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+fs-extra@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
+  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1234,6 +1243,11 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.9"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
+  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
+
 graceful-fs@^4.2.4:
   version "4.2.8"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
@@ -1942,6 +1956,15 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@@ -2513,6 +2536,11 @@ universalify@^0.1.2:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+
 v8-to-istanbul@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.0.tgz#0aeb763894f1a0a1676adf8a8b7612a38902446c"