Best way to deploy react app with gitlab-ci?

Question

I'm just getting started figuring out gitlab CI/CD. I have my own gitlab instance, and a couple runners, 1 shared, 1 project specific, both using docker engine.

Currently my staging server is its own VM that it hosts with docker-compose. I usually deploy to this server with a bare git repo, and just keep the build files in git.

But I wanted to switch to a CI/CD model, so I tried this as my .gitlab-ci.yml:

image: node

stages:
- build
- stage

build_frontend:
  stage: build
  script:
  - cd ./src/frontend
  - npm install && npm audit fix
  # CI=false set to ignore warnings as errors
  - CI=false npm run build
  artifacts:
    paths:
    - ./src/frontend/build
  tags:
  - projectname

But I'm sort of lost on how to actually deploy the build. What would the best way be to get the files onto the staging server, which is just a VM.

Answer 1

You can take some clues from how GitLab itself uses its own CI, as described in "How to use GitLab CI for Vue.js":

They have a dedicated deploy step:

build site:
  image: node:6
  stage: build
  script:
    - npm install --progress=false
    - npm run build
  artifacts:
    expire_in: 1 week
    paths:
      - dist

unit test:
  image: node:6
  stage: test
  script:
    - npm install --progress=false
    - npm run unit

deploy:
  image: alpine
  stage: deploy
  script:
    - apk add --no-cache rsync openssh
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
    - chmod 600 ~/.ssh/id_dsa
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -rav --delete dist/ [email protected]:/your/project/path/

So if you can package and scp your app, you can deploy it to your VM.