After the first three parts all the hard work is done. We covered a lot, great job! The goal of this and the next part is that we want to deploy our web application in the cloud. This can be helpful early on to test your idea or to deploy your application later on when it's already more progressed. As with everything else, there are a million ways to do this. I wanted to specifically find a way to run the application in the cloud for free (for a limited number of hours each month). Heroku offers exactly this and makes it easy to deploy our docker containers.

If you want to get started with Heroku I suggest you quickly skim through their website and docs. To complete this and the next tutorial you will need a free Heroku account.

I will quickly go over the basics of how Heroku works:

• An app runs on Dynos

• There three dyno configurations
  • Web → "Web dynos are dynos of the “web” process type that is defined in your Procfile. Only web dynos receive HTTP traffic from the routers."
  • Worker → "Worker dynos can be of any process type declared in your Procfile, other than “web”. Worker dynos are typically used for background jobs, queueing systems, and timed jobs. You can have multiple kinds of worker dynos in your application. For example, one for urgent jobs and another for long-running jobs. For more information, see Worker Dynos, Background Jobs and Queueing."
  • One-off → One-off dynos are temporary dynos that can run detached, or with their input/output attached to your local terminal. They’re loaded with your latest release. They can be used to handle administrative tasks, such as database migrations and console sessions. They can also be used to run occasional background work, as with Heroku Scheduler. For more information, see One-Off Dynos.

• While each app can have multiple dynos, they all run the same program within each configuration. If you have more than one web dyno, heroku will distribute the requests between them

• With a free account you can run dynos for 450 hours for free (additional 550 hours if you add your credit card, without being charged)

• Free dynos will (with the exception of workers) will also fall asleep after being idle for 30 minutes, this way you don't have to worry about your free dyno hours

Heroku Set-Up

If you look into the docker-compose.yml file we created in the last tutorial, you will see that we have three apps/services.

• A database

• The backend

• The frontend

To run our application on heroku we will

• create an heroku application for our backend, that will run a web dyno (as it receives http requests)

• add a mongodb to our backend app

• create a heroku application for our frontend, that will run a web dyno (as it receives http requests)

Create the Heroku Frontend & Backend Application

After you created your account, go to the heroku dashboard and click on "new" and create new application. Give your application a unique name for the frontend, choose a region and create the app. For the backend, again go to the heroku dashboard and click on "new" and create new application.

Adding Proxy Information

For the proxy of our frontend to work in the cloud, we need to add two config variables to our frontend. First, copy the name of your heroku backend application. Then, click on the frontend app on the heroku dashboard. Under settings, add two config variables.

Add, PROXY_API and set it to https://<NAME OF YOUR BACKEND APP>.herokuapp.com/ Then, add PROXY_LOGIN and set it to https://<NAME OF YOUR BACKEND APP>.herokuapp.com/api/ That's it.

Creating & Connecting a Cloud MongoDB Cluster

For our backend we will also need a mongodb. Sadly in autumn 2020 heroku stoped offering a simple mongodb add-in, which made it previously super easy to add a mongodb to your application. But, don't worry there are alternatives. We are going to use a free tier over at MongoDB Atlas. Click on "Start Free" and create an account. After that, put in a organisation and project name. Here are mine.

Create a free shared cluster. Next choose a cloud provider and region, these don't really matter for this tutorial I used aws in Frankfurt. As cluster name just leave the default (Cluster0). It will take a few minutes for the cluster to start up.

Once its started click on connect. For the ip addresses just allow access from anywhere and then "Add IP Address". Then create a user that our backend will use to connect to our database. Now, just close the window. You might need to wait a few minutes for the changes to be deployed before you can continue.

Once deployed, click the cluster name (Cluster0). At the top click on Collections and then create a new database ("Add My Own Data") with the name todo and collection name toDo. Now go back by clicking on overview and press connect (right corner).

Select "Connect your application" and press java with the latest version. Now, copy the connection string (step two).

Switch over to heroku and open the backend application. Go to settings and add a Config Variable as shown below. Make sure to out in your own username and password from cloud atlas.

mongodb+srv://<user>:<password>@<your cluster>/todo?retryWrites=true&w=majority
        

Thats it, we are done. Once the application is running you can actually view the documents in Atlas, as shown below, but we are not quite there yet.

Build & Deploy Apps

To build and deploy the apps navigate to your projects root folder in the terminal and execute the following commands.

# Login to heroku
# Your heroku api key can be found in your account settings
docker login -u _ -p <YOUR HEROKU API KEY> registry.heroku.com

# Build the applications and tag them accordingly
docker build --file=frontend.dockerfile --rm=true -t registry.heroku.com/<NAME OF YOUR FRONTEND APP>/web .
docker build --file=backend.dockerfile --rm=true -t registry.heroku.com/<NAME OF YOUR BACKEND APP>/web .

# Push the images to heroku
docker push registry.heroku.com/<NAME OF YOUR FRONTEND APP>/web
docker push registry.heroku.com/<NAME OF YOUR BACKEND APP>/web

# Release/Run the apps
heroku container:release web -a <NAME OF YOUR FRONTEND APP>
heroku container:release web -a <NAME OF YOUR BACKEND APP>

That was it. Amazing, right? Open your frontend application in the browser and you should find your login page.

Congratulations for completing this tutorial!!!

As this is my first tutorial series, I would really appreciate feedback. You can find me on twitter , instagram or send me an email .