RaspberryPi内のバージョン管理をVSCodeで美しく実現

RaspberryPiとバージョン管理

安価でハイスペックなRaspberryPi！
しかし、ハイスペックゆえにコードの規模や台数が増えると、
「どのコードが最新か分からん」問題！！
が発生します。そんなとき役立つのがバージョン管理です。

試行錯誤の結果、特にこだわりがなければ
大抵のバージョン管理機能はMicrosoft製コードエディタ「VSCode」内で実現できる
と分かったので、本記事で紹介したいと思います

RaspberryPiでこんなに美しいツリー表示ができる感動を、ぜひ皆さんも味わってください！

システム構成

下図のような構成でバージョン管理をします。

上記構成で、
　・CommitやPush、Pull等のGitコマンド操作
　・Cloneによる複数のローカルリポジトリの同期
　・GUIによるブランチの可視化（冒頭のキレイな図）

を、PC内のVSCodeからSSH遠隔接続のみで実現可能です。
ラズパイに画面接続不要なので、とてもフレキシブルな管理ができます！

※「バージョン管理ってなんやねん！」「Gitわからん！」という方は、こちらの記事が分かりやすいです。
プログラミングに関わるのであれば絶対役立つツールなので、これを機に学習されても良いかと思います。

必要なもの

・RaspberryPi (本例ではRaspberryPi4 ModelB)
・上記と同じネットワークにつながったPC (本例ではWindows10)
・Visual Studio Code 1.39.2以降（上記PCにインストール、本例では1.44.2使用）

手順

①VSCodeによるSSH接続のセットアップ
②Githubでリモートリポジトリ作成
③Gitでローカルリポジトリ作成
④Git Graphによる可視化
⑤ローカルリポジトリとリモートリポジトリの連携
⑥リモートからローカルへのリポジトリクローン

詳細

①VSCodeによるSSH接続のセットアップ

こちらを参考に、PC上のVSCodeからRaspberryPiにSSH接続できる環境を構築してください

②Githubでリモートリポジトリ作成

バージョン管理のマスターとなるリモートリポジトリをGithubで作成します。
RaspberryPi内にGitサーバを立てる事もできるようですが、今回はWEB上で手軽に管理できるGithubを使用します。

Githubアカウント作成

こちらを参考にGithubのアカウントを作成してください

リモートリポジトリ作成

GithubトップからNewをクリックします

リポジトリ名、公開の有無を入力し、Create repositoryします

以上でリモートリポジトリが作成されました。この時点で中身は空ですが、気にしないでください。
ここで出てくるアドレスは後で使うので、控えてください

③Gitでローカルリポジトリ作成

Gitにより、ローカルでバージョン管理できる環境を構築します

ユーザ名とメールアドレスの登録

※最初の1回のみの操作です
（参考にさせて頂いた記事）
リポジトリ作成に必要な、ユーザ名とアドレスを登録します。

「Terminal」→「New Terminal」でコンソールを開き

下記コマンドでユーザ名とアドレスを登録します
※ダブルクオーテーションはユーザ名のみ必要

git config --global user.name "ユーザ名"
git config --global user.email メールアドレス

リポジトリの作成

※管理対象のコードが既に作成されている前提です

下記手順で、管理したいフォルダを開きます

下記手順で、リポジトリを初期化します

更新対象に加えたいファイルを「＋」ボタンでコミットに追加します

※管理対象に加えたくないファイルは、右クリックして「Add to .gitignore」で除外可能です。
.gitignoreの記法についてはこちらが分かりやすいです。

コミット名（自分で適当に決めてください）を指定してコミットします

これでGitによるローカルでのバージョン管理ができるようになりました。

④Git Graphによる可視化

Git Graphは、VSCode上でブランチをGUI可視化できるアドインです。

Git Graphのインストール

下記手順で、Git GraphをRaspberryPi内にインストールします

Git Graphによるツリー可視化

ブランチのツリー構造が可視化できます。

カラフルで非常に分かりやすいので、RaspberryPiのみならずPC内のバージョン管理にもおすすめです。

Bashで管理したい人はVSCodeのターミナルで
GUIで管理したい人はVSCodeのGit Graphで
といった具合に、流派を問わずSSHで遠隔管理できるVSCode、素晴らしすぎます！！

具体的な方法は本記事の最終章で解説します。

⑤ローカルリポジトリとリモートリポジトリの連携

RaspberryPi内に作成したGitローカルリポジトリと、Github上に作成したリモートリポジトリを連携させます。
これにより万が一RaspberryPiが壊れてもコードを復旧できますし、他のRaspberryPiにコードをクローンすることもできます。

