GitHub Skills完走はまりどころ

## これは何

https://skills.github.com

を一通りやってみてはまったところの一覧

:::note warn
あくまでこの記事の内容は投稿時点でのものです
:::
:::note info
各節のタイトルのリンク先は実際にやってみた時の repository です
:::

## First day on GitHub
### [Introduction to GitHub](https://github.com/nshun583/introduction-to-github)
* 特にはまりどころなし

### [Communicate using Markdown](https://github.com/nshun583/communicate-using-markdown)
* 特にはまりどころなし

### [GitHub Pages](https://github.com/nshun583/github-pages)
* Step 4: Create a blog post の手順3.でパスを正しく記載しないと
GitHub Actions の判定で後続ステップに進まない
    * https://github.com/nshun583/github-pages/commit/f13d414f908bcbeadb26ac7fca64de6aade2d5ff
        * × : `_post/YYYY-MM-DD-title.md`
        * ◯ : `_posts/YYYY-MM-DD-title.md`
    * 当該リポジトリの Actions タブの Step 4 相当 Workflow を強制実行したら
後続 Step 5に進んだので、完走後で別コミットを作って typo を修正してから
Pull Request → Merge した
        * https://github.com/nshun583/github-pages/commit/b4ba6bf2ddd7443f8cc33b2ce3b4f29ac4086f63
        * https://github.com/nshun583/github-pages/commit/ee2e00a594511449733797a24af26c9faf13effc
    * それまで GitHub ページは正しく記事表示されなかった
        * https://nshun583.github.io/github-pages/
    * そもそも typo しなければ済む話

## First week on GitHub
### [Review pull requests](https://github.com/nshun583/review-pull-requests)
* 特にはまりどころなし

### [Resolve merge conflicts](https://github.com/nshun583/resolve-merge-conflicts)
* 特にはまりどころなし

### [Release-based workflow](https://github.com/nshun583/release-based-workflow)
* Step 4: Generate release notes and merge の1つ目の Action > 手順8で要求されているのは
`Click Save draft, as you will publish this release in the next step` なので
ここで勢いのままに Publish してしまうと
Step 5の手順2/3で `Click the Edit button next to your draft release` / `Ensure the Target branch is set to main`
できなくて先に進めなくて詰む(Edit ボタンがそもそも表示されない)
    * https://github.com/skills/release-based-workflow の雛形 repository から作業用 repository を2回作り直してようやく気がついた
    * そもそもStep 5の手順4に誤植があって、`Click Update release` ではなく `Click Publish release` なことが余計に混乱を招いているが、それは既に Pull Request が出ている

https://github.com/skills/release-based-workflow/pull/9

### [Connect the dots](https://github.com/nshun583/connect-the-dots)
* 特にはまりどころなし

## Automate workflows with GitHub Actions
### [Hello GitHub Actions](https://github.com/nshun583/hello-github-actions)
* 特にはまりどころなし

### [Continuous integration](https://github.com/nshun583/continuous-integration)
* このあたりから Instructions が多少怪しくなってくる
* Step 1: Add a test workflow の `Update the workflow to remove all steps other than the "checkout" step.` が
意味するのは雛形から生成された ci.yml で以下の部分を消すということ
この部分を完全に読み飛ばして先に進んでしまったが特に大きな問題はなかった
    * 以下の部分
```
      # Runs a single command using the runners shell
      - name: Run a one-line script
        run: echo Hello, world!

      # Runs a set of commands using the runners shell
      - name: Run a multi-line script
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.
```
* Step 2: Fix the test でいきなり `1. Update the code in the ci branch to get the test to pass. You need to look something like this: _underscore_` と言われるが、これは指示として何をしろと？？？状態
  * これが何を言っているかというと、README.md L115(初期状態)の以下の部分を * から _ に直せということ
      * `*By looking at the logs, can you identify which tests failed?* To find it, go to one of the failed builds and scrolling through the log. Look for a section that lists all the unit tests. We're looking for the name of the test with an "x".` 
  * L113にヒントがある
      * `<!-- Note here: Learners -- yup, you found the error! Course maintainers -- leave the italics with * instead of _ for the error case. -->`
  * が、そもそも Step 1で Workflow に追加した以下が何をやっているかの説明が一切ないので README.md を修正するというところに思いを馳せにくい
      * `npx remark . --use remark-preset-lint-consistent --frail`
  * Workflow の以下のエラーメッセージから分かれ、ということなのだろうが...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129395/fb396525-e9bf-9b53-e032-f6bc1f1e33c7.png)
  * 既に Issue と Pull Request に別々になっている

