Taking Your App Live with Docker and the Uffizzi App Platform


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.

Vj9f ydhw8y01vuy2jfjmle3vc9wtyicpvylhcyf4lse li x5ggk8dy ejlqnmaviahl9xczl12n1hxbbomgmgvd1f qghvxbruay6nsojys xpejofjofjlpesdy cilwdu7ve

Osqgfbdytiws3qfqs4gzb8efbiiwxveu ryxxlkweouw2nagd9okfxbktaeiayayvai9cr6oanaqz1erzt5khogsi38xpsyh0eyo5 zl cbsf l27jdmzmy 6fpjlwsm6q9dhzfk


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:

Arydkrrfkgiulvydpi0otj3uznmtxu6s 2n cgk0pmar0 lzh0

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/

Qus2szdhgak2ecdnnh loyssp9obb2iyhhkdn13os5 s8

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.

5pqvdwr7wyvzpxbzw4l03wvdgevam nbhugdmgfi

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

Boq7pnp5whly5ddipgbkw8yarlhlfc8qivufysc jcom7rluskibb

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.

Gl2g9oizj6iowgea 1gtlvsbbuuqkx23zke7x33qc87ajlvoiknrniy

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/

Msssnyhmttxtfwfsuxp3c4g

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. 
Ky3xw4rglhlw1renpz8j40zabh9di50x18afimpg k6 ylfec3fisfsvbu2jcbqqeyzyhtnijgmccehvz9rqb54g0lp2fkovio1veq tgjmzntkoiadp6pv1ccnydvmpw2taqcby

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. 
Ct7hajd0phbkhbbckaemtx6 1dovocrrgukk0jdf e2vqlwahhzmsmiegotcl pfq5xyqjaspzd6bxny74s1mfrnhp0pc4dl27i vg3toyiq32ewyfkndnjvzsk uwzj6h qkwo

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`.  

58tkhjjnlscoiqhshrconot8vonbcqpocafazx0ezoivloqx1jaiwyxe0tofgfjpfbrtlkdmgksdpazuh3zvhvcteifc8mfne5wiwmlrhm0nd05mhiun1lwaly0uybitcc wfm0h

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. 

Nfbz24cwuxfi9d1f2tppzz3eolpuficer426rcs uvcpotemzoa2jualnairolt0d1hr2jtujeha3ddwt1f7vgybsgzndelosgqipkqtugjx kri9j8dp e0g4tlf7mkc uss2ue
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 ([email protected]) or Josh Thurman  ([email protected]).

Feedback

0 thoughts on "Taking Your App Live with Docker and the Uffizzi App Platform"

DockerCon 2022

With over 50 sessions for developers by developers, watch the latest developer news, trends, and announcements from DockerCon 2022. From the keynote to product demos to technical breakout sessions, hacks, and tips & tricks, there’s something for everyone.

Watch Now