11
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-06-12

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

試行錯誤の結果、特にこだわりがなければ
大抵のバージョン管理機能はMicrosoft製コードエディタ「VSCode」内で実現できる
と分かったので、本記事で紹介したいと思います
gitgraph_mini.png
RaspberryPiでこんなに美しいツリー表示ができる感動を、ぜひ皆さんも味わってください!

#システム構成
下図のような構成でバージョン管理をします。
vscode_raspi_github.png
上記構成で、
 ・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_remote1.png
リポジトリ名、公開の有無を入力し、Create repositoryします
create_remote2.png
以上でリモートリポジトリが作成されました。この時点で中身は空ですが、気にしないでください。
ここで出てくるアドレスは後で使うので、控えてください
create_remote3.png

##③Gitでローカルリポジトリ作成
Gitにより、ローカルでバージョン管理できる環境を構築します
###ユーザ名とメールアドレスの登録
※最初の1回のみの操作です
(参考にさせて頂いた記事)
リポジトリ作成に必要な、ユーザ名とアドレスを登録します。

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

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

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

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

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

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

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

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

コミット名(自分で適当に決めてください)を指定してコミットします
commit.png

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

##④Git Graphによる可視化
Git Graphは、VSCode上でブランチをGUI可視化できるアドインです。
###Git Graphのインストール
下記手順で、Git GraphをRaspberryPi内にインストールします
install_gitgraph.png

###Git Graphによるツリー可視化
ブランチのツリー構造が可視化できます。
gitgraph.png
カラフルで非常に分かりやすいので、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_vscode.png
Githubのログインユーザ名とパスワードを入力します
github_vscode2.png
Authorize Githubボタンを押します
github_vscode3.png
VSCodeに戻るとGithubパスワード入力が求められるので、入力
github_vscode4.png

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

git push -u origin master

下記認証が求められるので、Open
github_vscode5.png
Githubユーザ名が求められるので、入力
github_vscode6.png
成功したら以下の画面が出るようです。
github_vscode7.png

##⑥リモートからローカルへのリポジトリクローン
⑤とは逆に、リモート上に存在するリポジトリを、ローカルにクローン(複製)する方法を解説します。

###リモートリポジトリのURL取得
Githubのリモートリポジトリにアクセスし、「Clone or Download」をクリックします
githubclone.png
出てきたURLを控えます
githubclone2.png

###ローカルリポジトリをクローン
VSCodeで、リポジトリを作成したいフォルダ(リポジトリの上位フォルダとしたい場所)を開きます
openrepofolder.png

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

git clone 上で控えたURL

###クローンされていることを確認
クローンで新たにできたフォルダを開きます
openclonefolder.png

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

上記リポジトリはもちろんリモートと紐づいているので
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のバージョン管理タブを使用します。
version_kanri.png
※Git Graphからも実行できますが、ここではFetch以外は割愛します

・Checkout(ローカル内でブランチ切替)
Checkout to…をクリック
1_git_checkout1.png
チェックアウト先のブランチ名をクリックします
1_git_checkout2.png

・新しいブランチの作成
Checkout to…をクリック
1_git_checkout1.png
Create New Branchをクリックし、新たなブランチ名を入力してEnterします
2_create_new_branch.png

・Stage(ファイルをコミット対象に追加)
更新対象に加えたいファイルを「+」ボタンでコミットに追加します
selectcommit.png

・Commit(コミットしてバージョン更新)
更新対象に加えたいファイルを「+」ボタンでコミットに追加します(上記Stageと同じ)
selectcommit.png
コミット名(自分で適当に決めてください)を指定してコミットします
commit.png

・Merge参考
マージ先ブランチにチェックアウトしたのち、Ctrl+Shif+Pでコマンドパレットを開く
「Git:merge‥」と打ち、見つかった「Git:Merge Branch」をクリック
5_git_merge_branch.png
マージ元ブランチを選択
6_select_merge_branch.png
Git Graphでブランチの線が合流していたら成功です!
gitgraph_mini.png

・Push(ローカル→リモートに更新内容反映)
Pushをクリック
1_git_push.png

・Pull(リモート→ローカルに更新内容反映)
Pullをクリック
1_git_pull.png

・Fetch
Git Graph画面の、雲のマークをクリック(※Git Graphの機能を使用します)
1_git_fetch.png

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

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

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

11
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?