为不同的分支部署 GitLab 页面

Posted 2023-02-19

【中文标题】为不同的分支部署 GitLab 页面

【英文标题】：Deploying GitLab pages for different branches

【发布时间】：2019-08-30 23:33:52

【问题描述】：

我正在使用 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 分支？

【问题讨论】：

你是否在develop分支上实现了dev.my-react-app.com这样的自定义域？

【参考方案1】：

可以为不同的管道/分支发布多个页面。

为此，您需要将页面内容（基本上是测试报告，或任何需要发布的内容）复制到公用文件夹中的特定唯一目录。 例如，目录的名称可以是管道的 id (CI_PIPELINE_ID)。因此页面来源的路径类似于 public/$CI_PIPELINE_ID/。

然后应该将整个公用文件夹定义为具有特定唯一名称的工件（这里再次可以使用“$CI_PIPELINE_ID”）。

需要工件的唯一名称才能不覆盖下一次管道执行的工件（如果未指定名称，则将采用默认名称 https://docs.gitlab.com/ee/ci/yaml/#artifactsname）。

然后您可以通过链接访问已发布的报告：

https://yourGitlab/yourNamespace/yourProjectName/CI_PIPELINE_ID/index.html

, 这意味着您可以通过更改管道 ID 来访问所有已保存的报告。

我的例子：

stages:
  - publish

cache:
  # Required to keep artifacts from old builds, e.g. from master
  paths:
    - public

pages:
  stage: publish
  script:
    - mkdir -p public/$CI_PIPELINE_ID
    - cp target/site/allure-maven-plugin/* public/$CI_PIPELINE_ID/ -R
  artifacts:
    name: "$CI_PIPELINE_ID"
    paths:
      - public
    expire_in: 5 days
  when: always

【讨论】：

您能否发布一个指向实际有效的 GitLab 存储库的链接？它似乎对我不起作用：gitlab.com/ostrokach/deleteme

您好，我无法发布指向存储库的链接，因为它是私有的。您可以尝试与我建议的完全相同（我的意思是将文件夹结构复制到公共）吗？因为我看到你以其他方式做到这一点

对不起，我只是错过了管道文件中的一小段代码：cache: paths: - public 所以，请添加它，我希望它会起作用。我在我的仓库https://gitlab.com/pyrozhok.vladyslav/pages-test 中进行了测试，所以你可以检查一下。结果是 report_1, report_2 。我更新了回复。

关于您的解决方案，它确实可以通过巧妙地使用 GitLab 缓存来工作......但它是一个肮脏的解决方案，因为它不是基于 GitLab 页面上已有的内容。如果您的缓存被清除或过期（企业通常设置过期时间），您将失去一切。我建议您查看joki's solution。 :)

@alvaro-costa 如果您的项目是公开的并且您可以向全世界发布您的结果，那么它将起作用。否则，如果您无法将您的网页打开到互联网（如我的情况），那么这不是一个方便的解决方案。无论如何，选择更适合您的东西:)

【参考方案2】：

我已经成功地为此目的使用了可浏览的工件。在您的示例中，您将为您的开发分支创建一个作业并将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«链接，让您只需单击一下即可访问工件。

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

【讨论】：

我不确定这是否适用于所有情况，尤其是当 repo 位于子组中时，这会改变 $CI_ENVIRONMENT_URL 的模式。请参阅this question 了解更多详情。

你能分享一个包含这个的公共回购吗？

@KarlAnthonyBaluyot 这个minimal repo 之前的评论者使用了该技术，尽管针对子组中的项目稍作修改。这对你有帮助吗？

是的，谢谢@joki。您是否尝试过为开发分支 gitlab 页面使用自定义域？

此功能的文档位于docs.gitlab.com/ee/ci/yaml/#environmenturl

【参考方案3】：

每个 GitLab 项目最多可以有一个 Pages 站点。我找不到明确的参考，但the documentation for .gitlab-ci.yml 说：

请注意，默认情况下，页面与分支/标签无关，它们的部署仅依赖于您在 .gitlab-ci.yml 中指定的内容。如果您不使用only parameter 限制pages 作业，则每当将新提交推送到任何分支或标签时，页面将被覆盖。

如果没有 only 参数，任何分支的更新都会发布到 same Pages 站点，覆盖那里的所有内容。使用only 参数，只有提供的分支才会触发 Pages 构建。