VACMS-15240 Stand up running next-build server per tugboat instance (#15429)

KitLykos · Kit Nunnally · ndouglas · web-flow · commit 16d504d7811c · 2023-10-24T19:24:57.000-05:00
* Stubbing out next server config

* Updating config values to be spaces

* Updating to add splash page

* changing line endings

* Scripts for next build

* Fixed permissions issues

* Attempting file permission fix

* trying one more permission thing

* Change permissions.

* Removed tab character

* Removed the actual white space that was the issue

* Added yarn start to next build

* Adjusting scripts for next start

* Resolving issues from review

* Resolving more review stuff

* adding rest of the path to next-start

* Adjusting scope for output

* update perms

* add apache proxy settings for next-build node server

* add 503 error page for next-*

* 503 j2 to html

---------

Co-authored-by: Kit Nunnally &lt;kit.nunnally@greenwayhealth.com&gt;
Co-authored-by: Nathan Douglas &lt;github@darkdell.net&gt;
Co-authored-by: Tanner Heffner &lt;tanner.heffner@agile6.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -102,6 +102,9 @@ datadog-setup.php
 # web
 # @TODO: Installer paths is not working. Leaving symlink for now.
 
+# Ignore Next (next-build)
+next
+
 # Temporary .deb packages
 *.deb
 
diff --git a/.next/403-error-document.j2.html b/.next/403-error-document.j2.html
@@ -0,0 +1,51 @@
+<!-- This is a Jinja2 template without a *.j2 extension because it isn't testable in a browser with *.j2. -->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Next-build Preview not built yet</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="refresh" content="2" />
+
+  <style>
+    body {
+      /* VA.gov dark blue */
+      background: #112e51;
+      text-align: center;
+      color: white;
+    }
+
+    p {
+      font-size: large;
+    }
+
+    a {
+      text-decoration: underline;
+      color: white;
+    }
+
+    .hero {
+      margin-top: 25px;
+      width: 70%;
+      height: 20%;
+      object-fit: cover;
+      object-position: 0 80%;
+    }
+
+    .container-info {
+      margin-bottom: 100px;
+    }
+  </style>
+</head>
+
+<body>
+  <img class="hero" src="/.next/artur-pokusin-unsplash.jpg">
+  <h1>Next-build not ready yet</h1>
+  <div class="container-info">
+    <p>The next-build server is not built & running yet.</p>
+    <p>Check the status of the <code>composer va:next:start</code> command in the logs to learn more.</p>
+  </div>
+  <footer>Photo by <a href="https://unsplash.com/@arturpokusin?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Artur Pokusin</a> on <a href="https://unsplash.com/s/photos/void?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
+  </footer>
+</body>
+
+</html>
diff --git a/.next/503-error-document.j2.html b/.next/503-error-document.j2.html
@@ -0,0 +1,51 @@
+<!-- This is a Jinja2 template without a *.j2 extension because it isn't testable in a browser with *.j2. -->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Next-build Preview Server 503 Error</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="refresh" content="2" />
+
+  <style>
+    body {
+      /* VA.gov dark blue */
+      background: #112e51;
+      text-align: center;
+      color: white;
+    }
+
+    p {
+      font-size: large;
+    }
+
+    a {
+      text-decoration: underline;
+      color: white;
+    }
+
+    .hero {
+      margin-top: 25px;
+      width: 70%;
+      height: 20%;
+      object-fit: cover;
+      object-position: 0 80%;
+    }
+
+    .container-info {
+      margin-bottom: 100px;
+    }
+  </style>
+</head>
+
+<body>
+  <img class="hero" src="/.next/artur-pokusin-unsplash.jpg">
+  <h1>Next-build server 503 response</h1>
+  <div class="container-info">
+    <p>There was a 503 error returned from the next-build server when it asked for this route.</p>
+    <p>Check the status of the <code>composer va:next:start</code> command in the logs to learn more.</p>
+  </div>
+  <footer>Photo by <a href="https://unsplash.com/@arturpokusin?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Artur Pokusin</a> on <a href="https://unsplash.com/s/photos/void?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
+  </footer>
+</body>
+
+</html>
diff --git a/.next/README.md b/.next/README.md
@@ -0,0 +1 @@
+See /.tugboat/vhost-next.conf.
diff --git a/.next/artur-pokusin-unsplash.jpg b/.next/artur-pokusin-unsplash.jpg
diff --git a/.tugboat/config.yml b/.tugboat/config.yml
@@ -8,6 +8,7 @@ services:
       - cms
       - web
       - storybook
+      - next
 
     # Set this as the default service. This does a few things
     #   1. Clones the git repository into the service container
@@ -49,7 +50,7 @@ services:
 
         # Install opcache, and Apache modules
         - docker-php-ext-install opcache
-        - a2enmod headers rewrite vhost_alias
+        - a2enmod headers rewrite vhost_alias proxy proxy_http
         # Install datadog agent for application tracing and profiling.
         - DD_API_KEY=" " DD_INSTALL_ONLY=true DD_SITE="ddog-gov.com" bash -c "$(curl -L https://s3.amazonaws.com/dd-agent/scripts/install_script_agent7.sh)"
 
@@ -62,6 +63,9 @@ services:
         # Setup storybook-*. vhost to serve static website.
         - cp "${TUGBOAT_ROOT}"/.tugboat/vhost-storybook.conf /etc/apache2/sites-enabled/
 
+        # Setup next-*. vhost to serve static website.
+        - cp "${TUGBOAT_ROOT}"/.tugboat/vhost-next.conf /etc/apache2/sites-enabled/
+
         # Configure KeepAliveTimeout in apache2.conf. This is set 5 seconds longer than the internal tools ALB.
         # The internal tools ALB idle timeout is set to longer than a typical GQL query takes.
         - sed -e 's/KeepAliveTimeout 5/KeepAliveTimeout 185/' -i /etc/apache2/apache2.conf
@@ -184,11 +188,14 @@ services:
         # This command is shared by the clone and build stages, make sure to update both stages.
         - j2 "${TUGBOAT_ROOT}/.web/403-error-document.j2.html" -o "${TUGBOAT_ROOT}/.web/403-error-document.html"
         - j2 "${TUGBOAT_ROOT}/.storybook/403-error-document.j2.html" -o "${TUGBOAT_ROOT}/.storybook/403-error-document.html"
+        - j2 "${TUGBOAT_ROOT}/.next/403-error-document.j2.html" -o "${TUGBOAT_ROOT}/.next/403-error-document.html"
+        - j2 "${TUGBOAT_ROOT}/.next/503-error-document.j2.html" -o "${TUGBOAT_ROOT}/.next/503-error-document.html"
         - composer install
         - bash -lc 'nvm install'
         - bash -lc 'npm install'
         - bash -lc 'composer va:theme:compile'
         - bash -lc 'composer va:web:install'
+        - bash -lc 'composer va:next:install'
         # https://www.drush.org/latest/deploycommand/ (updatedb, cache:rebuild, config:import, deploy:hook)
         - drush deploy
 
@@ -212,6 +219,8 @@ services:
         # This command is shared by the clone and build stages, make sure to update both stages.
         - j2 "${TUGBOAT_ROOT}/.web/403-error-document.j2.html" -o "${TUGBOAT_ROOT}/.web/403-error-document.html"
         - j2 "${TUGBOAT_ROOT}/.storybook/403-error-document.j2.html" -o "${TUGBOAT_ROOT}/.storybook/403-error-document.html"
+        - j2 "${TUGBOAT_ROOT}/.next/403-error-document.j2.html" -o "${TUGBOAT_ROOT}/.next/403-error-document.html"
+        - j2 "${TUGBOAT_ROOT}/.next/503-error-document.j2.html" -o "${TUGBOAT_ROOT}/.next/503-error-document.html"
 
       online:
         # We only want tests running on PRs, not branches like the base preview build of main.
@@ -224,8 +233,10 @@ services:
         - find -L "${DOCROOT}/vendor/va-gov/content-build/node_modules/.bin" -type f -exec chmod +x {} \+
         - find "${DOCROOT}/vendor/va-gov/content-build/script" -type f -exec chmod +x {} \+
 
-        # Build storybook and the frontend in parallel
+        # Build storybook and the frontends in parallel
         - bash -lc 'time task --taskfile=tugboat.yml'
+        # Build next build server
+        - bash -lc 'composer va:next:start'
 
   memcache:
     image: tugboatqa/memcached:1.6
diff --git a/.tugboat/vhost-next.conf b/.tugboat/vhost-next.conf
@@ -0,0 +1,48 @@
+# If testing changes to this file on the tugboatqa/php:7.1-apache image (current),
+# use `apache2ctl -S` to check for syntax issues then `killall apache2` to get changes to take.
+# Or "Stop" then "Start" the preview as that will restart apache2 too. Worth noting that
+# `service apache2 reload|restart` doesn't work on this image as `runit` is used.
+# Also `sv restart apache` acts like it works but it doesn't and doesn't bubble up any errors.
+
+<VirtualHost *:80>
+
+    ServerName next-wildcard
+    # Route preview URLs with prefix of `next-` to folder where the generated site output is symlinked.
+    # e.g. https://next-msecydk1vl7ncmpkgh8vevjhzq25vacv.ci.cms.va.gov/
+    ServerAlias next-*
+    VirtualDocumentRoot /var/lib/tugboat/docroot/next/.next
+
+    Alias "/.next" "/var/lib/tugboat/.next"
+    ErrorDocument 403 /.next/403-error-document.html
+    ErrorDocument 503 /.next/503-error-document.html
+
+    <Directory /var/lib/tugboat/docroot/next/.next/>
+        Options FollowSymLinks
+        Require all granted
+    </Directory>
+
+    <Directory /var/lib/tugboat/.next/>
+        Require all granted
+    </Directory>
+
+    ProxyPreserveHost on
+    # Ignore redirecting error doc directory
+    ProxyPass /.next/ !
+    # Redirect requests to the running node server from next-build
+    ProxyPass / http://localhost:3000/
+    ProxyPassReverse / http://localhost:3000/
+
+    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
+    # error, crit, alert, emerg.
+    # It is also possible to configure the loglevel for particular
+    # modules, e.g.
+    #LogLevel debug
+
+    # On Tugboat these are symlinks to /dev/null by default.
+    # `rm /var/log/apache2/*.log` and they will be generated.
+    # Then `tail -f /var/log/apache2/*` will work.
+    ErrorLog  ${APACHE_LOG_DIR}/error.log
+    CustomLog ${APACHE_LOG_DIR}/access.log combined
+
+    SetEnvIf X-Forwarded-Proto "^https" HTTPS=on
+</VirtualHost>
diff --git a/composer.json b/composer.json
@@ -571,7 +571,10 @@
         "va:theme:watch": "Watch VA.gov Claro theme source and compile as needed.",
         "va:web:build": "Perform a content build.",
         "va:web:install": "Prepare the content-build project.",
-        "va:web:prepare-dotenv": "Prepare the ./web/.env file."
+        "va:web:prepare-dotenv": "Prepare the ./web/.env file.",
+        "va:next:install": "Prepare the next-build project",
+        "va:next:build": "Build the next-build server for preview",
+        "va:next:start": "Start the next-build server for preview"
     },
     "scripts": {
         "pre-install-cmd": [
@@ -817,6 +820,21 @@
             "# Prepare the ./web/.env file.",
             "! ./scripts/should-run-directly.sh || ./scripts/web-prepare-dotenv.sh",
             "./scripts/should-run-directly.sh || ddev composer va:web:prepare-dotenv --"
+        ],
+        "va:next:install": [
+            "# Prepare the next build project",
+            "! ./scripts/should-run-directly.sh || ./scripts/next-install.sh",
+            "./scripts/should-run-directly.sh || ddev composer va:next:install --"
+        ],
+        "va:next:build": [
+            "# Prepare the next build server",
+            "! ./scripts/should-run-directly.sh || ./scripts/next-build.sh",
+            "./scripts/should-run-directly.sh || ddev composer va:next:build --"
+        ],
+        "va:next:start": [
+            "# Start the next build server",
+            "! ./scripts/should-run-directly.sh || ./scripts/next-start.sh",
+            "./scripts/should-run-directly.sh || ddev composer va:next:start --"
         ]
     }
 }
