Visual Studio Code(VS Code)とGitLabを連携させる

プログラミング

GitLab.comに登録

GitLabには、クラウドサービス版のGitLab.comとダウンロード型のGitLab CE/EEがある。
個人で開発するならば、GitLab.comに登録すればいい。

 

まずは、右上の「Sign in」をクリックする。

 

次に、「Register now」をクリックする。

 

ユーザー情報を入力する。

または、GoogleアカウントやTwitterアカウントで登録することができる。

 

Gitのインストール

次に、自分のPCにGitを導入する。ここでは、Windowsでのインストール方法を紹介する。
Git for Windowsのページから、Gitのインストーラーをダウンロードする。
ダウンロードが完了したら、インストーラーをダブルクリックする。

 

インストール時の設定

画像のとおりに選択して、「Next」を押して進めていけばよい。

 

 

Gitで使用するデフォルトのエディターで、Visual Studio Codeを選択する。

こうすることで、

こうすることで、Gitをコマンドプロンプトから使用できるようになる。

すると、VS Code内で「Ctrl + @」のショートカットキーでコマンドプロンプトとソースコードの切り替えることで、すぐにGitコマンドを打つことができる。

 

 

 

 

 

 

 

 

 

最後に「Install」を押すことで、インストールが完了する。

(参考にした記事)[Windows] Visual Studio CodeでGithub・Gitlab・Bitbucketそれぞれにssh接続する

 

GitLab.comにSSHで接続する

VS Code内からGitLabへコードをPushできるようにするためには、SSHで接続する設定を行わないといけない。

以下、そのための設定を行っていく。

 

Win32-OpenSSHのダウンロード

GitLab.comにSSH接続する準備を行う。

Win32-OpenSSHのダウンロードページからZipファイルをダウンロードする。
最新のファイルの32bit版、もしくは64bit版(ほとんどのPCは64bit版)をダウンロードする(画面が黒いのはPC設定によるものなので、気にしないでください)。

ダウンロード後ファイルを解凍し、フォルダ名をOpenSSHとして「C:\」にコピーする。

 

環境変数の設定

次に、Win32-OpenSSHへのパスを通す。

コントロールパネルを開き、「システムとセキュリティ」→「システム」→「システムの詳細設定」→「環境変数」を選択する。

 

システム環境変数の「Path」に「C:\OpenSSH」を追加する。

 

 

システム環境変数に新規で変数名「GIT_SSH」、変数値「C:\OpenSSH\ssh.exe」を追加する。

 

 

Gitの設定

次にGitの設定を行う。

まずはコマンドプロンプト、もしくはPowerShellを立ち上げる。

GitLabに登録したときのユーザー名とメールアドレスを設定するために、以下のコマンドを入力する。

git config --global user.name "[your_name]"
git config --global user.email [your_mail_address]@[your_mail_domain]

[your_name]と[your_mail_address]@[your_mail_domain]は、それぞれ自分のものに変更してください。

 

さらに、Gitで日本語ファイルが文字化けするのを防ぐために、以下のコマンドを入力する。

git config --global core.quotepath false

 

SSH鍵の生成

ユーザーアカウントフォルダ内に、「.ssh」フォルダを作成する。

次に、以下のコマンドを実行する。

cd C:\Users\[User Name]\
mkdir .ssh

[User Name]は、自分のPCのユーザー名に変更してください。

 

.sshフォルダ内に、公開鍵、秘密鍵を生成するために、以下のコマンドを実行する。

cd .ssh
ssh-keygen -t rsa -f id_rsa_for_gitlab -b 4096 -C "[your_mail_address]@[your_mail_domain]"

すると、パスワードの入力を促される。

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

何も入力しなければ、パスワードなしとなる。

パスワードを設定したほうがセキュリティは強固になるが、僕は面倒くさいのでパスワードを設定しなかった。

パスワードを設定しない場合は、そのままEnterを押す。

 

すると、以下のメッセージが表示され、SSH鍵の生成が完了する。

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:
[Key Number] [your_mail_address]@[your_mail_domain]
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]-----+

 

Gitのconfigを追加

以下のコマンドを入力して、.ssh内に「config」というファイルを作成する。

type nul > config

以下のコマンドで、「config」ファイルに設定内容を記載する。

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

 

GitLab.comに公開鍵を登録

作成したSSH鍵をGitLab.comに登録する。

GitLab.comにログインし、右上のアイコンをクリックする。

 

表示されたメニューの「Edit profile」もしくは「Preferences」を選択する。

 

すると、左側にサイドメニューが表示されるので、その中の「SSH鍵」を選択する。

 

表示された画面の「キー」のところに、公開鍵の番号を入力する。

公開鍵の番号は以下のコマンドをコマンドプロンプトに入力することで表示できる。

type id_rsa_for_gitlab.pub

表示された「ssh-rsa」から始まる番号をコピペする。

 
「タイトル」のところは分かりやすいものを入力すればいい。秘密鍵のファイル名の「id_rsa_for_gitlab」とでもしておけばいいだろう。

「Expires at」でSSHキーの有効期限を設定できるが、特に期限を設ける必要がなければ空欄のままにする。

入力が終われば、「キーを追加」をクリック。

 

最後に以下のコマンドで、SSH接続ができるかどうかを確認する。

ssh -T gitlab.com

すると、以下のテキストが表示されるので、「yes」と入力してEnter。

The authenticity of host 'gitlab.com ([IP_address])' can't be established.
ECDSA key fingerprint is SHA256:HbW3g8zUjNSksFbqTiUWPWg2Bq1x8xdGUrliXFzSnUw.
Are you sure you want to continue connecting (yes/no)?

うまく設定できている場合、以下のテキストが表示され、SSH接続が完了となる。

Warning: Permanently added 'gitlab.com,[IP_address]  (ECDSA) to the list of known hosts.
Connection closed by [IP_address] [port_number]

(参考にした記事)

【GitLab】SSH認証キー(公開鍵)を登録する

VisualStudioCodeとgitlabを使ってバージョン管理をしてみた備忘録

 

GitLabにコードをPush

実際にGitLabにコードをPushしてみる。

 

まずは、GitLab.com内にプロジェクトを作成する。

GitLab.comにログインした後のトップページで、右上の「新規プロジェクト」をクリック。

 

「Create blank project」を選択する。

 

「プロジェクト名」と「プロジェクトの説明」(任意)を入力する。

そして、「プロジェクトを作成」をクリック。

すると、プロジェクトの作成が完了する。

表示された画面の中ほどに、「既存のフォルダをプッシュ」というものがある。

そこに書かれたコマンドを実行すれば、GitLab.comにコードをPushできる。

cd existing_folder
git init
git remote add origin git@gitlab.com:create-fecundity/test.git
git add .
git commit -m "Initial commit"
git push -u origin main

  

Gitについて学ぶ

ここまで、VS CodeとGitLabを連携させる方法を紹介してきた。

ただ、そもそもGitの仕組みを理解しておかないと何かエラーが出たときに対応できない。

特に、チーム開発をやるのであれば、マージのときにコンフリクトといったエラーは頻繁に起きる。

そのときのためにも、UdemyでGitについて学んでおくことをおすすめする。

タイトルとURLをコピーしました