GitLab 페이지 미리보기

튜토리얼
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을 제공합니다. 일반 아티팩트로는 그렇지 않습니다. 미리보기용으로 단일 게시물만 제공하고 싶었기 때문에 문제가 되지 않았으며, 구성에 대해 추가로 조사하지 않았습니다.

사용법

이 시점에서 나는 미리보기 브랜치에 푸시해야 합니다.

Shell

  

git push --force origin HEAD:preview

맛있는 부분은 로컬에 브랜치가 필요하지 않다는 것입니다. 원격 브랜치에만 푸시하면 됩니다.

결론

이 글에서는 몇 가지 단계만으로 GitLab Pages를 미리 보고 팀원들과 미리본 URL을 공유하는 방법을 설명했습니다. 가장 어려웠던 부분은 웹 아티팩트가 브라우저에 의해 일반적으로 렌더링된다는 것을 깨닫는 것이었습니다.

더 나아가기:

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