build(firebase): reconfigure site to be hosted by firebase, fixes Goo…

…gleChrome#2722, fixes GoogleChrome#4382, fixes GoogleChrome#3913, fixes GoogleChrome#2687 (GoogleChrome#4381)

* build(firebase): reconfigure site to be hosted by firebase

* refactor: make tweaks based on feedback

* build(deploy): use node 12

* Update src/build/output-permalink.js

Co-authored-by: Rob Dodson <[email protected]>

* Update src/build/output-permalink.js

Co-authored-by: Rob Dodson <[email protected]>

* build(firebase): add redirects.yaml and generate firebase.json on the fly

Co-authored-by: Rob Dodson <[email protected]>

.cloudbuild/deploy.yaml

@@ -0,0 +1,23 @@
+steps:
+  - name: node:12
+    entrypoint: npm
+    args: ['ci']
+  - name: node:12
+    entrypoint: npm
+    args: ['run', 'cloud-secrets']
+    env:
+    - 'PROJECT_ID=$PROJECT_ID'
+  - name: node:12
+    entrypoint: npm
+    args: ['run', 'build']
+    env:
+    - 'ELEVENTY_ENV=prod'
+  - name: node:12
+    entrypoint: npm
+    args: ['run', 'firebase-config']
+  - name: 'gcr.io/$PROJECT_ID/firebase'
+    args: ['deploy']
+  - name: node:12
+    entrypoint: npm
+    args: ['run', 'algolia']
+timeout: 1800s

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "web-dev-production-1"
+  }
+}

.github/CODEOWNERS

@@ -39,4 +39,4 @@ src/site/content/en/authors/ @GoogleChrome/web-dev-eng
 src/site/_data/authorsData.json @GoogleChrome/web-dev-content @GoogleChrome/web-dev-approvers
 src/site/_data/tagsData.json @GoogleChrome/web-dev-content @GoogleChrome/web-dev-approvers
 src/site/_data/paths/*.json @GoogleChrome/web-dev-content @GoogleChrome/web-dev-approvers
-src/site/content/_redirects.yaml @GoogleChrome/web-dev-content @GoogleChrome/web-dev-approvers
+redirects.yaml @GoogleChrome/web-dev-content @GoogleChrome/web-dev-approvers

.gitignore

@@ -83,3 +83,5 @@ entrypoint.hashmanifest.json
 
 # Temporary files
 .tmp
+.firebase
+firebase.json

index-algolia.js → algolia.js

@@ -29,6 +29,11 @@ const primaryIndexName = 'webdev';
 const deployIndexName = `webdev_deploy_${revision}`;
 
 async function index() {
+  if (!process.env.ALGOLIA_APP || !process.env.ALGOLIA_KEY) {
+    console.warn('Missing Algolia environment variables, skipping indexing.');
+    return;
+  }
+
   const client = algoliasearch(
     process.env.ALGOLIA_APP,
     process.env.ALGOLIA_KEY,

cloud-secrets.js

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview This file generates a `.env` file from the lastest active secrets stored
+ * in the Google Cloud Secret Manager. This is ran from the Cloud Build Deploy script.
+ */
+
+const {SecretManagerServiceClient} = require('@google-cloud/secret-manager');
+
+const client = new SecretManagerServiceClient();
+
+const cloudSecrets = async () => {
+  if (!process.env.PROJECT_ID) {
+    return console.warn(
+      'No Google Cloud Project ID found, no .env file is being generated.',
+    );
+  }
+
+  console.log('Generating .env file.');
+
+  const project = `projects/${process.env.PROJECT_ID}`;
+  let dotenv = '';
+  const fetchedSecrets = [];
+  const [secretsList] = await client.listSecrets({parent: project});
+
+  for (const secretItem of secretsList) {
+    const key = secretItem.name.split('/').pop();
+    const [versions] = await client.listSecretVersions({
+      parent: secretItem.name,
+    });
+    const version = versions.find((v) => v.state === 'ENABLED');
+
+    if (version) {
+      const [accessedSecret] = await client.accessSecretVersion({
+        name: version.name,
+      });
+      const value = accessedSecret.payload.data.toString();
+      dotenv += `${key}=${value}\n`;
+      fetchedSecrets.push(key);
+    }
+  }
+
+  require('fs').writeFileSync('.env', dotenv);
+
+  console.log(
+    `The following environment variables have been added to the generated .env file: ${fetchedSecrets.join(
+      ', ',
+    )}`,
+  );
+};
+
+cloudSecrets().catch((e) => {
+  console.warn('Ooops, there was an error in generating the .env file.', e);
+});

firebase-config.js

@@ -0,0 +1,22 @@
+const yaml = require('js-yaml');
+const fs = require('fs');
+
+const redirectsYaml = fs.readFileSync('./redirects.yaml', 'utf8');
+const {redirects: parsedRedirects} = yaml.safeLoad(redirectsYaml);
+
+const firebaseJson = require('./firebase.incl.json');
+firebaseJson.hosting.redirects = parsedRedirects.reduce(
+  (redirects, redirect) => {
+    if (redirect.source && redirect.destination) {
+      redirects.push({
+        source: redirect.source,
+        destination: redirect.destination,
+        type: 301,
+      });
+    }
+    return redirects;
+  },
+  [],
+);
+
+fs.writeFileSync('./firebase.json', JSON.stringify(firebaseJson, null, 2));

firebase.incl.json

@@ -0,0 +1,25 @@
+{
+  "hosting": {
+    "public": "dist",
+    "headers": [
+      {
+        "source": "**",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "public,max-age=31536000,immutable"
+          }
+        ]
+      }
+    ],
+    "i18n": {
+      "root": "/i18n"
+    },
+    "redirects": []
+  },
+  "emulators": {
+    "hosting": {
+      "port": 8080
+    }
+  }
+}

gulpfile.js

@@ -21,6 +21,8 @@ const imagemin = require('gulp-imagemin');
 const rename = require('gulp-rename');
 const through2 = require('through2');
 
+const {defaultLocale} = require('./src/site/_data/site');
+
 /* eslint-disable max-len */
 const assetTypes =
   'jpg,jpeg,png,svg,gif,webp,webm,mp4,mov,ogg,wav,mp3,txt,yaml';
@@ -67,7 +69,12 @@ gulp.task('copy-content-assets', () => {
       // they belong to.
       .pipe(
         rename((assetPath) => {
+          const defaultLocaleRegExp = new RegExp(`^${defaultLocale}/`);
           const parts = assetPath.dirname.split('/');
+          assetPath.dirname = assetPath.dirname.replace(
+            defaultLocaleRegExp,
+            '',
+          );
           // Landing pages should keep their assets.
           // e.g. en/vitals, en/about
           if (parts.length <= 2) {
@@ -86,11 +93,11 @@ gulp.task('copy-content-assets', () => {
           // Some assets are nested under directories which aren't part of
           // their url. For example, we have /en/blog/some-post/foo.jpg.
           // For these assets we need to remove the /blog/ directory so they
-          // can live at /en/some-post/foo.jpg since that's what we'll actually
+          // can live at /some-post/foo.jpg since that's what we'll actually
           // serve in production.
-          // e.g. en/blog/foo/bar.jpg -> en/foo/bar.jpg
+          // e.g. en/blog/foo/bar.jpg -> /foo/bar.jpg
           parts.splice(1, 1);
-          assetPath.dirname = parts.join('/');
+          assetPath.dirname = parts.join('/').replace(defaultLocaleRegExp, '');
         }),
       )
       .pipe(gulp.dest('./dist/'))