https://github.com/skills/continuous-integration/issues/10

https://github.com/skills/continuous-integration/pull/13

* Step 4: Add branch protections の手順4で `Check Require pull request reviews before merging.` しろと言われるが、設定項目名が違う
    * 正しくは
        * × : `Require pull request reviews before merging`
        * ◯ : `Require a pull request before merging`
    * これも既に Pull Request になっている

https://github.com/skills/continuous-integration/pull/8

* 引き続き Step 4 で `Require a pull request before merging` を設定すると以下のような状態になる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129395/3a75bec2-7ba3-f283-f628-9712ce19509c.png)
    * ところが、このまま進むとセルフ承認はできないので、以下のように Step 5で `Merge without waiting for requirements to be met (bypass branch protections)` することを強いられるので branch protection を設定した意味がない 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129395/42f03d2a-466f-8a83-7a0b-097b4dc0089b.png)
    * ここから想像するに本来手順が想定している設定状態は以下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129395/4fb477e7-a866-3b56-e88b-924ac8a40b9c.png)
    * 気が向いたので 公式の Issue にした

https://github.com/skills/continuous-integration/issues/14

### [Publish packages](https://github.com/nshun583/publish-packages)

* Step 1 手順2 `Open the pull request I made for you from the cd branch.` は本当に開くだけでこの時点では Pull Request をどうこうしたりはしない
    * それは後程の Step 3 の `You can now merge your pull request!`
        * Step 1 で `publish.yml` を、Step2 で `Dockerfile` を追加してから
    * なので `Add a new file at .github/workflows/publish.yml.` は Code タブ の `cd` bracnch から
    * Issue にするほどではないが、分かりにくい印象は受けた
* Step 3 を完了するといきなり Step X(最後の段階)までチュートリアル的に進んでしまって？？？となるが
Step 4/5の最後にそれぞれ `We can't automatically verify this step for you, so please continue on to the next step below!` とあるのでこれは想定通りのはず
    * だが不親切さは否めない
* Step 4 で `you will need to generate a personal access token` しろと言われるが、[personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) のリンク先は `Creating a fine-grained personal access token` が推奨されるような記載になっている
    * が、実際に作成するのは `Creating a personal access token (classic)` の方(Step 4内スクリーンショットとの対応からして)
    * 手順内スクリーンショットと以下の差異あり
        * `repo` の下が4要素ではなく5要素(`security_events`が増えている)
        * `write:packages` と `read:packages` が個別階層になっているが、実際には `read:packages` が `write:packages` の下位要素
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129395/f7eae7e8-2ce3-687d-3fb9-12fdfb2fead2.png)
    * 手順には書かれていないが当然以下はメモする
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129395/e63b0b7b-c3b2-64ab-f435-8680ebfa605c.png)
    * 総じてお世辞にも分かりやすいとは言えないが、
次の問題点に比べれば手順と実情を比較すればまだ分かるレベル(Issue にしていない)
* Step 4 の後半部分(Token 作成後)があまりにも手順飛躍している
    * いきなり以下のように言われるが、あまりにも不親切
        * `Open your terminal (Bash or Git Bash recommended)`
        * `Use the following command to log in:`
            * `docker login docker.pkg.github.com -u USERNAME -p TOKEN`
    * コマンドライン環境を整備して Docker を入れるところから始めないといけないので、
ここで一気に挫折者が増えそうな手順になっている
(ここまでの GitHub Skills 各コースは Windows 機でもブラウザ内完結で問題なく実施できるので一気にハードルが上がっている)
    * CentOS Stream 9 で実施していたので以下の手順に従った
      * https://docs.docker.com/engine/install/centos/
    * あまりにも不親切なので公式の Issue にした

https://qiita.com/nshun583/items/2527d6bcb0abf6b7956f

https://github.com/skills/publish-packages/issues/13

