- Next.js acts as the frontend container,
client - Drupal serves data as the backend container,
api
.upsun/config.yaml configuration file.
Be sure to notice the source.root property for each.
Build dependencies
The Next.js app uses Yarn for dependencies, which need to be installed. Installing dependencies requires writing to disk and doesn’t need any relationships with other services. This makes it perfect for abuild hook.
In this case, the app has two sets of dependencies:
- For the main app
- For a script to test connections between the apps
build hook to install them all:
-
Create a
buildhook in your app configuration:The hook has two parts so far:.upsun/config.yaml-
The
|means the lines that follow can contain a series of commands. They aren’t interpreted as new YAML properties. -
Adding
set -emeans that the hook fails if any of the commands in it fails. Without this setting, the hook fails only if its final command fails. If abuildhook fails for any reason, the build is aborted and the deploy doesn’t happen. Note that this only works forbuildhooks. If other hooks fail, the deploy still happens.
-
The
-
Install your top-level dependencies inside this
buildhook:This installs all the dependencies for the main app..upsun/config.yaml
Configure Drush and Drupal
The example uses Drush to handle routine tasks. For its configuration, Drush needs the URL of the site. That means the configuration can’t be done in thebuild hook.
During the build hook, the site isn’t yet deployed and so there is no URL to use in the configuration.
(The PLATFORM_ROUTES variable isn’t available.)
Add the configuration during the deploy hook.
This way you can access the URL before the site accepts requests (unlike in the post_deploy hook).
The script also prepares your environment to handle requests,
such as by rebuilding the cache
and updating the database.
Because these steps should be done before the site accepts request, they should be in the deploy hook.
All of this configuration and preparation can be handled in a bash script.
-
Copy the preparation script from the Upsun Fixed template
into a file called
hooks.deploy.shin aapi/platformsh-scriptsdirectory. Note that hooks are executed using the dash shell, not the bash shell used by SSH logins. -
Copy the Drush configuration script from the template
into a
drush/platformsh_generate_drush_yml.phpfile. -
Set a mount.
Unlike in the
buildhook, in thedeployhook the system is generally read-only. So create a mount where you can write the Drush configuration:.upsun/config.yaml -
Add a
deployhook that runs the preparation script:This.upsun/config.yaml!includesyntax tells the hook to process the script as if it were included in the YAML file directly. This helps with longer and more complicated scripts.
Get data from Drupal to Next.js
This Next.js app generates a static site. Often, you would generate the site for Next.js in abuild hook.
In this case, you first need to get data from Drupal to Next.js.
This means you need to wait until Drupal is accepting requests
and there is a relationship between the two apps.
So the post_deploy hook is the perfect place to build your Next.js site.
You can also redeploy the site every time content changes in Drupal.
On redeploys, only the post_deploy hook runs,
meaning the Drupal build is reused and Next.js is built again.
So you don’t have to rebuild Drupal but you still get fresh content.
-
Set a relationship for Next.js with Drupal.
This allows the Next.js app to make requests and receive data from the Drupal app.
.upsun/config.yaml
-
Set mounts.
Like the
deployhook, thepost_deployhook has a read-only file system. Create mounts for your Next.js files:.upsun/config.yaml -
Add a
post_deployhook that first tests the connection between the apps:Note that you could add.upsun/config.yamlset -ehere, but even if the job fails, the build/deployment itself can still be counted as successful. -
Then build the Next.js site:
The.upsun/config.yaml
$PLATFORM_APP_DIRvariable represents the app root and can always get you back there.