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) => {