* Step 4 で `docker login docker.pkg.github.com -u USERNAME -p TOKEN` すると確かに `Login Succeeded` するが、それ以外にも各種セキュリティ警告が出るので望ましくない
    * とりあえずこのコース終了後に即 access token を無効化することで対処
```
[shuntaro@localhost ~]$ sudo docker login docker.pkg.github.com -u nshun583 -p XXXXXXXXXXXXXXXX
[sudo] shuntaro のパスワード:
WARNING! Using --password via the CLI is insecure. Use --password-stdin.
WARNING! Your password will be stored unencrypted in /root/.docker/config.json.
Configure a credential helper to remove this warning. See
https://docs.docker.com/engine/reference/commandline/login/#credentials-store

Login Succeeded
```
* Step 4 で `Copy and paste the pull command from the package instructions into your terminal` する箇所の URL 記載とスクリーンショットが違う
    * 正しくは
        * × : docker pull docker.pkg.github.com/YOURNAME/js-build/tic-tac-toe:f29
        * ◯ : docker pull ghcr.io/YOURNAME/publish-packages/game:sha-07a7e0a
    * 既に Issue になっている

https://github.com/skills/publish-packages/issues/8

https://github.com/skills/publish-packages/issues/6

* Step5 の単純誤植
    * × : Find your image information by typing `Docker image ls`.
    * ◯ : Find your image information by typing `docker image ls`.
* Step 5 は Step 4 と違って最終実行状態例が記載されていないので結果が正しいかどうかを検証しにくいが、以下のようになった

```
[shuntaro@localhost ~]$ sudo docker image ls
REPOSITORY                               TAG           IMAGE ID       CREATED         SIZE
ghcr.io/nshun583/publish-packages/game   sha-07a7e0a   c88b6884f6b3   2 hours ago     127MB
hello-world                              latest        feb5d9fea6a5   13 months ago   13.3kB
[shuntaro@localhost ~]$ sudo docker run -d -it --rm -p 8080:80 --name ttt ghcr.io/nshun583/publish-packages/game:sha-07a7e0a 
c683c11a70ae9f6480eebdcc5a02fcdc3c63a2051fd21801e5e8a243388d75bf

```

* 最後に前述の通り、作成した `personal access token (classic)` を即無効化した
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129395/ee99288c-6d6b-ae90-5eaa-6fbbcf1bedfa.png)

### [Deploy to Azure](https://github.com/nshun583/continuous-delivery-azure)

* まず Step 1の冒頭からして不親切
    * `Activity 1: Configure GITHUB_TOKEN permissions` で [Learn how](https://docs.github.com/en/actions/security-guides/automatic-token-authentication#modifying-the-permissions-for-the-github_token) と言われるが、飛んだ先のページに `Allow GitHub Actions to create and approve pull requests enabled under Workflow permissions` する方法がまず書かれてないという罠がある
    * どこに書かれているかというと飛んだページからさらに飛ぶ [Managing GitHub Actions settings for a repository](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-github-actions-settings-for-a-repository) の後半 `Setting the permissions of the GITHUB_TOKEN for your repository`
    * 端的にいうと、[当該リポジトリ] > Settings > Code and automation > Actions > General の末尾以下部分
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129395/e015d3b6-2c94-6121-647d-dbb5f6fe4a6b.png)
* Step 2: Set up an Azure environment
    * 個別にどうというレベルではなく、全体的にかなり手順として重め
    * いわゆる「クラウド破産」を防ぐために支払アラートだけは Azure Portal で設定しておく
        * https://learn.microsoft.com/en-us/azure/cost-management-billing/costs/tutorial-acm-create-budgets
        * なぜか Action Group 設定が項目自体表示されないが深入りしない(おそらく元々の Action 自体を設定していないから)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129395/f65e9cb0-f2fc-8e77-d5ac-c05ec0742af1.png)
        * `Create a new subscription in the Azure Portal.` は `アカウントのアップグレード` なる行為をしたら設定できた模様
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129395/5f912cff-885b-fce9-19fc-be9b16b46503.png)
    * MFA は Azure を Subscription した GitHub アカウント自体が MFA になっているので一旦保留
        * 本来は管理者と別に普段利用アカウントを作成してそちらを MFA にするべき
    * というかこのチュートリアルが終わったら以下で早急に Subscription を解除するのが無難
        * https://learn.microsoft.com/en-us/azure/cost-management-billing/manage/cancel-azure-subscription
    * Azure CLI のインストールはリンク参照で示されている以下の通りにやるだけ(Linuxの場合)
        * https://learn.microsoft.com/en-us/cli/azure/install-azure-cli-linux
            * `Choose an installation method` は環境に応じて選ぶ
    * 途中で `--sdk-auth` が `Option '--sdk-auth' has been deprecated and will be removed in a future release.` と言われる問題は既に Issue になっている
    * そして根本的な問題として、教材内の GitHub Actions が壊れているので手順通りにやっても Step 3 に進むことができず、`To deploy successfully to our Azure environment, we have created a new workflow file spinup-destroy.yml in the azure-configuration branch.` されていないので強制的に次に進むこともできない
        * これも既に Issue になっている
        * なのでどうしようもないので、前述の通り Subscription を削除して
