From 9110ed957e3a91336c09998f27706e750e0f2373 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@avris.it>
Date: Fri, 1 Apr 2022 16:22:53 +0200
Subject: [PATCH] #269 reduce S3 usage - cloudfront

---
 .env.dist                            | 1 +
 components/Account.vue               | 2 +-
 migrations/052-avatar-cloudfront.sql | 7 +++++++
 nuxt.config.js                       | 1 +
 plugins/globals.js                   | 2 +-
 server/cleanupImages.js              | 4 ++--
 server/routes/images.js              | 4 ++--
 7 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 migrations/052-avatar-cloudfront.sql

diff --git a/.env.dist b/.env.dist
index 83711503..20d3f62e 100644
--- a/.env.dist
+++ b/.env.dist
@@ -29,6 +29,7 @@ AWS_REGION=
 AWS_KEY=
 AWS_SECRET=
 AWS_S3_BUCKET=
+AWS_CLOUDFRONT_ID=
 
 HCAPTCHA_SITEKEY=10000000-ffff-ffff-ffff-000000000001
 HCAPTCHA_SECRET=0x0000000000000000000000000000000000000000
diff --git a/components/Account.vue b/components/Account.vue
index f72e0c73..229d369e 100644
--- a/components/Account.vue
+++ b/components/Account.vue
@@ -331,7 +331,7 @@
                 this.$cookies.set('token', this.$store.state.token, cookieSettings);
             },
             async uploaded(ids) {
-                await this.setAvatar(`${process.env.BUCKET}/images/${ids[0]}-avatar.png`);
+                await this.setAvatar(`${process.env.CLOUDFRONT}/images/${ids[0]}-avatar.png`);
             },
             async stopImpersonation() {
                 this.$cookies.set('token', this.$cookies.get('impersonator'));
diff --git a/migrations/052-avatar-cloudfront.sql b/migrations/052-avatar-cloudfront.sql
new file mode 100644
index 00000000..f70bba90
--- /dev/null
+++ b/migrations/052-avatar-cloudfront.sql
@@ -0,0 +1,7 @@
+-- Up
+
+UPDATE users SET avatarSource = REPLACE(avatarSource, 'https://pronouns-page.s3-eu-west-1.amazonaws.com/images/', 'https://dclu0bpcdglik.cloudfront.net/images/')
+    WHERE avatarSource LIKE 'https://%/images/%';
+
+-- Down
+
diff --git a/nuxt.config.js b/nuxt.config.js
index c0991685..45a5ee58 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -176,6 +176,7 @@ export default {
         LOCALES: locales,
         FLAGS: buildFlags(),
         BUCKET: `https://${process.env.AWS_S3_BUCKET}.s3-${process.env.AWS_REGION}.amazonaws.com`,
+        CLOUDFRONT: `https://${process.env.AWS_CLOUDFRONT_ID}.cloudfront.net`,
         STATS_FILE: process.env.STATS_FILE,
         HCAPTCHA_SITEKEY: process.env.HCAPTCHA_SITEKEY,
         ALL_LOCALES_URLS: process.env.ALL_LOCALES_URLS,
diff --git a/plugins/globals.js b/plugins/globals.js
index 5c241436..5b8f9d4c 100644
--- a/plugins/globals.js
+++ b/plugins/globals.js
@@ -32,7 +32,7 @@ export default ({ app, store }) => {
 
     store.commit('setSpelling', app.$cookies.get('spelling') || 'traditional');
 
-    Vue.prototype.buildImageUrl = (imageId, size) => `${process.env.BUCKET}/images/${imageId}-${size}.png`
+    Vue.prototype.buildImageUrl = (imageId, size) => `${process.env.CLOUDFRONT}/images/${imageId}-${size}.png`
 
     Vue.prototype.$loadScript = (name, src) => {
         if (!process.client || document.querySelectorAll(`script.${name}-script`).length > 0) {
diff --git a/server/cleanupImages.js b/server/cleanupImages.js
index b8735fbf..aee9aed3 100644
--- a/server/cleanupImages.js
+++ b/server/cleanupImages.js
@@ -16,9 +16,9 @@ async function cleanup() {
     for (let row of await db.all(`
         SELECT avatarSource
         FROM users
-        WHERE avatarSource LIKE 'https://pronouns-page.s3-eu-west-1.amazonaws.com/images/%'`
+        WHERE avatarSource LIKE 'https://%/images/%'`
     )) {
-        avatars[row.avatarSource.match('https://pronouns-page.s3.eu-west-1.amazonaws.com/images/(.*)-thumb.png')[1]] = true;
+        avatars[row.avatarSource.match('https://[^/]+/images/(.*)-(?:thumb|avatar).png')[1]] = true;
     }
 
     const flags = {};
diff --git a/server/routes/images.js b/server/routes/images.js
index b79ad8ac..2cd219e2 100644
--- a/server/routes/images.js
+++ b/server/routes/images.js
@@ -11,8 +11,8 @@ import S3 from 'aws-sdk/clients/s3';
 const sizes = {
     big: [1200, false],
     flag: [256, false],
-    thumb: [128, true],
-    avatar: [96, true],
+    thumb: [192, true],
+    avatar: [144, true],
 }
 
 const resizeImage = (image, width, height, sx = null, sy = null) => {