Spinning up your ember app on Heroku from Gitlab
Writing code and moving built files to own server space was the way I wrote all 4 apps — ImFoodie, ChennaiCommute (www.chennaicommute.in/www.mccc.co.in), MnF and AlumniTalks. Though they were are all PHP backed, a simple movement/override of the necessary file meant it was deployed! The negative of it was to be very careful since there was no source control and a file replace would mean there is no backup. If something goes wrong, the app is screwed. This was a couple of years ago until I came across Heroku for deploying apps. Heroku, in first appearance was pretty complex and I had to leave it, but then I was very wrong that I din’t even give it a try. Github to share code was expensive since it needed a private hosting.
Surprisingly this came up and we realised there is a way out to make things easier.
Gitlab came up with an upfront status update and it got me as one of its customer on-board. Though it is just a week with Gitlab, I have already started feeling overwhelmed by its simpler and easy to use dashboard. With CI/CD pipelines integrated with a simple .gitlab-ci.yml, auto deployments and tests are easier.
But here comes the problem, Heroku has an auto deploy feature while integrating with Github but not with Gitlab. Getting this done was time consuming and post which, the app is now deployed automatically in staging environment and manually deployed with a click of a button for production environment. So here’s what I did.
Step 1 : Getting your Gitlab and Heroku accounts
As always the first step to getting your code into source control is by setting up an account. Gitlab gives a repo with 5 users free of cost. So go grab your account before it’s too late. Sign up here.
Next step is to get our hosting instance which is Heroku. You can signup for an account or if you already have one, never mind, skip to the next step.
Now we are at a stage with both the code hosting and the build hosting in hand. But our goal is not just this, we need to wire them up, as every time a code committed to a branch in Gitlab, it should get deployed to the Heroku instance.
Setting up Heroku CLI in your machine
This link here is a good one to get your machine equipped with Heroku CLI.
It’s going to be a very easy step if you are on Mac and you use HomeBrew where you just say brew install heroku.
On an Ubuntu machine it would be
sudo apt-get install software-properties-common # debian only
sudo add-apt-repository "deb https://cli-assets.heroku.com/branches/stable/apt ./"
curl -L https://cli-assets.heroku.com/apt/release.key | sudo apt-key add -
sudo apt-get update
sudo apt-get install herokuOnce done, do heroku --version to ensure heroku CLI is setup on your system. Before you can create an app on Heroku or start doing a build you will need to configure your credentials using heroku login. You will be asked to enter your credentials and set it up.
Setting up Gitlab Runner
Before you want to set up Gitlab Runner, learn about it here. Setting it up is easy and here is a link which has a setup for various machines. Since I use Ubuntu, this is how I set it up:
We will use the docker executor to run builds in isolated containers:
curl -sSL https://get.docker.com/ | shcurl -L https://packages.gitlab.com/install/repositories/runner/gitlab-ci-multi-runner/script.deb.sh | sudo bashsudo apt-get install gitlab-ci-multi-runner
Register the runner now with your gitlab account. You might require url and Gitlab key, which can be obtained from here: https://gitlab.com/<your_app>/<your_repo>/settings/ci_cd
sudo gitlab-ci-multi-runner registerPlease enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )
https://gitlab.com/ci
Please enter the gitlab-ci token for this runner
xxx
Please enter the gitlab-ci description for this runner
my-runner
INFO[0034] fcf5c619 Registering runner... succeeded
Please enter the executor: shell, docker, docker-ssh, ssh?
docker
Please enter the Docker image (eg. ruby:2.1):
ruby:2.1
INFO[0037] Runner registered successfully. Feel free to start it, but if it's
running already the config should be automatically reloaded!
Once done, you should see “Runners activated” having one of them in Green! Good job!
Now that you are done with runner config, we will just set up a key which you may use for Heroku deployments. This is the API key that you need to obtain from your Heroku’s settings. Grab your API keys from here under the API Key section. Back to Gitlab CI/CD settings, add the key in your Secret Variables section.
Until now, Gitlab has the set of Runner and Heroku’s keys to which app to deploy to, but how to deploy is still unknown for Gitlab. Follow on.
Setting up .gitlab-ci.yml
.gitlab-ci.yml file contains a configuration of how to deploy based on the environment. Add this file to your Ember’s root folder. Here’s how it looks for the app I wrote:
To deploy to Heroku, we will make use of dpl tool which is responsible for continuous deployments to Heroku. Read more about it here.
dpl --provider=heroku --api-key=`heroku auth:token`If you happen to note, $HEROKU_PRODUCTION_API_KEY and $HEROKU_STAGING_API_KEY are those secret variables we had set up in the Gitlab settings. Never expose those keys in your .gitlab-ci.yml file.
The above config does an automatic continuous deployment to Heroku in Staging environment while it waits for the manual push to deploy for Production environment. Manual deployment can be done from Gitlab’s pipeline — https://gitlab.com/<your team>/<your repo>/pipelines.
So now you should have your code deployed in Heroku. But wait, we have ember code which requires an ember build in production environment. This is pretty straightforward where you need to configure a couple of settings in your Heroku App.
Setting up Heroku App for Ember CLI build
Navigate to your app’s settings and you should see a couple of config variables (reveal it). Add the following:
We have EMBER_ENV as staging, you can choose to add the same for production as well. To do ember build, you will need to configure a couple of buildpacks in Heroku app settings as well. Official Buildpack and instructions can be found here.
Voila! You have successfully configured Heroku to build an Ember app and Gitlab to do CI once your code is pushed to a branch.
It might look like a big one to read, you may skip to follow the important points and get it all done in a matter of minutes.
