【Hello World⑲】GitLab Pages(ページ作成編)
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を対話モードで実行します)。
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」ボタンをクリックします。
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