Automate React App deployment using GitLab CI/CD, Ansible, Docker
Tags: ansible, docker, gitlab, devops
Published: 2022-01-06 18:13:32

Custom workflow to automate your deployment using Gitlab and Ansible.

If you want to see your changes online every time you push some code, you need a custom workflow. You are at the right place.
Follow this short tutorial, I have the perfect recipe for you !

We will use the most suitable tools for our project, let me introduce our little friends :
- GitLab to host our project and run pipelines
- Ansible to deploy on remote server
- Docker to containerized our app and ship it easily and fast
- ReactJS fontend frameworks for the demo (it could be anything else, but you’ll need to adapt the container)

## 1. Create a new project with create-react-app and host it on Gitlab
We will create a new react app with CRA:
```sh
yarn create react-app <project_name> --template typescript
cd <project_name>
git remote add origin <gitlab_project_url>
git add .
git commit -m “Initial commit”
git push -u origin master
```

## 2. Create CI job with GitLab CI
At the root of your project we will create a new file `.gitlab-ci.yml` to enable the gitlab CI.

{% gist https://gist.github.com/MinaroShikuchi/37721ea7322e2c748c2844c159e4bc72 %}

Currently this file contains only one stage dedicated to the build. We basically install only the `dependencies` of our project and not the `devDependencies`.
Then we build and we cache the build folder for later jobs.
We also cache the `node_modules` folder so the next time we don’t need to download all the `node_modules` again.

## 3. Containerize and release our app with Docker on the GitLab container registry

We have created a production build for our react app but we still need to create a container to ship it.

{% gist https://gist.github.com/MinaroShikuchi/25e46d020a6df2300cce72bfc47a097e %}
 
We added the release stage which build the container. We use the cache again but for the layers of the image so the less the container change the faster it will be built. We need to login to the project registry thanks to [predefined variables](https://docs.gitlab.com/ee/ci/variables/predefined_variables.html) and simply push the freshly created container to the registry.

## 4. Deploy and update our app in production
Now we have prepared everything for the deployment but our app is stored in a container registry but still not running in production. We will be a bit hand-made here.

### 4.1 Create a SSH key
First thing, we need to be able to connect our deployment server through SSH. So let’s create an SSH key !
```sh
sh-keygen -t ed25519 -f ~/.ssh/id_ansible -N ''
ssh-copy-id -i ~/.ssh/id_ansible <user>@<ip>
```
The last command will add your public key on the server.
```sh
cat ~/.ssh/id_ansible
```
This command reveal your ssh private key, copy it we will use it in the next step. But do not share it with anyone !

### 4.2 Add a SSH Key to GitLab
In order to connect to your server and deploy the container we need to add this private key to the runner.
To upload the key to GitLab, go to **Settings > CI/CD > Variables** and click on **_Add variable_**. In **_key_** write `ANSIBLE_DEPLOY_KEY` and in **_Value_** paste the private key. If you have not created protected branches or tags, uncheck **_Protect variable_**, click **_Add Variable_** and you're done.

### 4.3 Create a docker-compose file
On your server under `/home/<user>/prod` create a `docker-compose.yml` in order to run your container.

{% gist https://gist.github.com/MinaroShikuchi/ef7afc3ecc5ac80fbd37b9d2003f8f23 %}

### 4.4 Create an Ansible Playbook
We will use Ansible to execute remote command on the server during the pipelines, this setup does not aims to explain Ansible; it’s a simple setup.
At the root of your project you can create the `ansible/` directory.
- in `ansible/hosts` copy/paste the file under and replace the `<user>` and `<ip>`
- in `ansible/roles/deployment/tasks/main.yml` copy/paste the content of the second file
- in `ansible/playbooks` again copy/paste the third file.

{% gist https://gist.github.com/MinaroShikuchi/fdf24f5f6d3fa19cb31a87109b231190 %}

### 4.5 Deploying with Ansible playbook

Last step, we added the deploy stage that will connect to the server, pull from the registry and only restart the container we pulled.

{% gist https://gist.github.com/MinaroShikuchi/b4316b2d5c4c1a094c42bfe10fc3e38c %}

## Thoughts
I’m aware that this setup does not cover every use case and does not follow every best practice in terms of security, like importing a ssh private key in GitLab or not handling errors if deployment failed.
But I wanted to keep it simple as a basic setup so you can adapt it to your needs, if you have any advise feel free to write a comment, this is my first try so I will definitely improve it.

Thank you for reading !