时间戳

首页 > 解决方案 > 为不同的分支部署 GitLab 页面

git - 为不同的分支部署 GitLab 页面

问题描述

我正在使用 GitLab Pages 部署我的 React 应用程序，它运行良好。

这是我的gitlab-ci.yml：

# Using the node alpine image to build the React app
image: node:alpine

# Announce the URL as per CRA docs
# https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration
variables:
  PUBLIC_URL: /
# Cache node modules - speeds up future builds
cache:
  paths:
  - client/node_modules

# Name the stages involved in the pipeline
stages:
- deploy

# Job name for gitlab to recognise this results in assets for Gitlab Pages
# https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements
pages:
  stage: deploy
  script:
    - cd client
    - npm install # Install all dependencies
    - npm run build --prod # Build for prod
    - cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46
    - mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.
    - mv build ../public # Move build files to public dir for Gitlab Pages
  artifacts:
    paths:
    - public # The built files for Gitlab Pages to serve
  only:
    - master # Only run on master branch

现在，我刚刚基于我的分支创建了一个开发版本develop

我想要我的 React 应用程序的 2 个版本和 2 个不同的 URL。我怎样才能做到这一点？

例如现在，我有：

my-react-app.com链接到master分支

我应该怎么拥有

dev.my-react-app.com甚至my-react-app.gitlab.io链接到develop分支？

标签： gitgitlabgitlab-pages

解决方案

为此，我已经成功地使用了可浏览的工件。在您的示例中，您将为您的开发分支创建一个作业，并将其设置为发布该作业的工件PUBLIC_URL的路径：gitlab.io

develop:
    artifacts:
        paths:
          - public

    environment:
        name: Develop
        url: "https://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public/index.html"

    script: |
        # whatever

    stage: deploy

    variables:
        PUBLIC_URL: "/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public"

按照指示设置environment会在相关合并请求中生成一个»Review app«链接，让您只需单击一下即可访问工件。

注意：如果您的存储库位于子组中，您需要在上面的两个位置插入子组名称，/-/以便$CI_PROJECT_NAME生成的 URL 正常工作。

推荐阅读