ターミナルで下記コマンド実行し、ローカルリポジトリのあるフォルダに移動します

cd ローカルリポジトリのパス

下記コマンドを実行し、ローカルリポジトリとGithubリモートリポジトリを紐づけます

git remote add origin ②の最後に控えたURL

下記コマンドで、ローカルの内容をリモートにPush（アップロード）します
※ブランチ名は「master」である前提です

git push -u origin master

ブラウザが開いて認証を求められるのでContinueします

Githubのログインユーザ名とパスワードを入力します

Authorize Githubボタンを押します

VSCodeに戻るとGithubパスワード入力が求められるので、入力

私の場合、このタイミングでエラー（タイムオーバー？）が出て終了してしまったので、再度下記コマンドを実行しました
※ここを見る限り、Edgeが既定のブラウザとなっているとエラーが出やすいようなので、Chromeをデフォルトにした方が良いようです。

git push -u origin master

下記認証が求められるので、Open

Githubユーザ名が求められるので、入力

成功したら以下の画面が出るようです。

⑥リモートからローカルへのリポジトリクローン

⑤とは逆に、リモート上に存在するリポジトリを、ローカルにクローン（複製）する方法を解説します。

リモートリポジトリのURL取得

Githubのリモートリポジトリにアクセスし、「Clone or Download」をクリックします

出てきたURLを控えます

ローカルリポジトリをクローン

VSCodeで、リポジトリを作成したいフォルダ（リポジトリの上位フォルダとしたい場所）を開きます

ターミナルで下記コマンドを実行し、クローンを実施します

git clone 上で控えたURL

クローンされていることを確認

クローンで新たにできたフォルダを開きます

Git Graphでブランチを表示させ、リモートリポジトリの内容が再現されていれば成功です

上記リポジトリはもちろんリモートと紐づいているので
Push：ローカルからリモートにブランチ更新内容反映
Pull：リモートからローカルにブランチ更新内容反映
Fetch：リモートの更新情報を取得
することができます

各種コマンド

上記で初期設定は終わりです。
実際にGitの各種コマンドを実行する方法を下記します

ターミナル

これは通常のGit Bashと同じコマンドを、VSCodeのターミナルから打つだけです
cdでリポジトリのあるフォルダに移動してから、下記コマンドを実行してください
・Checkout（ローカル内でブランチ切替）

git checkout ブランチ名

・新しいブランチの作成

git checkout 元となるブランチ名
git checkout -b 作成するブランチ名

・Stage（ファイルをコミット対象に追加）

git add .

※git addのオプションはこちら参照

・Commit（コミットしてバージョン更新）

git commit -m "コミット名"

・Merge（ブランチ同士を結合）

git checkout マージ元のブランチ名
git merge マージ先のブランチ名

※マージ後に結果のログがnanoかvimで表示されます

・Push（ローカル→リモートに更新内容反映）

git push origin ブランチ名

・Pull（リモート→ローカルに更新内容反映）

全ブランチ一括Pull

git pull

特定のブランチのみPull

git pull origin ブランチ名

・Fetch（リモートの更新情報を取得）

git fetch

GUI

VSCodeのバージョン管理タブを使用します。

※Git Graphからも実行できますが、ここではFetch以外は割愛します

・Checkout（ローカル内でブランチ切替）
Checkout to…をクリック

チェックアウト先のブランチ名をクリックします

・新しいブランチの作成
Checkout to…をクリック

Create New Branchをクリックし、新たなブランチ名を入力してEnterします

・Stage（ファイルをコミット対象に追加）
更新対象に加えたいファイルを「＋」ボタンでコミットに追加します

・Commit（コミットしてバージョン更新）
更新対象に加えたいファイルを「＋」ボタンでコミットに追加します（上記Stageと同じ）

コミット名（自分で適当に決めてください）を指定してコミットします

・Merge（参考）
マージ先ブランチにチェックアウトしたのち、Ctrl+Shif+Pでコマンドパレットを開く
「Git:merge‥」と打ち、見つかった「Git:Merge Branch」をクリック

マージ元ブランチを選択

Git Graphでブランチの線が合流していたら成功です！

・Push（ローカル→リモートに更新内容反映）
Pushをクリック

・Pull（リモート→ローカルに更新内容反映）
Pullをクリック

・Fetch
Git Graph画面の、雲のマークをクリック（※Git Graphの機能を使用します）

さいごに

以上がVSCodeによるRaspberryPiバージョン管理方法の概要です。

通常のバージョン管理以外にも、あるRaspberryPiで作ったコードを移植したいときにCloneを使う等、応用の可能性は広いと思います。

バージョン管理は骨が折れる作業ですが、キレイな画面で楽しく管理できればと思います！