Dockerize React JS - CI/CD to Production Server (Last Part)

This is the last part of dockerize React JS post. This just a simple example how to use CI & CD. You can check all scripts at react first app

1. Now we want to make another stage in gitlab-ci.yml to deploy our application. After make sure the test application in Heroku is working, now we want to deploy application to production server.

image: alpine:latest

before_script:
   - apk update
   - apk add git zip git unzip
   - 'which ssh-agent || (  apk add openssh-client )'
   - mkdir -p ~/.ssh
   - eval $(ssh-agent -s)
   - chmod 700 ~/.ssh
   - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'


stages:
   - testing
   - production

test:
   stage: testing
   script:
      - apk add ruby-dev
      - apk add ruby-rdoc
      - apk add git 
      - apk add curl
      - gem install dpl
      - dpl --provider=heroku --app=react-first-apps --api-key=$HEROKU_TEST_KEY

deploy_prod:
   stage: deploy_production
   script:
      - echo "$your_server_private_key" | tr -d '\r' | ssh-add - > /dev/null
      - ssh username@yourServerIP "cd /home/your/docker/folder/location &&
        git checkout master && git reset --hard HEAD^^ &&
        git pull origin master &&
        sudo supervisorctl restart react_app"
      - echo "Deploy to production server success"
   when: manual
   allow_failure: true

Don’t forget to add new variable in CI/CD gitlab, add your server id_rsa at variable your_server_private_key.

2. Make a supervisorctl config at /etc/supervisor/conf.d/, in this tutorial I name it as react.conf

[program:react_app]
autostart=True
redirect_stderr=True
command=docker-compose up 
directory=/home/your/docker/folder/location
stdout_logfile=/var/log/custom-log/react-first-app/react-out.log
stderr_logfile=/var/log/custom-log/react-first-app/react-err.log

Just push your new code to gitlab and try using gitlab CI/CD tools. Be patient, sometime you have to wait gitlab runner to run. Good luck :)