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

プログラミング

GitLab.comに登録

GitLabには、クラウドサービス版のGitLab.comとダウンロード型のGitLab CE/EEがあります。
普通にバージョン管理するなら、GitLab.comに登録すればOKです。

 

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

 

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

 

ユーザー情報を入力します。

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

 

Gitのインストール

次に自分のPCにGitを導入します。ここでは、Windowsでのインストール方法を紹介します。

Git for Windowsのページから、Gitのインストーラーをダウンロードします。
ダウンロードが完了したら、インストーラーをダブルクリックします。

インストール時の設定

画像のとおりに選択して、「Next」を押して進めていけば大丈夫です。

 

 

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

すると、VSCode内で「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」を準備します。

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 "[あなたの名前]"
git config --global user.email [メールアドレス]

[あなたの名前]と[メールアドレス]は、それぞれ自分のものに変更してください。

 

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

git config --global core.quotepath false

SSH鍵の生成

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

cd C:\Users\[ユーザー名]\
mkdir .ssh

 

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

cd .ssh
ssh-keygen -t rsa -f id_rsa_for_gitlab -b 4096 -C "[メールアドレス]"

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

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

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

パスワードを設定したほうがセキュリティは強固になりますが、面倒くさいのでパスワードを設定しなくてもOKです。

パスワードを設定しない場合は、そのまま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:
[キーNo.] [メールアドレス]
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キーの有効期限を設定できますが、特に期限を設ける必要がなければ空欄のままでOKです。

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

 

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

ssh -T gitlab.com

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

The authenticity of host 'gitlab.com [IPアドレス]' can't be established.
ECDSA key fingerprint is [キーNo.]
Are you sure you want to continue connecting (yes/no)?

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

Warning: Permanently added 'gitlab.com, [IPアドレス]  (ECDSA) to the list of known hosts.
Welcome to GitLab, @[GitLab ID]!

(参考元)
【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:hogehoge/test.git
git add .
git commit -m "Initial commit"
git push -u origin main

  

Gitについて学ぶ

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

これからGitを利用するのであれば、コマンドを短縮化できるエイリアス設定については知っておいたほうがいいです。Gitコマンドの入力が楽になります。

詳しくは別の方が書いた以下の記事にまとまっているので、ご覧ください。

 

また、Gitの仕組みを理解しておくことも重要です。何かエラーが出たときに対応方法が分からないと、サービス運営に支障をきたす可能性があるからです。

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

そのときのためにも、UdemyでGitについて学んでおくことをおすすめします。中でもおすすめの動画は「もう怖くないGit!チーム開発で必要なGitを完全マスター」です。

Gitの仕組みについて分かりやすく解説されているだけでなく、実際にGitをインストールして手を動かしながら学習できます。

Gitを使った開発手順の流れも学習できるので、チーム開発に必要な知識も習得できます。

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