GitLab Pages プレビュー

チュートリアル
GitLab

アパッチAPISIXに関連するブログ記事を書く際、同僚に最初にレビューしてもらいたいと考えています。しかし、これは私のブログであり、個人的な投稿とビジネスの投稿を混ぜているため、リポジトリから除外したいと思います。少数の人だけにアクセス可能なプレビューが必要で、Vercelのプレビューのようなものです。GitLab Pagesを使用しており、そのようなオプションは標準装備されていません。

I tried two methods: GitHub gists and PDFs. Both have issues.

Gistsは最終ページのようにきれいに表示されません。DocGistを使用して状況を改善しようと試みました。万能薬ではありませんが、改善にはなります。

さらに、Gistsは私がAsciidocで記事を書くため、画像を表示しません。コメントに画像を配置する必要があり、流れが乱れます。Gistに画像を添付しようと試みましたが、投稿の流れの中では表示されません。コメントよりの利点は順序があることですが、欠点はAsciidocを変更する必要があることです。

I used gists because I’m used to GitHub reviews. But since it’s my blog, I neither need nor want the same kind of reviews as in a regular Merge Request. I need people to point me to when something needs to be clarified or I missed a logical jump, not that I made a typo (I use Grammarly for this). For this reason, a PDF export of a post is enough to review.

しかし、PDFには独自の問題があります：ウェブの「ページ」は無限に続く可能性がありますが、通常のPDFページは標準的なページに切り分けます。分割は図表をまたいで起こり得ます。さらに、PDFは配布が非常に難しくなります。

この投稿では、必要なプレビューを得るためにGitLab Pagesをどのように設定したかを説明します。

GitLab Pagesの概要

GitLab PagesはGitHub Pagesに似ています：

GitLab Pagesを使用すると、GitLab内のリポジトリから静的ウェブサイトを直接公開できます。

Pagesでウェブサイトを公開するには、Gatsby、Jekyll、Hugo、Middleman、Harp、Hexo、Brunchなど、任意の静的サイトジェネレータを使用できます。また、プレーンなHTML、CSS、JavaScriptで直接記述されたウェブサイトを公開することもできます。

— GitLab Pages

このブログ投稿が表示されるのはそのためです。GitLab Pagesのプレビュー機能は見つかりませんでした。専門家に尋ねてもわかりませんでしたが、GitLabはプレビューを提供していません。

作業の配置

I didn’t believe it initially, but you only need to create a dedicated artifact. Since the artifact consists of web files, the browser will render them.

アイデアは、URLでアクセス可能なこのような成果物を作成することで、簡単に予測できないものです。その後、URLを同僚と共有し、彼らのレビューを依頼できます。始めに、既存のビルドをmasterからコピーします。

YAML

  

stages:
  - preview

preview:
  stage: preview
  image:
    name: registry.gitlab.com/nfrankel/nfrankel.gitlab.io:latest
  before_script: cd /builds/nfrankel/nfrankel.gitlab.io
  script: bundle exec jekyll b --future -t --config _config.yml -d public
  artifacts:
    paths:
      - public
  only:
    refs:
      - preview
  variables:
    JEKYLL_ENV: production

この時点で、サイトはhttps://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public/index.htmlで利用可能です。ただし、多くの問題が修正される必要があります。

動作させる

重要度順に問題を修正しましょう。

アクセス権限の修正

プロジェクトはprivateであるため、私以外は成果物にアクセスできません。これでは、プレビューを他の人に提供する最初の目的に反します。

I want to give my teammates only limited access to my GitLab repository. I gave them Guest access, according to the Principle of least privilege. However, it still didn’t work.

ドキュメントによると、パイプラインもpublicにする必要があります。設定に移動して> CI/CD > 一般的なパイプラインを開き、公開パイプラインのチェックボックスをオンにします。

相対リンクの修正

I use Jekyll to build HTML from Asciidoc. To generate links, Jekyll uses two configuration parameters:

  • ドメインは、例えば、urlで設定されています。
  • パス、例えば、/、baseurlで設定

プレビューでは両方が異なります。これらのパラメータをYAML構成ファイルで設定する必要があります。環境変数の代替はありません。

ビルドを次のように変更しましょう：

YAML

  

preview:
  stage: preview
  image:
    name: registry.gitlab.com/nfrankel/nfrankel.gitlab.io:latest
  before_script:
    - cd /builds/nfrankel/nfrankel.gitlab.io
    - "printf 'url: https://%s.gitlab.io\n' $CI_PROJECT_NAMESPACE >> _config_preview.yml"                        #1
    - "printf 'baseurl: /-/%s/-/jobs/%s/artifacts/public/\n' $CI_PROJECT_NAME $CI_JOB_ID >> _config_preview.yml" #2
    - cat _config_preview.yml                                                                                    #3
  script: bundle exec jekyll b --future -t --config _config.yml,_config_preview.yml -d public                    #4

  1. urlをCI_PROJECT_NAMESPACE環境変数を使用して設定します。静的なため、ハードコーディングされた値を使用することもできましたが、スクリプトの再利用性を高めるためにこの方法を選びました
  2. baseurlをCI_PROJECT_NAMEおよびCI_JOB_ID環境変数を使用して設定します。後者は要件のランダム部分です
  3. デバッグ目的で構成の内容を表示します
  4. それを使ってください！

使いやすさの改善

正しいURLを毎回配布するのは面倒です。ビルド後にコンソールに記録した方が良いでしょう：

YAML

  

after_script: echo https://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public/index.html

まだ不足している部分があります。GitLab Pagesはインデックスページを提供します。例えば、https://blog.frankel.chを要求すると、ルートindex.htmlを提供します。プレビューのために単一の投稿のみを提供したいため、これは問題ではありませんでした。そのため、構成についてさらに調査はしませんでした。

使用法

この時点で、私はpreviewブランチにプッシュするだけです：

Shell

  

git push --force origin HEAD:preview

さらに良いことに、ローカルにブランチを持つ必要はありません。リモートブランチにプッシュするだけです。

結論

この投稿では、GitLab Pagesのプレビュー方法と、プレビューのURLを同僚たちと共有するための簡単な手順を紹介しました。最も難しかったのは、ウェブアーティファクトがブラウザで定期的にレンダリングされることに気付くことでした。

さらに詳しく:

Source:
https://dzone.com/articles/gitlab-pages-preview