diff --git a/scripts/next-build.sh b/scripts/next-build.sh
@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+#preview
+
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+source ~/.bashrc
+
+cd next
+
+APP_ENV=tugboat yarn build:preview
diff --git a/scripts/next-install.sh b/scripts/next-install.sh
@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+source ~/.bashrc
+
+# Installs the content-build dependencies.
+
+if [ ! -d next ]; then
+  git clone --single-branch --depth 1 https://github.com/department-of-veterans-affairs/next-build.git next
+else
+  echo "Repo next-build already cloned."
+fi
+
+cd next
+#repo_root="$(git rev-parse --show-toplevel)"
+#pushd "${repo_root}" > /dev/null
+
+nvm install 18.17.0 
+nvm use 18.17.0
+corepack enable
+corepack prepare yarn@stable --activate
+echo "Node $(node -v)"
+echo "NPM $(npm -v)"
+echo "Yarn $(yarn -v)"
+
+#not sure how popd works
+#pushd "./next"
+yarn install
+#popd
+
+#popd > /dev/null
diff --git a/scripts/next-start.sh b/scripts/next-start.sh
@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+source ~/.bashrc
+
+cd next
+
+APP_ENV=tugboat yarn start
diff --git a/tugboat.yml b/tugboat.yml
@@ -13,10 +13,16 @@ tasks:
     cmds:
       - drush va-gov:content-release:request-frontend-build
 
+  build-next:
+    desc: build next.js preview server
+    cmds:
+      - composer va:next:build
+
   build:
     deps:
       - build-storybook
       - build-frontend
+      - build-next
 
   default:
     cmds:
