首页 > 解决方案 > 使用 gitlab-ci 部署 React 应用程序的最佳方式?

问题描述

我刚刚开始弄清楚 gitlab CI/CD。我有自己的 gitlab 实例和几个跑步者,1 个共享的,1 个特定于项目的,都使用 docker 引擎。

目前我的登台服务器是它自己的虚拟机,它使用 docker-compose 托管。我通常使用裸 git repo 部署到该服务器,并将构建文件保存在 git 中。

但我想切换到 CI/CD 模型,所以我尝试了这个作为我的.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

但是我对如何实际部署构建有点迷茫。最好的方法是将文件放到登台服务器上,这只是一个虚拟机。

标签: reactjsgitdockergitlabgitlab-ci

解决方案


您可以从 GitLab 本身如何使用自己的 CI 中获取一些线索,如“如何为 Vue.js 使用 GitLab CI ”中所述:

他们有一个专门的部署步骤:

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/ user@server.com:/your/project/path/

因此,如果您可以打包和 scp 应用程序,则可以将其部署到您的 VM。


推荐阅读