Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best way to deploy react app with gitlab-ci?

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.

like image 410
cclloyd Avatar asked Dec 15 '18 00:12

cclloyd


People also ask

What is the best way to deploy a React app?

If you want to deploy React app, you need to drag and drop the build folder onto the Netlify Dashboard. Run npm run build or yarn build before deploying the latest build.

Can you host React app on EC2?

To host ReactJS app is AWS EC2 is one of the popular options. In this article we'll see how to deploy a react app with ngnix on a Ubuntu 20.04.


1 Answers

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.

like image 143
VonC Avatar answered Oct 07 '22 22:10

VonC