React × TypeScriptの環境をつくったので、次はGit連携した

## Gitで管理しよう
##### これの続きと言えば続き
→[躓きながら、React × TypeScript環境を構築した話](https://qiita.com/Zombie_PG/items/4c7fa94f28673e2fb6a8)

Reactの環境を作るときの、```npx create-react-app . --template typescript```このコマンドのあとのディレクトリは以下になっていた。
```
zombie@DESKTOP-JLU30CD:~/working/typescript_mk2$ npx create-react-app . --template typescript
drwxr-xr-x   6 zombie zombie   4096 Apr  4 13:27 .
drwxr-xr-x   6 zombie zombie   4096 Apr  4 13:37 ..
drwxr-xr-x   8 zombie zombie   4096 Apr  4 13:39 .git
-rw-r--r--   1 zombie zombie    310 Apr  4 13:27 .gitignore
-rw-r--r--   1 zombie zombie   2117 Apr  4 13:27 README.md
drwxr-xr-x 827 zombie zombie  36864 Apr  4 13:27 node_modules
-rw-r--r--   1 zombie zombie 665636 Apr  4 13:27 package-lock.json
-rw-r--r--   1 zombie zombie    975 Apr  4 13:27 package.json
drwxr-xr-x   2 zombie zombie   4096 Apr  4 13:27 public
drwxr-xr-x   2 zombie zombie   4096 Apr  4 13:27 src
-rw-r--r--   1 zombie zombie    535 Apr  4 13:27 tsconfig.json
```

<font color="red"> ！！ <br> なんかGitがもう入っているな </font>

Gitが入っているときに、向き先を自身が作ったリポジトリにする方法を調べ、以下を参考にした。
https://www.sejuku.net/blog/71492

これによると、```git remote add ~~```
とやればよいらしい。
リポジトリは予め作っていたので、こことsshで。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748491/d701ff2b-7772-ae1b-a7a2-ad754f5a4f5f.png)

```
zombie@DESKTOP-JLU30CD:~/working/typescript$ git remote add origin https://gitlab.com/ZombiePG/react_ts_practice
zombie@DESKTOP-JLU30CD:~/working/typescript$
```

問題なく通った。pushしてみる

```
zombie@DESKTOP-JLU30CD:~/working/typescript$ git push origin master
Username for 'https://gitlab.com': ^C
```

httpsになっているため、こちらの記事を参考にsshのパスを.git/configファイルに上書き

```
[remote "origin"]
url = https://gitlab.com/ZombiePG/react_ts_practice
fetch = +refs/heads/*:refs/remotes/origin/*
```
↓↓↓↓↓↓
```
[remote "origin"]
url = git@gitlab.com:ZombiePG/react_ts_practice.git
fetch = +refs/heads/*:refs/remotes/origin/*
```

保存。一応確認。
``` git remote -v ```は向き先がわかる。
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ git remote -v
origin  git@gitlab.com:ZombiePG/react_ts_practice.git (fetch)
origin  git@gitlab.com:ZombiePG/react_ts_practice.git (push)
```

push！！！

```
zombie@DESKTOP-JLU30CD:~/working/typescript$ git push origin master
remote:
remote: ========================================================================
remote:
remote: ERROR: The project you were looking for could not be found or you don't have permission to view it.

remote:
remote: ========================================================================
remote:
fatal: Could not read from remote repository.

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

へ？？？？過去の記憶から、「たしかキーの再発行で片付いたなー」って気がした。
ということで、参考にしてみた。sshKeyを再発行
https://qiita.com/GakuNaitou/items/81dbbd3ea6211af71648
https://wing-degital.hatenablog.com/entry/2020/01/03/175752
https://qiita.com/dsuke3san/items/f9ce2b689b46b3d182a9

```
zombie@DESKTOP-JLU30CD:~/working/typescript$ ssh-keygen -t rsa -C ＜＜自分のアカウントに紐づくアドレス＞＞
```

さて、push！！！
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ git push origin master
remote:
remote: ========================================================================
remote:
remote: ERROR: The project you were looking for could not be found or you don't have permission to view it.

remote:
remote: ========================================================================
remote:
fatal: Could not read from remote repository.

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

はい？？？？？？
こちらの問題は、下記を実施で解決しました。
GitLabにて、
各種リポジトリをクリック>>>左のメニューバーより【設定】>>>【リポジトリ】>>>【Deploy keys】をクリック
**Grant write permissions to this key** (DeepL翻訳:このキーに書き込み権限を付与する)にチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748491/50786903-e46f-cb36-15aa-5d6c0dda0ca9.png)

以上で、無事にpushすることができました。

### 最後に
tsの勉強がある程度片付いたら、ゲームのapiを公開してるところに絞って、Webサイトでも作ろうかなと思っています。(公開するかはさておき)
なにはともあれ、Git連携できてよかったです。
最後まで読んでいただき、ありがとうございます！