Automate Build & Deploy React production build with gitlab-ci to Linux base server (AWS)

Right now as everyone wanting to automate literaly everything, this post will show you how you can automate the react build and deployment. I am using create-react-app getting started with react and assuming you have a similar setup.

Setup .gitlab-yml file for gitlab auto deploy

Here's the whole .gitlab-yml file that you can copy directly to root of your project.

Breaking each line:

image: node:10
 
cache:
  paths:
    - node_modules/

This line define the node version that should be used by the docker instance of shared gitlab-runner and the path defines to cache the node_modules dir.

before_script:
  - apt-get update -qq && apt install -y openssh-client openssh-server
  - mkdir -p ~/.ssh     
  - echo -e "$SSH_PRIVATE_KEY" > ~/deploy.pem     
  - chmod 400 ~/deploy.pem     
  - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'

The code in `before_script` runs before the actual execution. This is to install and setup pre-requisits for deployment like openssh. Also, as I am using AWS ec2 instance to host the project, I have a .pem file to logging in to server via ssh, which is stored in gitlab variables as  SSH_PRIVATE_KEY and accessed by $SSH_PRIVATE_KEY in yml file. So, I'm adding the public-key to the a file and updating permission of the file as per AWS guidelines.

deploy_production:

  only:
    refs:
      - master
  stage: deploy
  environment: 
    name: production
  script:
    - npm install
    - REACT_APP_SERVER=production CI=true npm run build
    - scp -i ~/deploy.pem -r build/* $USER_NAME@$SERVER_IP:/var/www/html/provider

'deploy_production' & 'deploy_staging' blocks are almost similar except 'deploy_production' have all the setup for production build and master branch of react whereas 'deploy_staging' have setup for staging build and staging branch. You can define any other branch you want in `refs`

Gitlab ci/cd has 3 stages: test, build & deploy, I have merged the build and deploy part in the deploy stage but you can implement it seperatly.

The script block, runs the essential script to make the project live. Here, for production, I set the environment variable `CI` to true; that'll consider any warning pops-up while building as error, so make sure there is no warning (or error ofcourse) else you can set that to false as I did for staging.

Atlast, you need to define the dir path where you want to upload/copy the build

We are using scp command to sync the build folder to our server. Basically, It uploads the build folder to our server.

You can easily setup the variables mentioned in code (i.e. SSH_PRIVATE_KEY, USER_NAME, SERVER_IP) from your project's CI/CD settings. Visit this link for reference.

Note: While setting up environment variables, if you want to use it for protected branches only (i.e master/production) remember to select that option.

After setting up the variables, just push or merge to the branch you've specified in yml file and check the CI/CD Pipeline. It will assign the job to the shared gitlab-runner (Also, you can setup your own gitlab-runner on your server and you can use your own docker image too) and execute these commands.

So, That's it, your react app deployed. Reach me out incase you catch any issue while setting up.