#はじめに
初めてGitLabとVScodeを連携させたときはスムーズに出来たのに、別のPCでやったら出来なくて苦労したので忘れないようにメモしておきます。
これから初めてVScodeとGitLabを連携させる人や、あんまり詳しくないよって人向けです。
#環境
Windows 10 64bit
VScode
Japaneseキーボード設定
#参考サイト
GtiLabとVScodeを連携させたときに、こちらのサイトを参考にさせて頂きました。
本記事でも引用させて頂いています。
どちらも見やすく分かりやすく、参考にしやすいです。
・Visual Studio Code（VS Code）とGitLabを連携させる
・VisualStudioCodeとgitlabを使ってバージョン管理をしてみた備忘録
#1. GitLabとGitとVScodeのインストール
1. GitLabとGit
たくさんの参考になるサイトがありますが、こちらのサイトを参考に私はやりました。
Visual Studio Code（VS Code）とGitLabを連携させる
2. Gitをインストールするときの選択肢について
Gitのバージョンによって表示されている文字やチェックボックスの数が違いますが、文章をよく読んで正しいラジオボタンを選んでください。
チェックボックスが現時点で1つ増えていました。最後に1つ追加されていたので、私はチェックを付けました。
3. VScode
こちらの公式サイトからダウンロード出来ます。
https://code.visualstudio.com/
インストール中に「追加タスクの選択」が表示されて、チェックボックスが出てきたら、全部にチェックをつけておくと良いかなと個人的には思います。
#2. OpenSSHのダウンロードと環境変数の設定
1-1.と同じサイトを参考に、OpenSSHのダウンロードと環境変数の設定を行います。
詳細に書かれていて分かりやすい…!
Visual Studio Code（VS Code）とGitLabを連携させる
#3. GitとGitLabで使う公開鍵を作成する
1. VScodeのターミナル(PowerShell)を起動
VScodeを起動してCtrlと@を押してターミナルを起動します。画面した半分にターミナルが起動したら、右にPowerShellと書いてある想定で進めます。
もしPowerShellじゃない場合は、Google先生で検索してPowerShellに切り替えると、今後も同じ画面で見てもらえます。
検索キーワード例「VScode ターミナル PowerShell 切り替え」
2. GitにGitLabのユーザー情報を覚えさせる
GitLabにサインインするときに、GitHubや他のサービス情報を使ってサインインしている場合、エラーが起きるかもしれないらしい…
なので、念の為にGitLabのUser Settingからメールアドレスとパスワードを設定しておきます。
1行ずつでもまとめてでも良いのでVScodeターミナルにコピペしてEnterします。
"Sample123" -> GitLabユーザー名にして、"で囲ってあげます。
"sample555@gmail.com" -> GitLabに登録しているメールアドレスにして、"で囲ってあげます。
git config --global user.name "Sample123"
git config --global user.email "sample555@gmail.com"
git config --global core.quotepath false
git config --global core.editor "code --wait"
3. SSH Keyの作成
表示しているディレクトリを必要に応じて移動します。
User99というユーザー名にログオンしている場合はC:\Users\User99\となるようにします。表示されているディレクトリがログオンユーザー名ではない場合は、下記をコピペしてディレクトリを移動してください。
ユーザー名にスペースが入っている場合は"C:\Users\User 99\"のように、"で囲ってあげます。
なんだか分からない場合は、エクスプローラーを使って、Cドライブから掘っていけば分かります。
cd C:\Users\User99
ディレクトリの表示がPS C:\Users\User99>になったら、次に.sshという新しいディレクトリを作成します。
エクスプローラーで確認しても見れるようになっているはずです。
もし見れなければ、エクスプローラーの表示設定で「隠しファイル」を見れるようにしてみてください。
mkdir .ssh
.sshディレクトリが作成されたら、そこに移動します。
cd C:\Users\User99\.ssh
.sshに公開鍵と秘密鍵を作成します。
先程と同じくsample555@gmail.com -> GitLabに登録しているメールアドレスですが、今回も"で囲みます。
ssh-keygen -t rsa -f id_rsa_for_gitlab -b 4096 -C "sample555@gmail.com"
こちらの表示がされたらなにも入力せずにEnterを押します。
個人で使うにはパスワードなくてもいいと思うので、設定しません。
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
下のような結果が返ってきます。The key fingerprint is:の下のSHA123:nijgangaehoii66w0an3w22nn sample@gmail.comはメールアドレス以外適当に入力しています。
Your identification has been saved in id_rsa_for_gitlab.
Your public key has been saved in id_rsa_for_gitlab.pub.
The key fingerprint is:
SHA123:nijgangaehoii66w0an3w22nn sample@gmail.com
The key's randomart image is:
+---[RSA 4096]----+
| |
| . . |
| * o . |
| o B B o . |
| . O B S + |
| .+ O + + . |
| ooO =.o o o |
| EO.= +oo + |
| +o*oo...o |
+----[SHA256]-----+
4. Git用のconfigファイルを作成する
コマンドプロンプトを起動します。ターミナルで実行すると、BOMがくっついてしまい、後々エラーになったのでコマンドプロンプトでやります。
コマンドプロンプトは、Winキーを押して、cmdとうったら出てくるので、右クリックして管理者として実行を押してください。
個人的に管理者のが無難な気がしています。
管理者として実行するとディレクトリの位置がC:\WINDOWS\system32>になっているかと思います。
こちらのコマンドを入力して、ディレクトリ位置を設定します。
2回目ですが、User99は自分のログオンしているユーザー名です。
cd C:\Users\User99\.ssh
これでディレクトリの表示がこちらになったと思います。
C:\Users\User99\.ssh>
.sshディレクトリ内に空のconfigというファイルを作成します。
下のコマンドを入力して実行してください。
type nul > config
configファイルの中にこちらの情報を書き込みます。
1行ずつでもまとめてでも良いのでコマンドプロンプトにコピペしてEnterです。
echo Host gitlab.com >> config
echo User git >> config
echo Hostname gitlab.com >> config
echo IdentityFile ~/.ssh/id_rsa_for_gitlab >> config
echo IdentitiesOnly yes >> config
#4. 公開鍵をGitLabに登録してSSH Keyを設定する
1. 公開鍵をコピーする
VScodeのターミナルに戻って下のコマンドを実行すると、作成した公開鍵が表示されます。
ssh-rsaから始まりメールアドレスで終わる長い文字です。ssh-rsaからメールアドレスまで全部コピーします。
type id_rsa_for_gitlab.pub
2. 公開鍵をGitLabに登録する
ブラウザでGitLabを開きます。右上のユーザーアイコンをクリックして、Edit profileをクリックします。
画面左にSSH Keysというメニューがあるのでクリックします。画面左に見つからない場合は、サイドメニューがたたまれているので、左下にある>>をクリックしてメニューを展開すると分かりやすいです。
Add an SSH keyという入力フォームが表示されるので、Keyと書いてある大きいフォームにコピーした公開鍵を貼り付けます。
Titleは分かりやすいように自由に設定してください。
Expires atは都合に合わせて指定してください。特に期限を設ける必要がなければ指定しません。
Add keyをクリックして作成完了です。少しするとGitLabに登録したメールアドレスに、SSH Keyが設定されたことをお知らせするメールが来ます。
特にそれに対してすることはありませんが、次のステップ以降はメールが届いてから実行してください。
3. GitLabに接続出来るか確認する
VScodeのターミナルに戻ります。
こちらのコマンドを入力、実行します。
ssh -T gitlab.com
こういった表示が出たらyesと入力してEnterします。
'gitlab.com 12.123.456.654'の中のIPアドレスは適当です。
The authenticity of host 'gitlab.com 12.123.456.654' can't be established.
ECDSA key fingerprint is SHA256:HbW3g8zUjNSksFbqTiUWPWg2Bq1x8xdGUrliXFzSnUw.
Are you sure you want to continue connecting (yes/no)?
こういったものが表示されたら成功です。
2行目のConnection closed by 12.123.456.654が表示されない場合でも気にしません。
Warning: Permanently added 'gitlab.com,12.123.456.654 (ECDSA) to the list of known hosts.
Connection closed by 12.123.456.654
念の為もう一度ssh -T gitlab.comを実行して、Welcome to GitLab, @userと表示されたら成功です。
@Userは自身のGitLabユーザー名です。
#5. VScodeにGitLabを連携させる
ここからはこちらのサイトを参考にしました。
Visual Studio Code（VS Code）とGitLabを連携させる
1. GitLabのHTTPS URLをコピーする
ブラウザでGitLabを開きます。
VScodeに同期させたいリポジトリを開きます。リポジトリがなかったり、新規で作りたい場合は作ります。
既にリポジトリがある場合は、Repositoryページの右上にCloneボタンがあるのでクリックします。
Clone With SSHとClone with HTTPSの2種類が表示されるので、Clone with HTTPSをコピーします。
新規でリポジトリを作った場合は、作成後の画面左上にCloneボタンが表示されます。
2. GitLabリポジトリをローカルに取得する
VScodeのターミナルを開きます。
こちらのコマンドを参考に実行して、GitLabリポジトリを取得したいディレクトリを選びます。
選んだディレクトリの中にGitLabリポジトリ名と同じ名前のフォルダが作成されるので、その中にコードを保存していくことになります。
保存先ディレクトリはDesktopでなくても大丈夫です。事前に作成しておいたフォルダなら何でも大丈夫です。
例えばDesktopの中にDevというフォルダを作った場合は、下のようになります。
cd C:\Users\User99\Desktop\Dev
GitLabで「Two-Factor Authentication」を有効にしているかどうかで次の手順が変わります。
GitLabで「Two-Factor Authentication」を有効にしていない場合
ディレクトリを指定したら、下のコードを実行します。
https://gitlab.com/User/directory.gitは、1.でコピーしたHTTPS URLです。
git clone https://gitlab.com/User/directory.git
実行後、Windowsセキュリティが表示され、GitLabのUser nameとPasswordが求められるので入力します。
GitLabで「Two-Factor Authentication」を有効にしている場合
ブラウザでGitLabを開き、右上のユーザーアイコンをクリックして、Edit profileをクリックします。
画面左にAccess Tokensというメニューがあるのでクリックします。
Add a personal access tokenという入力フォームが表示されるので、
Nameに好きな名前を入力し、必要に応じてExpires atを設定します。
Scopesを用途に合わせて設定しますが、本記事上はread_repositoryとwrite_repositoryにチェックを入れて、
Create personal access tokenをクリックします。
画面上部にYour new personal access tokenが表示されるので、閉じたり画面更新をせずに置いておきます。
ディレクトリを指定したら、下のコードを実行します。
1.でコピーしたHTTPS URLhttps://gitlab.com/User/directory.gitの中にoauth2:xxxxxxxxx@を追記します。
xxxxxxxxxは先程生成したaccess tokenです。
git clone https://oauth2:xxxxxxxxx@gitlab.com/User/directory.git
3. 新たなファイルを作成する
VScodeの画面左にあるエクスプローラーをクリックして開きます。
初めてVScodeを使う場合は、フォルダの選択ボタンが表示されるので、クリックしてフォルダを選択します。
選択するフォルダは2.で指定したフォルダにします。
フォルダを選択したあと、エクスプローラー内で右クリックをします。
新たなファイルというメニューあるので、クリックします。
ファイルが作成されて、ファイル名を入力できるようになるので、適当にファイル名と拡張子を入力してEnterを押します。
例えばtest.txtのようなものです。
作成したtest.txtをダブルクリックして開きます。VScode上でtest.txtが開かれるので、適当に文字を入力してCtrl + Sを押し保存します。
4. VScodeでワークスペースとソース管理プロバイダーを設定する
次に、画面左にあるソース管理をクリックします。◯3つに線がつながっているマークです。
VScodeソース管理画面に有効なソース管理プロバイダーがありません。と表示されていたら、ひし形のリポジトリの初期化マークを押してください。
フォルダ選択を促されるので、2.で指定したフォルダにします。
もしこのブランチを公開しますか？と聞かれたらOKを押します。
5. GitLabリポジトリにコードを同期する
2.を行うとソース管理アイコンに数字が表示されます。変更があったことを知らせるマークです。
コメントフォームになんでも良いのでコメントを入れて、Ctrl + Enterを押します。
すべての変更を自動的にステージして、直接コミットしますか？と聞かれたら、Yesと答えてください。
最後に、VScode画面上左下にある同期マークをクリックします。矢印が2つ描いてあり、円形になっているものです。
同期マークをクリックすると、同期していいか確認されるのでOKと答えてください。
6. 同期の確認をする
3.を行ったら、ブラウザでGitLabを開きます。同期先に選んだリポジトリにtest.txtが表示されていれば成功です！
#6. うまくいかない…
1. VScodeターミナルやコマンドプロンプトでエラー出る。
・ディレクトリが間違っていないかを確認します。
・表示されているエラーを検索して調べます。
・作成したファイルの中身や登録したデータが間違っていないか調べます。
configファイルの中身を見たいなら、こちらのコマンド。
Get-Content C:\Users\User99\.ssh\config
git config --globalで設定したデータを確認したいなら、こちらのコマンド。
cat ~/.gitconfig
リポジトリを確認したいなら、こちらのコマンド。
git remote
2. VScodeで同期マークじゃなくて雲のマーク(変更の発行)が出る
・リモートリポジトリ(GitLab)で取得したフォルダがVScodeで選択されていないので、5. VScodeにGitLabを連携させるをやり直してみます。
#7. その他
VScodeアドオン
・VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)
Gitコマンド
・【Git】基本コマンド
#8. さいごに
VScodeターミナルいったりコマンドプロンプトいったりしてますが、PCによってはターミナルでconfig作ったときにBOMが含まれていて、エラー起こしていたので、それを回避するひとつの手段としています。
PC環境によって微妙に違っていて、結構時間かけていました…
いろいろサイトを見て複数パターン試しましたが、結局は発生したエラー内容見て、それを解決すべきだなと改めて感じた作業でした。
BOMとかGitコマンドの理解とか、Gitコマンドで入力したファイル内容をひとつずつ確認するとか、初歩的なことを飛ばさずやった方が近道でした。