Taking Your App Live with Docker and the Uffizzi App Platform

Peter McKee

Nov 13 2020


Tune in December 10th 1pm EST for our
Live DockTalk:  Simplify Hosting Your App in the Cloud with Uffizzi and Docker

We’re excited to be working with Uffizzi on this joint blog.  Docker and Uffizzi have very similar missions that naturally complement one another.  Docker helps you bring your ideas to life by reducing the complexity of application development and Uffizzi helps you bring your ideas to life by reducing the complexity of cloud application hosting. 

This blog is a step-by-step guide to setting up automated builds from your Github repo via Docker Hub and enabling Continuous Deployment to your Uffizzi app hosting environment.




Prerequisites
To complete this tutorial, you will need the following:

Docker Overview

Docker is an open platform for developing, shipping, and running applications. Docker containers separate your applications from your infrastructure so you can deliver software quickly. 

With Docker, you can manage your infrastructure in the same ways you manage your applications. By taking advantage of Docker’s methodologies for shipping, testing, and deploying code quickly, you can significantly reduce the delay between writing code and running it in production.

Uffizzi App Platform Overview

Uffizzi is a Docker-centric cloud application platform.  Uffizzi helps Devs by reducing the complexity of hosting their app in the cloud.   Uffizzi automates over a dozen cloud processes and provides push-button app hosting environments that are reliable, scalable, and secure.

With Uffizzi you can set up and deploy your application directly from Docker Hub or, as we’ll show in this blog, from Github through Docker Hub’s automated build process.  Uffizzi is built upon the open source container orchestrator Kubernetes and allows you to leverage this powerful tool without the complexities of managing cloud infrastructure.

Fork and Clone Example Application

We’ll use an example “Hello World” application for this demonstration, but you can use this workflow with any app that answers HTTP requests.

Login to your GitHub account and “fork” your own copy of this example repository: https://github.com/UffizziCloud/hello-world

To fork the example repository, click the Fork button in the header of the repository:

Wait just a few moments for GitHub to copy everything into your account. When it’s finished, you’ll be taken to your forked copy of the example repository. You can read more about forking GitHub repositories here: https://guides.github.com/activities/forking/

Of course to actually make any changes you’ll need to “clone” your new Git repository onto your workstation. This will be a little different depending on which operating system your workstation is running, but once you have Git installed, `git clone` will usually succeed. The green “Code” button in your repository header provides the URL to clone.  You could also use GitHub’s desktop application. You can learn more about Git here: https://guides.github.com/introduction/git-handbook/

Review Code and Dockerfile

Confirm that you have a viable clone by reviewing some of the files within, especially the `Dockerfile`. This file is required to build a Docker image for any application, and it will later be used to automatically build and deploy your new container images. This example `Dockerfile` is extremely simple; your application may require a more sophisticated `Dockerfile`. You can read more about `Dockerfile` anatomy here: https://docs.docker.com/engine/reference/builder/

Create Private Docker Hub Repository

Next, we need somewhere for those built images to reside where Uffizzi can find them. Log in to your Docker Hub account and click on Repositories and then Create Repository.

Be sure to create a Private Repository (not Public) for later Continuous Deployment to Uffizzi. 

And now’s a good time to link your GitHub account and add a Build Rule to configure automatic building. Click the GitHub logo and authorize Docker to view your GitHub repository. Click the blue plus sign and create a Build Rule for your `master` branch.

Once you click “Create & Build” you can navigate to your new repository and select the “Builds” tab to see it working (see below screenshot). Once it finishes, your application is ready to deploy on Uffizzi! You can read more about linking GitHub accounts and automatic builds here: https://docs.docker.com/docker-hub/builds/

Setting Up Your Uffizzi App Hosting Environment

Go to https://uffizzi.com and sign up for a free account – there is no credit card required.  From the dashboard choose “Get Started Now”. 

Now choose an environment for your app – “Free” is appropriate for this tutorial.
For naming you can use the default name or you can call it “Continuous Deployment Demo” if you’d like.

At the “Import Your Application” Step choose Docker Hub and log in to your Docker Hub account. 

Once authenticated with Docker Hub select the repo that you’ve created for this demo.  This is the repository that later Docker Hub will push your updated image to and kick off the continuous deployment process to your Uffizzi App Hosting environment. 


After choosing the repo, select your image under “My Images”.  You should now be able to indicate the port number that your container listens on – for this tutorial it will be `80`.  



We are not connecting to any other services or databases for this demo so environment variables are not required. 

Now Select “Import”. 

(Note- if you selected an environment other than “Free” there will be an option to add a database –  you can choose “Skip” – a database is not required for this tutorial.)

Now you should see your shopping cart with your `hello-world` image.  Go ahead and hit the “Deploy” button.  Uffizzi will take a few minutes to automate about a dozen cloud processes, from allocating Kubernetes resources to scheduling your container to configuring load-balanced networking to securing your environment.  You can “Explore your environment” while you wait.

When these steps are complete you will see your container “Running” and you should also see “Continuous Deployment” enabled. 


Go ahead and click “Open application”  to see the application live in your web browser.  Later in this tutorial we will come back to this browser tab to see the updates we push from our repository. 

Later you can configure HTTPS encryption and add a custom domain within the Uffizzi UI, but that’s not necessary for this demo.  

Demonstrate Continuous Deployment

Now we can demonstrate Continuous Deployment on Uffizzi. Make a small change to index.html within your workstation’s cloned Git repository, then git push it up to GitHub. Because we connected your GitHub, Docker, and Uffizzi accounts, your changes will immediately deploy to Uffizzi within a new Docker image. This may take a few minutes; check the status in your Docker Hub “Builds” tab.

Confirm Your Update is Live

Now we can see the updates we just made to our application live on Uffizzi! 

Once you set up your Uffizzi App Hosting environment with Continuous Deployment you don’t have to do anything within Uffizzi to push your code updates.  The goal is to make it easy so you can focus on your application!

Confirm Your Update is Live

Conclusion

In this post, we learned about creating private repositories and setting up automated builds with Docker Hub.  Next we covered how to deploy our Docker image direct from our Docker Hub private repository into a Uffizzi App Hosting environment. 

Once our application was live on Uffizzi we ensured “Continuous Deployment” was enabled.  This allows Uffizzi to watch our connected Docker Hub repository and automatically deploy new images built there. 

Next we updated our demo app on our workstation then deployed it to Uffizzi Cloud by executing a `git push` command.  This push initiated an automated sequence that took our app from new code pushed to GitHub to a Docker image on Docker Hub to a deployed Uffizzi Hosting Environment.  If you have any Docker-related questions, please feel free to reach out on Twitter @pmckee and join us in our community slack.

If you have any Uffizzi-related questions, please feel free to reach out on Twitter to @uffizzi_ and join us in our uffizzi users community slack – Grayson Adkins (grayson.adkins@uffizzi.cloud) or Josh Thurman  (josh.thurman@uffizzi.cloud).