クラウド破産防止対策だけしてこのコースは道半ばで撤収

https://qiita.com/nshun583/items/cafb73b78058abab755e

https://github.com/skills/continuous-delivery-azure/issues/14

https://github.com/skills/continuous-delivery-azure/issues/11

### [JavaScript actions](https://github.com/nshun583/writing-javascript-actions)

* `Step 1: Initialize a new JavaScript project` で要求されている前提インストールは以下のように対処した
    * Visual Studio Code or your editor of choice
        * vim で十分なので割愛
    * Git
        * 最初から導入済
    * Node.js
        * https://nodejs.org/en/download/package-manager/#centos-fedora-and-red-hat-enterprise-linux
        *  CentOS Stream 9 だと以下のように導入バージョンが18になる
なので後続手順で `using: "node12"` となっているところは全て node18 に読み替えた(が、これだとGitHub側の環境問題でうまくいかない：後述)
```
[shuntaro@localhost ~]$ sudo dnf module list nodejs
メタデータの期限切れの最終確認: 0:16:28 時間前の 2022年10月24日 02時53分19秒 に実施しました。
CentOS Stream 9 - AppStream
Name                     Stream                   Profiles                                               Summary                            
nodejs                   18                       common [d], development, minimal, s2i                  Javascript runtime                 

ヒント: [d]efault, [e]nabled, [x]disabled, [i]nstalled
```
* `Step 5: Add your action to the workflow file` が my-workflow.yml の編集操作しか言及していないが、Step 2/3/4 と同じように main への push まで実施する(そうでないと Step 6に進まない)
* CentOS Stream 9 だと前述の通り、dnf からは Node.js 18 しか導入できないが、これだと GitHub 側の環境でエラーになる
    * これは GitHub.Runner が Node.js 12/16 にしか対応していないのに対し、
CentOS Stream 9 の dnf だと 18 しか導入できないことによるもの
        * https://docs.github.com/en/actions/creating-actions/metadata-syntax-for-github-actions#runs-for-javascript-actions
    * https://github.com/nshun583/writing-javascript-actions/actions/runs/3308162986

```
System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values. (Parameter ''using: node18' is not supported, use 'docker', 'node12' or 'node16' instead.')
   at GitHub.Runner.Worker.ActionManifestManager.ConvertRuns(IExecutionContext executionContext, TemplateContext templateContext, TemplateToken inputsToken, String fileRelativePath, MappingToken outputs)
   at GitHub.Runner.Worker.ActionManifestManager.Load(IExecutionContext executionContext, String manifestFile)
```


```
[shuntaro@localhost ~]$ sudo dnf module list nodejs
メタデータの期限切れの最終確認: 0:16:28 時間前の 2022年10月24日 02時53分19秒 に実施しました。
CentOS Stream 9 - AppStream
Name                     Stream                   Profiles                                               Summary                            
nodejs                   18                       common [d], development, minimal, s2i                  Javascript runtime                 

ヒント: [d]efault, [e]nabled, [x]disabled, [i]nstalled

[shuntaro@localhost ~]$ sudo dnf module install nodejs:12
メタデータの期限切れの最終確認: 1:23:49 時間前の 2022年10月24日 02時53分19秒 に実施しました。
エラー: リクエスト中の問題:
足りないグループまたはモジュール: nodejs:12
```

* これも Issue 送りにした

https://github.com/skills/writing-javascript-actions/issues/10