How to Deploy a Dockerized Web App to Heroku using the GitHub Actions
Deploying a Dockerized ASP.NET Core Web App to Heroku Using GitHub Actions
Hello all, Hope you are all doing well. Today, I plan to tell you how to deploy a dockerized ASP.NET Web app in Heroku using the Github Actions.
Heroku is a cloud-based PaaS platform that supports many programming languages and hosting processes. But it's not supported the C# and ASP.NET Core environment. But there is a feature called Heroku Container Registry to manage the containerized applications with Heroku. So, in that case, we could deploy our ASP.NET Core Web App as a dockerized application to Heroku. I also use GitHub action for the continuous deployment process (We could also do the Continuous Integration part with GitHub action, but I mainly focus on deploying our Dockerized ASP.NET Core web app to Heroku using the GitHub Actions). So first, we have to create the container image for our web app, and then we have to create a Github workflow for deploying our dockerized web app to Heroku. And also, I use Heroku free tier to deploy our web app.
Prerequisites :
- Docker
- Heroku Account
- ASP.NET Core (I use ASP.NET Core 3.1)
- GitHub Account
1. Create container Image for web app
First, we have to create the ASP.NET Web App project, explaining how to create it here. Then run it and check the output of the web app.
Now, we have to create the container image for our web app. First, we have to create Dockerfile to create the image. In that case, you could create dockerfile by using the visual studio or create the dockerfile manually. If we create manually, we have to create "Dockerfile" and ".dockerignore" files at the solution's root. I create the docker file using the visual studio, as below figure. Click the docker support and then select the environment you need for this application.
After we create dockerfile, our dockerfile should like the below scripts.
Dockerfile defines a set of guidelines for building an image containing our ASP.NET Core application. This Docker image could be used to build containers for our development environment, private and public clouds. So it is like a batch script that contains several steps to create an image for the environment we need.
Firstly, we pull the dot net core 3.1 SDK and then expose the two ports. Then we copy the source files and restore the NuGet packages. After that, build our ASP.NET core web app and then release the artifacts.
Now we have to build our docker image. In that case, run this command locally to build our image locally.
docker build -t dotnet-docker-heroku -f Dockerfile .We could check output as follows if our image was created successfully.
Successfully built 12f27505430e
Successfully tagged dotnet-docker-heroku:latestAfter that, we could run our image using the below command.
docker run -d -p 5000:80 --name demoapp dotnet-docker-herokuNote — When we deploy our dockerized web app into Heroku, the Heroku web process listens on $PORT, not necessarily port 80, for HTTP traffic. So we need to configure the default URL for our dockerized app using the environment variable, and in that case, we need to remove the ENTRYPOINT command and add a CMD command like below.
CMD ASPNETCORE_URLS=http://*:$PORT dotnet dotnet-docker-heroku.dll2. Create an application on Heroku
Now we created our image successfully and ran it locally. Now we have to make the app on Heroku. In that case, if you haven't an account on Heroku, First create the account on Heroku. Then we have to create the application on Heroku. In that case, click the New button as below figure.
Then add the app name and select the closest region as below figure. And then create the application.
3. Deploy dockerized ASP.NET Web App on Heroku
We are planning to use Github actions to create a continuous deployment to Heroku for our web app. In that case, we first need to create the repository for our project and then add the API key as a secret key in our Github repository.
First, we need to copy the secret key. In that case, navigate to the account setting in Heroku and scroll down until you see the API Key. Then click Reveal and copy the API key as below figure.
Then navigate to the setting section on our created GitHub repository, move the secrets section, and then click the new repository secret. Then Add the secret name as "HEROKU_API_KEY" and add the value for the secret key. You can see the secret section after adding the API key, as below figure.
Now we have to set up the Github action workflow for the continuous deployment process to Heroku. In that case, first, I create the folder called ".github" at the root of the project and then create "workflows" inside the .github folder. Then we have to create a main.yml file inside the workflow and then open it using any IDE.
Then edit the main.yml file as below.
In this file, we set the name for our workflow in the first line. Then set the trigger to start our workflow when push or pull requests into the main branch. Next, we set the secret API key as a secret key on our repository in the above step. Now we use it to set the environment variable as "HEROKU_API_KEY" in the above file. And also, we set the "APP_NAME" as an environment variable for workflow.
After that, we used one job to deploy our dockerized web app to Heroku, and that job ran on the Ubuntu-18.04 virtual environment. Then clone the repository and use the below command to build our docker image of the container.
docker login --username=_ --password=$HEROKU_API_KEY registry.heroku.comAfter that, use the following command to push and release our docker image to the Heroku container registry.
heroku container:push web -a $APP_NAMEheroku container:release web -a $APP_NAME
So this is the workflow process that we use to set up the continuous deployment process to our web app. Now push your commit to the GitHub repository and wait few seconds to run the GitHub actions.
We could see the complete result successfully after few seconds, as below figure.
It means our ASP.NET Core web successfully deployed to Heroku as a dockerized image using the GitHub Actions.
Now we could check our deployed ASP.NET Core web app. In that case, navigate to dotnet-docker-heroku-app and click the open app as below figure.
Now it redirects to our deployed web app, and you can check my deployed web app and GitHub project that I used for this article.
So, now you can check your web app changes by pushing the commits to the Github Repository.
So That's it for today. I hope you learned something new from my article.
See you again soon with another article !!
