Deploying a Docker Image

Learning objectives

You know how to deploy a Docker image to an online service.

Here, we briefly look into deploying a web application on the web using Render. Although this example outlines the use of Render, all major cloud providers offer similar services.

To work fluently with Render, we recommend also using GitHub or GitLab. These guidelines are written from the point of view of a GitHub user.

Register to Render.com

To use Render.com, you need to first register to the platform. Click the Get Started For Free button on the main page of Render.com. This opens up the address https://dashboard.render.com/register.

Register with your GitHub account -- this links your GitHub account to Render, and will allow easy deployment of code from GitHub. To proceed, you need to verify your email address. The verification email might take a while to arrive.

Once you verify your email address, you are shown the Render dashboard at https://dashboard.render.com/.

Creating a repository on GitHub

Open up GitHub and create a new repository. When you click the + icon in the navigation bar of GitHub, shown in Figure 1, you are shown a list of options. The list shows an option "New repository". Click on that.

Figure 1 -- Navigation bar on GitHub. The + icon has been clicked, which exposes the 'New repository' link.

This opens up a page for creating a new repository, which is at the address https://github.com/new, shown in Figure 2. Type in wsd-random-app as the repository name, and choose a Private repository.

Figure 2 -- Creating a new repository. We type in 'wsd-random-app' as the repository name and choose a Private repository.

Once you fill in the details, click the "Create repository" button at the bottom of the page. This leads you to a page with guidelines on how to work with the repository. In our case, the page would contain e.g. the following guidelines.

...or create a new repository on the command line

echo "# wsd-random-app" >> README.md
  git init
  git add README.md
  git commit -m "first commit"
  git branch -M main
  git remote add origin git@github.com:avihavai/wsd-random-app.git
  git push -u origin main

Install git

Next, you need to install git. If you already have git, skip this part.

Follow the steps for your operating system outlined in Getting Started - Installing Git.

When done, create a SSH key for GitHub, following the guidelines at https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account.

Alternatively, you may use personal access tokens, discussed at https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token.

These guidelines are written from the point of view where the user has set up an SSH key for GitHub.

Creating a .gitignore file

Next, go to the directory that we worked in the previous part that has the multi-stage Dockerfile. The contents of the folder is as follows.

tree --dirsfirst -L 1
.
├── api
├── ui
└── Dockerfile

Create a file called .gitignore in the same folder. The file is used to tell which files should be ignored by git. Add the following contents to the file.

.DS_Store
.svelte-kit
node_modules
build
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
/api/static

Now, the folder structure should be as follows.

tree --dirsfirst -L 1 -a
.
├── api
├── ui
├── Dockerfile
└── .gitignore

2 directories, 2 files

Adding the project to GitHub

Continuing in the same folder, we next run a set of the commands outlined in the "...or create a new repository on the command line" part you were shown when the repository was created on GitHub.

Note that instead of adding a README.md file to the repository, we add the files that we just created. In addition, note that the username avihavai shown in the below example needs to be replaced with your GitHub username.

git init
Initialised empty Git repository in /path-to-folder/.git/
git add .
git commit -m "first commit"
[master (root-commit) 1fa3205] first commit
// details of files being added
git branch -M main
git remote add origin git@github.com:avihavai/wsd-random-app.git
git push -u origin main
// ..
To github.com:avihavai/wsd-random-app.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

Now, when we reload the page for the repository at GitHub, we see that the files have been sent our GitHub repository. This is shown in Figure 3.

Figure 3 - Files are now visible in the project in GitHub.

Adding a GitHub repository to Render

Next, we add a GitHub repository to Render. In the navigation bar of the Render dashboard, click the New + button and select Web Service. This is highlighted -- just before clicking the Web Service -- in Figure 4.

Figure 4 - On Render dashboard, we've clicked New + and are about to select Web Service.

Clicking on the Web Service opens up a page that shows options for creating a new Web Service. This opens up a page that asks "How would you like to deploy your web service?". Choose "Build and deploy from Git repository". Next, you are shown the possibility to connecting to GitHub or GitLab accounts as shown in Figure 5 (the options are on the right hand side of the screen in the Render dashboard).

Click the + Connect account link. This opens up a GitHub page that asks where we want to Install Render. Choose your username. This opens up another page that asks for the repository for which you wish to install Render. Choose "Only select repositories" and select the wsd-random-app repository that you created earlier. The outcome is shown in Figure 6.

Figure 6 - Installing Render on GitHub. We've selected 'Only select repositories' and chosen the repository 'wsd-random-app' that we created earlier.

Scroll to the bottom of the page and click the Install button. After this, GitHub asks for your GitHub password. Once you enter your password, you are directed back to the Render dashboard.

Now, in the list of repositories shown in the dashboard, under "Connect a repository", we see our repository. The repository has a button "Connect" next to it, as shown in Figure 7.

Figure 7 - Render dashboard shows our GitHub repository in the list of repositories.

Deploying a Web Service on Render

Continuing from the previous step, click the Connect button. This opens up a page where you need to fill in details of your application. Select a name for the application -- for the present purposes, we've chosen artos-unique-random-app, but you need to come up with something different as that one's already taken (by us :D).

Choose a region for the deployment -- we've chosen Frankfurt (EU Central). The branch should be main. Leave the Root Directory empty (i.e., we use the default directory which is root), and choose Docker as the Environment. Finally, choose the Free instance type.

When finished, click the Create Web Service button at the bottom of the page.

This starts a deployment process on Render. During the deployment process, Render retrieves the GitHub repository, builds the application following the steps outlined in the Dockerfile, runs the resulting Docker image, searches for available ports from the running image, and finally opens up a port that responds to HTTP requests to the world.

This will take quite some time.

Once everything is up and running, the deployment logs on Render should show a line similar to Your service is live 🎉. Now, we can access the application at the application-name.onrender.com (https://artos-unique-random-app.onrender.com/ in our case).

Updating the deployment

To update the deployment, change the code of the application, commit the changes, and push the changes to GitHub. After a while, the changes have been deployed to Render and are made available.

In effect, now that we have linked our GitHub repository to Render, the changes in the code are automatically deployed to Render. This practice is called continuous deployment. We discuss it briefly jointly with Continuous Integration later on in the course.