Zenn
🦊

【Hello World⑲】GitLab Pages（ページ作成編）

2024/04/23に公開
Docker
GitLab
GitLab Runner
tech

GitLab PagesでWebページを作ります

Windows11のDocker環境上で
GitLabのGitLab Pagesを使ったHello Worldのページを作ります。
今回は、前回作成したプロジェクトでHello Worldのページの作成を行います。

環境

Windows 11 Pro 23H2
WLS 2.1.5.0（Ubuntu 22.04.1 LTS）
Docker Desktop 4.29.0
Visual Studio Code

①Runnerを作成

プロジェクトページのメニューの「Settings」をクリックして展開します。

「Settings」の「CI/CD」を選択してCI/CDの設定ページを表示し、「Runners」の「Expand」ボタンをクリックしてRnnersの設定エリアを表示します。

「Project Runners」の「New Project Runner」ボタンをクリックして、プロジェクトのRunner作成ページを表示します。

「Tags」の「Run untagged jobs」にチェックを入れて、「Create runner」ボタンをクリックします。

②Runnerの登録と起動

Runnerを作成すると「Register runner」ページが表示されるので、Step1のgitlab-runner registerコマンドをコピーします。

以下のコマンドを実行し、GitLabのコンテナに入ります（bashを対話モードで実行します）。

PowerShell
docker compose exec -it gitlab bash

「Register runner」ページでコピーしたgitlab-runner registerコマンドを実行して、gitlab-runnerへ登録します。
コマンド実行時に聞かれる質問には、
Enter the GitLab instance URL (for example, https://gitlab.com/)
はhttp://localhost、
Enter a name for the runner. This is stored only in the local config.toml file
はlocalhost、
Enter an executor: docker-autoscaler, custom, docker, docker-windows, kubernetes, docker+machine, instance, shell, ssh, parallels, virtualbox
はshellを回答します。
続いて「Register runner」ページのStep3のgitlab-runner runコマンドをコピーして、GitLabのコンテナで実行し、gitlab-runnerを起動します。

「Register runner」ページの「View runners」ボタンをクリックすると、CI/CDの設定ページが表示され、Assigned project runnersに作成したRunnerが表示されます。

画面左端のメニューでプロジェクト名をクリックしてプロジェクトページを表示します。

③Hello Worldページを作成

プロジェクトページで「+」をクリックして、「New file」を選択します。

新規ファイル作成ページでHello Worldページ用のファイル名とファイルの内容を入力して、「Commit changes」ボタンをクリックし、ページを作成します。

④デプロイ

画面左端のメニューの「Build」を展開して「Pipeline editor」をクリックし、パイプラインのエディタページを表示して、「Configure pipeline」ボタンをクリックします。

以下のパイプラインの設定を入力して、「Commit changes」ボタンをクリックします。

.gitlab-ci.yml
pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
    paths:
    - public
  only:
  - main



パイプラインの設定を登録すると、自動的に実行されます。画面左端のメニューで「Pipelines」を選択しパイプラインを表示し、Statusが「Passed」と表示されていれば、デプロイ完了です。

⑤Hello Worldページを確認

画面左端のメニューの「Deploy」を展開して「Pages」をクリックし、ページの「Access pages」のリンクをクリックして、デプロイしたページを表示します。

Hello Worldが表示されていれば確認完了です。

Discussion