GitHub, GitLab, Visual Studio Codeでリポジトリの作成・連携を行う

## はじめに
今回はGitHub,GitLabでリポジトリ作成と連携、
Visual Studio Code(VSCode)からGitLabへの連携を行えるようにします。
今後作成する設計書やコードをこちらで管理・運用していきます。
## イメージ
やりたいことのイメージは下記になります
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/286b1771-d405-3729-dee8-279df062327b.png)
GitLabとGitHubの利用目的ですが、GitLabはシステム開発を楽にするため、
GitHubは開発したシステムを他の方に連携するためです。
就職や転職をする際にはGitHubの成果物を見せることがあるので、
自動連携しておけば管理が楽になります。

## 目次
1. GitHubでリポジトリを作成する
2. GitLabでリポジトリを作成する
3. GitLabと連携するためのキーを発行する
4. GitHubとの連携を行う
5. テスト
6. VSCodeとGitLabを連携する
7. テスト

# 手順
## 1. GitHubでリポジトリを作成する
まずはGitHubで新規リポジトリを作成します。
GitHub公式サイト（ https://github.com/ ）へアクセスして、
Newのボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/f06c96fb-85ed-5fb3-b0a3-cd9dea75f400.png)
リポジトリ名と公開(Public)・非公開(Private)を決めて”Create Repository”ボタンを押下します。![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/703cb154-b34a-04cf-5be4-bb36cc712c86.png)
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/3ecd7cef-6625-073c-e853-c287b1ffb03a.png)
無事作成できました。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/fab20e9c-8517-e09b-2249-cd526f052c09.png)

## 2. GitLabでリポジトリを作成する
公式サイト（ https://about.gitlab.com/ja-jp/ ）へアクセスして、
”無料トライアルを入手”からアカウント新規作成・ログインを行います。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/070030c9-1728-f5d2-22f9-8b08d8e5193c.png)
”New project”ボタンを押下
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/8f00b6d8-f074-2630-761c-72997bd99275.png)
”Import project”ボタンを押下
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/6e19c1c3-707f-8520-e5cf-2d0d4b771b30.png)
”GitHub”ボタンを押下
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/fd1160ec-95fb-a2ab-1dc1-dd0d0fbe3a63.png)
GitHubで作成したリポジトリの一覧が表示されます
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/ec98a07b-fdb6-ce0a-6e48-cfeb157bbacf.png)
GitHubで作成したリポジトリの”Import”ボタンを押下します
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/36416706-7858-e3a1-6f6c-5163cb43ce47.png)
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/4a5ea596-b986-0d00-1d7d-9f194cb73f39.png)
無事作成されると、Projectsに追加されます
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/f565a4f0-9d13-da6f-60a0-b1e7b2d87c81.png)
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/38ae79c6-3c46-cfd0-c748-56b5dbc7d330.png)

## 3. GitLabと連携するためのキーを発行する
GitHubで右上のプロフィール　→　Settingsを押下します
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/2facf710-0be1-0720-d712-ce9bbc0eb714.png)
”Developer settings”を押下
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/c7df7d33-f66b-1043-899c-fe69fd71650b.png)
“Tokens”を押下して、”Generate a personal access token”を押下します
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/4feb4b78-dbe0-3486-3d6a-fc8655f1a1cb.png)
Noteには適当な文言を入力。
Expirationは”No explation”を選択。
repoはすべてチェックを入れて、”Generate token”ボタンを押下します
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/04fc5787-4786-f698-0d85-a09ecc57f58c.png)
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/fa81732c-c8a4-0ba4-a1af-9855f46daf19.png)
GitLabと連携するためのキーが作成されました
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/e1b25c96-cd94-f3a9-1442-b9791922d5e1.png)


## 4. GitHubとの連携を行う
GitLabでGitHubからImportしたプロジェクトを開き、
Settings　→　Repositoryボタンを押下します
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/0547af0d-76fb-fd4d-2894-9727db6aa69a.png)

“Mirrored repositories”を開きます。
“Git repository URL”には、GitHubで作成したリポジトリのURLを貼り付けます。
“Password”には、先程GitHubで作成したキーを貼り付けます。
“Mirror repository”ボタンを押下すれば完了です。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/d1b68d16-823b-6afa-40da-5816f9571f92.png)

“Git repository URL”はGitHubのリポジトリを開き、
“<> Code”ボタンを押下するとURLが表示されるので、そちらをコピペします。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/d102a47e-bda7-7048-7431-79138408f293.png)

## 5. テスト
GitHubとGitLabがうまく連携できているか確認をしてみます。
GitLabで連携したリポジトリのファイルを編集します。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/50cb4ba9-ca48-ac4f-205a-70d33e61a9fc.png)
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/23767803-c942-7be5-63c8-ac703618fa7a.png)

編集後GitHubを更新してみると、無事更新されていることが確認できました。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/f7dd2151-f9c4-0f99-33d9-b0b2ff35ffc8.png)

## 6. VSCodeとGitLabを連携する
GitLabからリポジトリを開き、”Code”の”Clone with HTTPS”をコピーします。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/fd93190b-902b-9eed-fbbe-b07a0f6885b1.png)

Git CMDを開き、リポジトリを作成したい場所へ移動して、クローンコマンドを実行します
場所の移動： cs “作成した場所のディレクトリ”
クローンコマンド：git clone “GitLabでコピーしたURL”
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/89663b5c-4411-306b-14d5-5139a56384d7.png)

無事フォルダの作成に成功しました
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/1bd514c4-276f-26e6-b341-6e6f044b64a0.png)

## 7. テスト
VSCodeを起動、”フォルダーを開く”を押下して、
先程作成したクローンフォルダを選択します。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/bae473b4-9880-80c4-43ee-809b057cbf22.png)

ファイルを修正します
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/9d4bbe83-8778-4364-3146-dfb5280ddfac.png)

コメントを入力して、”コミット”ボタンを押下します
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/390d43a1-29a5-ed80-1da4-c5ba5aa5d2d0.png)

”変更の同期”ボタンを押下します
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/f80d5de6-fb06-2adb-3db1-fb1295a18db5.png)

GitLabを更新すると、VSCodeで修正した内容が無事更新されていることを確認できました。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/78d1e186-2ba4-166c-f651-11a8a6f11900.png)

ついでにGitHubも更新してみると、こちらも修正内容が反映されていることを確認できました。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/d8b0b72c-3b0f-0435-3483-30ab5d925aa9.png)