Change how CDN_HOST is passed down to make assets build reproducible (#14381)

* Change how CDN_HOST is passed down to make assets build reproducible

* Change webpacker/webpack configuration to dynamically load publicPath based on meta header

* Fix embedded layout missing the cdn-host meta header

diff --git a/app/javascript/mastodon/components/autosuggest_emoji.js b/app/javascript/mastodon/components/autosuggest_emoji.js
index ce4383a607f609568921920ba454702153d53c1a..4937e4d9845f4d46221fe002f2936d91460efe62 100644 (file)
--- a/app/javascript/mastodon/components/autosuggest_emoji.js
+++ b/app/javascript/mastodon/components/autosuggest_emoji.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
-
-const assetHost = process.env.CDN_HOST || '';
+import { assetHost } from 'mastodon/utils/config';
 
 export default class AutosuggestEmoji extends React.PureComponent {
 

diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
index e8a36a92314f0667d205b6973a80986ddebd8fba..bac136e5e9c6ba8fc9ac06f57b61b48842f6a90c 100644 (file)
--- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
+++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import detectPassiveEvents from 'detect-passive-events';
 import { buildCustomEmojis, categoriesFromEmojis } from '../../emoji/emoji';
+import { assetHost } from 'mastodon/utils/config';
 
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@@ -25,7 +26,6 @@ const messages = defineMessages({
   flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
 });
 
-const assetHost = process.env.CDN_HOST || '';
 let EmojiPicker, Emoji; // load asynchronously
 
 const backgroundImageFn = () => `${assetHost}/emoji/sheet_10.png`;

diff --git a/app/javascript/mastodon/features/emoji/emoji.js b/app/javascript/mastodon/features/emoji/emoji.js
index 5d9dad0978bb2da90540d5ca38d4b67a8a4f7a5d..4e37f3a809165de77a039fb082ddc6baaadbf9a3 100644 (file)
--- a/app/javascript/mastodon/features/emoji/emoji.js
+++ b/app/javascript/mastodon/features/emoji/emoji.js
@@ -1,11 +1,10 @@
 import { autoPlayGif } from '../../initial_state';
 import unicodeMapping from './emoji_unicode_mapping_light';
+import { assetHost } from 'mastodon/utils/config';
 import Trie from 'substring-trie';
 
 const trie = new Trie(Object.keys(unicodeMapping));
 
-const assetHost = process.env.CDN_HOST || '';
-
 // Convert to file names from emojis. (For different variation selector emojis)
 const emojiFilenames = (emojis) => {
   return emojis.map(v => unicodeMapping[v].filename);

diff --git a/app/javascript/mastodon/features/getting_started/components/announcements.js b/app/javascript/mastodon/features/getting_started/components/announcements.js
index 8f824f140aabcbcacf370902d0c26943e2b4b9b1..4853c393521a419a0e15dff97f262915223ed458 100644 (file)
--- a/app/javascript/mastodon/features/getting_started/components/announcements.js
+++ b/app/javascript/mastodon/features/getting_started/components/announcements.js
@@ -15,6 +15,7 @@ import EmojiPickerDropdown from 'mastodon/features/compose/containers/emoji_pick
 import AnimatedNumber from 'mastodon/components/animated_number';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import spring from 'react-motion/lib/spring';
+import { assetHost } from 'mastodon/utils/config';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -153,8 +154,6 @@ class Content extends ImmutablePureComponent {
 
 }
 
-const assetHost = process.env.CDN_HOST || '';
-
 class Emoji extends React.PureComponent {
 
   static propTypes = {

diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.js b/app/javascript/mastodon/features/ui/components/focal_point_modal.js
index 926a495d1c3db4e0359a8ac17c9a3a66c4bb3c87..e19f277d8e1d4a98abbebeceef0994a19fa752aa 100644 (file)
--- a/app/javascript/mastodon/features/ui/components/focal_point_modal.js
+++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.js
@@ -20,6 +20,7 @@ import GIFV from 'mastodon/components/gifv';
 import { me } from 'mastodon/initial_state';
 import tesseractCorePath from 'tesseract.js-core/tesseract-core.wasm.js';
 import tesseractWorkerPath from 'tesseract.js/dist/worker.min.js';
+import { assetHost } from 'mastodon/utils/config';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -50,8 +51,6 @@ const removeExtraLineBreaks = str => str.replace(/\n\n/g, '******')
   .replace(/\n/g, ' ')
   .replace(/\*\*\*\*\*\*/g, '\n\n');
 
-const assetHost = process.env.CDN_HOST || '';
-
 class ImageLoader extends React.PureComponent {
 
   static propTypes = {

diff --git a/app/javascript/mastodon/utils/config.js b/app/javascript/mastodon/utils/config.js
new file mode 100644 (file)
index 0000000..932cd0c
--- /dev/null
+++ b/app/javascript/mastodon/utils/config.js
@@ -0,0 +1,10 @@
+import ready from '../ready';
+
+export let assetHost = '';
+
+ready(() => {
+  const cdnHost = document.querySelector('meta[name=cdn-host]');
+  if (cdnHost) {
+    assetHost = cdnHost.content || '';
+  }
+});

diff --git a/app/javascript/packs/about.js b/app/javascript/packs/about.js
index 843cb2c87d43860242a16b32852452f597080f78..892d825ece23e552289d47300a9d887e9949f938 100644 (file)
--- a/app/javascript/packs/about.js
+++ b/app/javascript/packs/about.js
@@ -1,3 +1,4 @@
+import './public-path';
 import loadPolyfills from '../mastodon/load_polyfills';
 import { start } from '../mastodon/common';
 

diff --git a/app/javascript/packs/admin.js b/app/javascript/packs/admin.js
index 51f92de8aa58a79bed1a5f5fd73d3b74cdc9e9f6..65b8dc040d24d4f3ac8f19da815c7009256be90b 100644 (file)
--- a/app/javascript/packs/admin.js
+++ b/app/javascript/packs/admin.js
@@ -1,3 +1,4 @@
+import './public-path';
 import { delegate } from '@rails/ujs';
 import ready from '../mastodon/ready';
 

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index c65ebed74f8b94abf31111d7aa395e2a33a42ba4..91240aecfb85a09494bcdb6e54837ef244d57f43 100644 (file)
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -1,3 +1,4 @@
+import './public-path';
 import loadPolyfills from '../mastodon/load_polyfills';
 import { start } from '../mastodon/common';
 

diff --git a/app/javascript/packs/error.js b/app/javascript/packs/error.js
index 685c890658a007886aaafa00509d42916de05788..6376dc2f5dfcc1f63eb3f5af6c847caf9209e1de 100644 (file)
--- a/app/javascript/packs/error.js
+++ b/app/javascript/packs/error.js
@@ -1,3 +1,4 @@
+import './public-path';
 import ready from '../mastodon/ready';
 
 ready(() => {

diff --git a/app/javascript/packs/public-path.js b/app/javascript/packs/public-path.js
new file mode 100644 (file)
index 0000000..f96109f
--- /dev/null
+++ b/app/javascript/packs/public-path.js
@@ -0,0 +1,21 @@
+// Dynamically set webpack's loading path depending on a meta header, in order
+// to share the same assets regardless of instance configuration.
+// See https://webpack.js.org/guides/public-path/#on-the-fly
+
+function removeOuterSlashes(string) {
+  return string.replace(/^\/*/, '').replace(/\/*$/, '');
+}
+
+function formatPublicPath(host = '', path = '') {
+  let formattedHost = removeOuterSlashes(host);
+  if (formattedHost && !/^http/i.test(formattedHost)) {
+    formattedHost = `//${formattedHost}`;
+  }
+  const formattedPath = removeOuterSlashes(path);
+  return `${formattedHost}/${formattedPath}/`;
+}
+
+const cdnHost = document.querySelector('meta[name=cdn-host]');
+
+// eslint-disable-next-line camelcase, no-undef, no-unused-vars
+__webpack_public_path__ = formatPublicPath(cdnHost ? cdnHost.content : '', process.env.PUBLIC_OUTPUT_PATH);

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 551e281a8eeb38efcfe1e89cc15fd682bef6254e..39defa7ae9ee8d1e14bedcb2092d7eacfb42961f 100644 (file)
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -1,3 +1,4 @@
+import './public-path';
 import escapeTextContentForBrowser from 'escape-html';
 import loadPolyfills from '../mastodon/load_polyfills';
 import ready from '../mastodon/ready';

diff --git a/app/javascript/packs/share.js b/app/javascript/packs/share.js
index 4ef23e1b2e9b8ef705ff07a4d9e468df39d89801..1225d7b52943151a18249c091a7454a63c012d79 100644 (file)
--- a/app/javascript/packs/share.js
+++ b/app/javascript/packs/share.js
@@ -1,3 +1,4 @@
+import './public-path';
 import loadPolyfills from '../mastodon/load_polyfills';
 import { start } from '../mastodon/common';
 

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index e32cdcabb3f6017d6b499c14924a21ddaa8084fb..1f10f40c0a3925bca352aee1a347c6d17cc8d680 100755 (executable)
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -6,6 +6,7 @@
 
     - if cdn_host?
       %link{ rel: 'dns-prefetch', href: cdn_host }/
+      %meta{ name: 'cdn-host', content: cdn_host }/
 
     - if storage_host?
       %link{ rel: 'dns-prefetch', href: storage_host }/

diff --git a/app/views/layouts/embedded.html.haml b/app/views/layouts/embedded.html.haml
index 4a40b8584b407d9815b3da2674ce1421ed670d45..37051e70cf8dd2e679d97ab5749d3333c299cb5b 100644 (file)
--- a/app/views/layouts/embedded.html.haml
+++ b/app/views/layouts/embedded.html.haml
@@ -6,6 +6,7 @@
 
     - if cdn_host?
       %link{ rel: 'dns-prefetch', href: cdn_host }/
+      %meta{ name: 'cdn-host', content: cdn_host }/
 
     - if storage_host?
       %link{ rel: 'dns-prefetch', href: storage_host }/

diff --git a/config/webpack/configuration.js b/config/webpack/configuration.js
index 80a094c724e6a1986f23bc874150e2a697651685..e4f88a9c4dfd6f3bc30c7b525926f35844674e3e 100644 (file)
--- a/config/webpack/configuration.js
+++ b/config/webpack/configuration.js
@@ -11,30 +11,17 @@ const settings = safeLoad(readFileSync(configPath), 'utf8')[env.RAILS_ENV || env
 const themePath = resolve('config', 'themes.yml');
 const themes = safeLoad(readFileSync(themePath), 'utf8');
 
-function removeOuterSlashes(string) {
-  return string.replace(/^\/*/, '').replace(/\/*$/, '');
-}
-
-function formatPublicPath(host = '', path = '') {
-  let formattedHost = removeOuterSlashes(host);
-  if (formattedHost && !/^http/i.test(formattedHost)) {
-    formattedHost = `//${formattedHost}`;
-  }
-  const formattedPath = removeOuterSlashes(path);
-  return `${formattedHost}/${formattedPath}/`;
-}
-
 const output = {
   path: resolve('public', settings.public_output_path),
-  publicPath: formatPublicPath(env.CDN_HOST, settings.public_output_path),
+  publicPath: `/${settings.public_output_path}/`,
 };
 
 module.exports = {
   settings,
   themes,
   env: {
-    CDN_HOST: env.CDN_HOST,
     NODE_ENV: env.NODE_ENV,
+    PUBLIC_OUTPUT_PATH: settings.public_output_path,
   },
   output,
 };