Cloud Run functions × TypeScript 開発をしよう！【開発環境：GitHub】

# はじめに
この章では以下の内容について説明します。
- GitHubの登録方法
- ローカルレポジトリとリモートレポジトリを同期するための手順

---

「GitHubに登録する」という作業はこの記事をご覧のエンジニアの大多数の方はおそらく済んでいることでしょう。
しかし「非エンジニアに自分作ったレポジトリへ招待するためにGitHubの登録を行ってもらう」というケースが発生する可能性はあると思うので、2024年11月現在のGitHubの登録はどう行うのかの確認も兼ねて紹介してみます。
# 1. GitHubに登録する
以下にアクセスします。

https://github.com/

「Sign up」をクリックします。

![スクリーンショット 2024-11-23 11.48.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/1acfde4e-8f48-7c9e-dd81-6c67d5d8a705.png)


上から順に
- メールアドレス
- パスワード
- GitHubで利用するユーザ名

を入力して「Continue」をクリックします。

![スクリーンショット 2024-11-23 11.53.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/93e4731f-b743-346e-ab15-53a5b899130d.png)

その後ロボットかどうかの確認があるので乗り越えてください。
成功すると先ほど入力したメアドにコードが送られてくるので、そのコードを入力してください。

![スクリーンショット 2024-11-23 11.54.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/6d3202fb-d332-73dd-f279-87e3cf8135a7.png)

成功していたら「Your account was created successfully. Please sign in to continue」と表示されているので、先ほどのメールアドレスとパスワードを入力してください。

![スクリーンショット 2024-11-23 11.58.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/773378ee-5eb3-6802-1d38-54f0ca342a72.png)

成功すると個人情報みたいなのを3回くらい聞いてくるので、入力してください。

![スクリーンショット 2024-11-23 11.58.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/4098f1b3-7e21-20b1-0d48-7609f735e606.png)

選択肢終わるとプランを聞かれるので「Free」の方の「Continue for free」を押します。

