Deploying a multi-server app with Cleavr

In this multi-part tutorial, we'll create and deploy a multi-server architecture web application.

Part 1: Creating a front-end using NuxtJS and TailwindCSS
Part 2: Setting up Adonis v5 with PostgreSQL
Part 3: Creating a REST API using Adonis v5
Part 4: Connecting Nuxt front-end to Adonis 5 API
Part 5: Deploying a multi-server app with Cleavr

Frameworks and tools used

• Front-end: NuxtJS and TailwindCSS/UI
• Back-end: AdonisJS
• Database: PostgreSQL
• Server provision and deployment: Cleavr

Part 5 - Deploying a multi-server app with Cleavr

It's time to make our app live! 🚀

Our production app will be setup as a multi-server application where each component (API, database, front-end) gets to live on its own server. Of course, you can do this all on 1 server. But that'd be easy. And, where's the fun in that?

We'll be working with Cleavr in the following steps. If you don't have an account, you can sign up for a free trial.

Provision servers using Cleavr

In the first step, we'll provision 3 servers. One for the backend where Adonis will live, one for the PostgreSQL database, and one for the Nuxt frontend.

With Cleavr, you can can select database and language dependencies to install during the provisioning process. Or, you can ignore selecting the dependencies yourself and have Cleavr automatically install them when you add a new site type (ie Adonis, Node, PHP, Laravel, etc).

Set up DNS records using Cleavr

Now that we have our 3 servers provisioned, before adding and installing web-app types to each server, we'll first set up our DNS records.

Cleavr integrates automagically with DigitalOcean and Cloudflare DNS management so that you can manage records (A, TXT, CNAME, MX) without having to leave Cleavr.

I already have Cleavr tied into my DigitalOcean DNS management for my domain, leanbranch.com. So, in the DNS section of Cleavr, we'll simply add A records for frontend and backend and then assign them to their corresponding servers we created in the previous step.

Configure database and add sites to servers

Click into the database server first, then click on the database tab and we'll add a new database / user.

At this step, we'll also change the host from localhost and then select the movies-backend server as we'll want to grant access to that server to be able to retrieve data from our database server.

Next, we'll go into the backend server and add a new Adonis 5 site. This will install any missing dependencies on our server that are required to run an Adonis app. In this case, it's going to install Node on our server.

Once we have the backend server ready, let's move to the frontend and add a new NodeJS site for our Nuxt frontend site.

For both Adonis and Nuxt, enable SSL so that we don't get any cross domain issues.

Deploy Adonis and Postgres backend using Cleavr

Alright, we're ready to set up our backend web app and then deploy!

We'll head to the web app section and add a new one.

To set up a web app initially, we'll select the VC Provider where our repo is, then add in the location of the repo, then designate the branch Cleavr will pull from, and we'll connect this web app to both our database server and our backend server.

Once the initial settings are set, click back into the web app and head to environments.

Pull the environment variables from the movies-backend server and then update the default database settings to reflect our Postgres connections.

DB_CONNECTION=pg
DB_HOST={host public ip}
DB_PORT=5432
DB_NAME=movies
DB_USER=admin
DB_PASSWORD=password

Once finished, sync the variables to the server.

In the deployment hooks section, we'll update each hook to run on the movies-backend server only.

We'll also enable the migrate database hook so that the database is migrated during the initial deployment.

And... Of course, we want to seed our database as well. Let's add a new deployment hook titled Seed Database and have it run the following:

cd { releasePath }
node ace db:seed

Drag and drop the database seed hook to run directly after migrate database.

Let's now deploy our backend and see what we get.

OUR API IS ALIVE!!! 🎉

Deploy the NuxtJS frontend using Cleavr

Before we create the frontend web app, there are some updates we'll need to make in our code.

Take note of the movies-backend url, which is https://backend.leanbranch.com, and the port number assigned to frontend.leanbranch.com. We'll need this info.

Back in our code, we'll simply replace the Axios calls that are referencing localhost to our API's url. We need to do this on both index.vue and _title.vue.

Then, on nuxt.config.js, we need to add in the following to have the app run on the correct port.

server: {
    port:7512
  },

You can also view the changes on the GitHub repo.

Now, we're ready to create the frontend web app back in Cleavr.

We'll follow similar steps to create the front end web app; however, we'll be sure to select the corresponding frontend server, site, and GitHub repository.

We'll also change the entry point to npm and pass the argument start. This will run a start script on the activate deployment step.

Next, go to deployment hooks and enable 'Build Assets'. Then, deploy!

Our Movie review app is now live in production! 🔥🔥🔥

1-click to deploy a multi-server web app using Cleavr

We had to set up the frontend and backend as separate web apps because web apps in Cleavr currently have a 1:1 relationship between a web app and a website. In which case, we have two sites for our project - one for Adonis API and one for Nuxt frontend.

But... wouldn't it be awesome if we can deploy everything with just one click? Or, one push-to-deploy action?

With Cleavr, this is completely possible!

To perform this, we'll first go into the frontend web app and copy the deployment trigger hook from the settings section. We'll also want to make sure that the frontend web app is set to push-to-deploy for this to work properly.

Next, we'll click into the backend web app and add a new deployment hook titled Trigger Frontend Deployment. And then, add the following script to run:

curl -X POST {enter hook url}

Now, if we deploy the backend, it will automagically deploy the front end. 💪🏽💪🏽

---

I hope you enjoyed this series!

If you'd like me to do more series like this, let me know in the comments. 😎

Watch the full tutorial series uninterrupted on Youtube.