为不同的分支部署 GitLab 页面 [英] Deploying GitLab pages for different branches

问题描述

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

I am deploying my React app using GitLab Pages, and it works well.

这是我的 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

Now, I just created a dev version, based on my branch develop

我想要我的 React 应用程序的 2 个版本和 2 个不同的 URL.我该怎么做?

I would like to have 2 versions of my React app with 2 different URLs. How can I do that?

例如，我现在有:

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

我应该怎么做

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

dev.my-react-app.com or even my-react-app.gitlab.io linked to develop branch?

推荐答案

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

I've had success using the browsable artifacts for this purpose. In your example, you would create a job for your develop branch and set the PUBLIC_URL to the path on gitlab.io where the job's artifacts are published:

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« 链接，让您只需单击一下即可访问工件.

Setting the environment as indicated produces a »Review app« link in relevant merge requests, allowing you to get to the artifacts with a single click.

注意:如果您的存储库位于 subgroup，您需要在上述 /-/ 和 $CI_PROJECT_NAME 之间的两个位置插入子组名称，以使生成的 URL 起作用.

Note: if your repository is in a subgroup, you need to insert the subgroup name in two places above above between /-/ and $CI_PROJECT_NAME for the resulting URLs to work.

这篇关于为不同的分支部署 GitLab 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！