![github.com_join_recommended_plan (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/eeb020bd-a2b8-e82b-89f1-98e0c0282864.png)

しばらく待つとGitHubのトップページに遷移します。これで登録完了です。

![スクリーンショット 2024-11-23 12.04.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/bb842420-8a9a-920e-df13-a41e2026be77.png)

（ここまでが非エンジニア向けGitHub登録のリファレンスになります。この後の流れはエンジニアにお任せしましょう。）

# 2. GitHubのレポジトリを作成する
レポジトリが何かは詳しく説明しません。簡単に説明すると「GitHub（というサービス）上に自分のパソコンで編集したファイルを置いておける場所」です。
公開設定も出来て「Public」にするとどんな人でもそのファイルの中身を見ることができ、「Private」にしておくと自分と共同作業者だけが見られるようになります。

というわけでレポジトリを作ります。「Create repository」を押します。

　![スクリーンショット 2024-11-23 13.57.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/8d641ab5-c379-fc39-4233-bb2570b24182.png)

以下の項目を好きなものに設定して「Create repository」を押します。他はデフォルト設定で問題ないです。
- レポジトリ名
- 公開設定

![スクリーンショット 2024-11-23 14.00.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/cd4a503a-5851-5cf5-5a50-1eeb2f46b099.png)

これでレポジトリが作成されました。真ん中の「HTTPS/SSH」は「SSH」を選択しておきましょう。

![スクリーンショット 2024-11-23 14.26.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/aec0e40c-74f1-bbb3-325d-97c9b2cad58f.png)


# 3. レポジトリに置いておくディレクトリを作成する
以下のディレクトリ構成を想定します。
```bash
└── advent-calendar-2024
   └── README.md
```
このディレクトリをGitでバージョン管理できるようにします。
今から行いたいことのイメージです。

![advent-calendar.gitinit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/6068c551-ef54-ef46-f5fe-5071883e4dd5.png)


このディレクトリをレポジトリ化するにあたり、Gitのアカウント設定を行っておきます。つまり「レポジトリを編集するアカウントの設定」を行います。
レポジトリを作成したアカウントの情報で設定します。

**この時いきなり設定するのはやめましょう。**
1. 確認
1. 設定
1. 確認

の手順を踏みましょう。

```bash
# 確認
git config --local user.name
git config --local user.email

# レポジトリを作ったアカウントではなかったら以下を実行して設定
git config --local user.name "ユーザ名"
git config --local user.email "メールアドレス"

# 設定できているか確認
git config --local user.name
git config --local user.email
```

設定できているのを確認できたら、レポジトリ作成後のリファレンスに従って以下を実行します。

```bash
echo "# advent-calendar-2024" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:xxx/advent-calendar-2024.git
git push -u origin main
```

（余談）昔のデフォルトブランチ名は `master` でしたが、人権運動の背景によって現在は `main` に変わっているようです。

https://www.publickey1.jp/blog/20/githubmainmastermain.html

ここでも注意ですが、**コマンドの脳死実行はやめましょう。** 
コマンドの意味をひとつずつ確認して行います。

---
1. `# advent-calendar-2024` という内容で `README.md` ファイルに追記します。`README.md` が存在しなければ新規作成して追記します
1. Git管理できるようにします。これにより「ローカルレポジトリ」が出来上がります
1. 変更した `README.md` をステージングに置きます（変更の確定を行うものの選択）
1. ステージングに置いた変更を「`first commit`」というメッセージ付きでcommitをします（変更の確定）
1. メインブランチを「`main`」に設定します
1. ここまで作成した「ローカルレポジトリ」を `git@github.com:xxx/advent-calendar-2024.git` という「リモートレポジトリ」と「同期」するように設定します
1. 同期を実行します(`git push`)


![advent-calendar.github (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/39ceec38-b1c1-a8a8-c5ed-7f51f77c6cd1.png)



---

最後のコマンドを実行しようとするとエラーが発生すると思われます。

```bash
git push -u origin main
```

```bash:エラー
ERROR: Permission to xxx/advent-calendar-2024.git denied to ユーザ名.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```

どうやら何か権限が足りなさそうです。
1.の手順の最後に「SSH」を選択しました。これを選択した場合、ローカルレポジトリをGitHubに置いてあるリモートレポジトリと同期する際に「公開鍵」での認証を行う必要があります。この鍵の設定をしていません。

というわけで行います。GitHubは結構親切で、全部やり方が書いてあります。

### 鍵の生成
https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

### 生成した鍵をGitHubに配置する
https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account

### 既存の鍵をGitHubに配置する
https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/checking-for-existing-ssh-keys

...手抜きしようと思いましたが、以下のケースで考えます。

### 例: 新しく名前を指定したキーを作成して、そのキーをGitHub上に置いておくケース
```bash:1. キーの生成
cd ~/.ssh
ssh-keygen -t ed25519 -C "xxx@gmail.com"
```
```bash:2. id_github_ed25519という名前で作成する
Generating public/private ed25519 key pair.
Enter file in which to save the key (/Users/xxxx/.ssh/id_ed25519): id_github_ed25519
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in id_github_ed25519
Your public key has been saved in id_github_ed25519.pub
The key fingerprint is:
SHA256:w0bcGbz/gowMdA0rASejiCVeasfT8e7SP7TCfMXyL1Y xxx@gmail.com
The key's randomart image is:
+--[ED25519 256]--+
|...........      |
|...........      |
|...........      |
|...........      |
|     . +S ..     |
|      +. + o.E   |
|     .o=.o=...   |
|      .+++o+. .  |
|        o.o oo   |
+----[SHA256]-----+
```
```bash:3. 「公開鍵」の中身をクリップボードにコピー
pbcopy < ~/.ssh/id_github_ed25519.pub
```
```bash:4. ssh-agentを起動してSSH接続を簡単にする
eval "$(ssh-agent -s)"
# Agent pid 81385 とか表示されるはず
```

```bash:5. ~/.ssh/configに認証情報記載
Host github.com
  AddKeysToAgent yes
  UseKeychain yes                       # ここがポイント
  IdentityFile ~/.ssh/id_github_ed25519 # ここは秘密鍵
```

```bash:6. ssh-agentに秘密鍵の情報を追加
ssh-add --apple-use-keychain ~/.ssh/id_github_ed25519
# パスフレーズを求められるので入力する
```

`ssh-add` コマンドを `--apple-use-keychain` オプションを指定して実行すると秘密鍵がキーチェーンに登録されます。
`~/.ssh/config` で `UseKeychain` を `yes` にすると、そのキーチェーンに登録された秘密鍵を勝手に参照してくれるので、いちいちパスフレーズを入力する必要がなくなります。便利。

```bash: 7. 接続確認
ssh -T git@github.com
```

```bash 8. これが出たら完成
Hi ユーザ名! You've successfully authenticated, but GitHub does not provide shell access.
```

ここまで行った後、GitHubの右上のユーザアイコンを押して「Settings」を押します。

![スクリーンショット 2024-11-23 15.18.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/2812b53c-81fb-bd86-d536-7fff434b6a9e.png)

「SSH and GPG keys」を選択。

![スクリーンショット 2024-11-23 15.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/b9f7a0f3-b9ac-5446-98e4-a90280d35a49.png)

「New SSH Key」をクリック。

![スクリーンショット 2024-11-23 15.25.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/51cd9122-6ea7-959a-3338-de87d7f854eb.png)

`pbcopy < ~/.ssh/id_github_ed25519.pub` の結果を貼り付け。わかりやすいようにラベルも任意で入力。今回は「github」としました。

![スクリーンショット 2024-11-23 15.26.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/8680450f-ba7e-1801-cffe-c33cba6863e7.png)

登録されたら以下のように表示されます。

![スクリーンショット 2024-11-23 15.28.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/acdf0e2e-4742-f2a9-3d2b-8581c60257a6.png)

ここまで来てやっと以下のコマンドが成功するはずです。

```bash: ローカルレポジトリをリモートレポジトリで同期
git push -u origin main
```

```bash:成功
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 241 bytes | 241.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:xxx/advent-calendar-2024.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.
```

無事、リモートレポジトリにローカルレポジトリのファイルを転送することができました。

![スクリーンショット 2024-11-23 18.16.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/557f4a01-7db8-df46-0bf4-b524f14e2890.png)

## 補足
### ssh接続時に `Error: Permission denied (publickey)` と出る場合
以下を参考にしてください。結構親切に書いています。

https://docs.github.com/ja/authentication/troubleshooting-ssh/error-permission-denied-publickey

### 複数アカウントを使い分けて接続したい場合は？
以下のように `~/.ssh/config` を書き換えます。

```bash:~/.ssh/config
Host github
  HostName github.com  # 追加
  AddKeysToAgent yes
  IdentitiesOnly yes   # 追加
  UseKeychain yes
  IdentityFile ~/.ssh/id_github_ed25519      # 本垢の鍵

 # 追加
Host github-sub # ちょっと変える
  HostName github.com
  AddKeysToAgent yes
  IdentitiesOnly yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_github_sub_ed25519  # サブ垢の鍵
```

Hostを `github-sub` としたので、リモートレポジトリの接続情報も一部変更しないといけません。
**まず既存の設定を確認してから変更します。**

```bash:1. 確認
git remote -v
---
origin	git@github.com:xxx/advent-calendar-2024.git (fetch)
origin	git@github.com:xxx/advent-calendar-2024.git (push)
```

```bash:2. remote-urlを github.com -> github-sub に変更したものにする
git remote set-url origin git@github-sub:xxx/advent-calendar-2024.git
```

```bash:3. ちゃんと変更されているか確認
git remote -v
---
origin	git@github-sub:xxx/advent-calendar-2024.git (fetch)
origin	git@github-sub:xxx/advent-calendar-2024.git (push)
```

```bash:4. 接続テスト
ssh -T git@github-sub
```

```bash:5. 接続できている
Hi サブ垢! You've successfully authenticated, but GitHub does not provide shell access.
```

```bash:6. レポジトリを編集するアカウントの変更
# 確認
git config --local user.name
git config --local user.email

# レポジトリを編集するアカウントの変更
git config --local user.name "サブ垢 ユーザ名"
git config --local user.email "サブ垢 メールアドレス"

# 設定できているか確認
git config --local user.name
git config --local user.email
```

ここまでできたらGitHubの開発する上での設定は完了です。
続いて開発環境（VSCode）の方の設定についてお話しします。