How should we use GitLab CI/CD pipeline and finally deploy our code to Heroku?- PART-1
A tutorial on how to use stage and production environments:
All below techs are somewhere the part of this article:-
In this article, I’d like to share how did I deploy my code to Heroku using GitLab CI/CD. For this, I’ll create a simple ReactJS application(I’ll provide the link below). Here we’ll learn the environments' initial concepts: Dev, Stage, and Prod.
When I code, I use these three environments. The Development environment is where everything happens. It’s the environment where we should code all the new features and the tests. When you are in the development process this is the environment in your local machine. When I make sure that all the code is ready to deploy, I submit it to GitHub/GitLab, depending on the project that I am working on. One person or the team makes the code review. If everything is OK we merge and deploy it to Staging. The QA (Quality Assurance) team validates and if everything also is OK, we deploy it on Production. Although, when you will see my code in GitLab, it will be having only a master branch that is equivalent to the Production branch here. I did it because for demo purpose there are basic test cases written and before pushing all the code to the master branch directly, I was confident enough that my code will not break.
This is a simple way to explain how things happen, I’m going to dedicate an article exclusively to have a good development process.
In this article, I’ll let you go through how to do this using Heroku and GitLab. But first of all, we need to know the meaning of each one.
GitLab is an app with a complete DevOps platform, delivered as a single application. From project planning and source code management to CI/CD, monitoring, and security. It uses git as a core.
Heroku is a cloud platform that lets you build, deliver, monitor and scale apps. It’s a platform as a service (PaaS). Summarizing, it’s your server. For the same reason I’m using GitLab, Heroku is free for a certain number of dynos.(limited to 5 websites hosting capacity on a free account)
For this article, I am assuming that you have basic knowledge of React based application and how to do code in it. So thats why i am skipping the coding part of it in this article. Here, i am providing you the basic start of gitlab project and you can have your react or node project in it to get deployed it to gitlab and finally get hosted in heroku.
Creating the GitLab project
We need to create our GitLab project. Go to the GitLab login page and sign in or register.
After signing in up, Let’s create our new project just clicking on New Project.
So, now we are able to clone the react-docker-project repository.
$ git clone git@gitlab.<your-account>/React-docker-project.gitIn my case$ git clone git@gitlab.com:vishalvishalgupta/React-docker-project.git
For getting the reference of basic setup done, you can go to my Gitlab project(https://gitlab.com/vishalvishalgupta/react-docker-project/-/tree/master)
In second part of this medium post, I will let you know guys how did I follow the CICD pipeline with docker set up and with the help of .gitlab-ci.yml file how did I automate the hosting of my app to heroku.
Setting up Heroku
Now, we’re able to create our server on Heroku. Go to the Heroku login page and sign in or register.
Heroku Login page
With the account, we can take our unique key. We’ll use this later. You can find it in the account settings. To see the API Key, just click on reveal.
Remember that we talked about environments? We were working in our development environment, but from now we will create two apps: Staging and Production.
Let’s create our new app stating just clicking on New > Create new app.
Create App
Let’s create a Staging environment called heroku-gitlab-env-staging.
Creating heroku-gitlab-env-staging
In the same wat, let’s create a Production environment called heroku-gitlab-env-production.
Creating heroku-gitlab-env-production
Note: Please make sure you must be using some different names for your project because these hosted website names are already registed in heroku database.
Setting up GitLab CI/CD
The acronyms CI and CD mean Continuous Integration and Continuous Delivery, respectively. To learn more about this, you can read the article provided by GitLab.
First, let’s set the variables on Gitlab. in the GitLab project, go to settings > CI/CD.
Make sure that GitLab runners are enabled because of we make CI/CD happening on each push. This Gitlab runner and registory setup, I will cover in Part-2 of this medium post.
So, we need to go to variables and create three of them.
- HEROKU_API_KEY: Containing the value of your account key on Heroku;
- HEROKU_APP_PRODUCTION: Containing the name of the app to production (Ex.: heroku-gitlab-env-production);
- HEROKU_APP_STAGING: Containing the name of the app to production (Ex.: heroku-gitlab-env-staging).
Ready to deploy
With all setup, the only thing that we need to worry about is to push our commits. So, let’s do this, remembering we’re in the staging branch.
$ git add .
$ git commit -m ‘Deploying to Heroku’
$ git push
On GitLab, We can track the progress just going to CI/CD > jobs.
If we click on “running” (or “passed”, if it had already finished the job) button, we can see the logs.
On Heroku, we can easily find the final process where we can see the application completely deployed.
Last but not the least, You will be able to get this below url hosted publically available for anyone.
Conclusion
This tutorial is intended to show you, in a simple way, how you can deploy your application to Heroku using GitLab CI/CD. The upcoming medium post will be there for letting you guys know and how did I set my Docker environment and get things connected with the CICD pipeline of Gitlab. That will describe to you, how exactly the GitLab Runner, docker executor, and Gitlab registry internally work that allows you to host your site publically.
Happy coding!!! and please do read Part-2 for more info.