3
4

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.

VScodeで接続したラズパイとGitHubを連携させる話

Last updated at Posted at 2021-12-16

想定環境

windows 10
Raspberry Pi
VScode

本記事で行うこと

VScodeでSSH接続しているRaspberry PiのフォルダをGitHubと連携させる
今回は例として新しいフォルダを作成しGitHubと連携させる

事前に完了させること

  • RaspberryPiへのRaspbianインストール

この手順が完了していない人はこちらを参考に

  • VScodeのインストール
  • VScodeでRaspberryへのSSH接続

この手順が完了してないひとはこちらを参考に

  • PCのネットワーク設定

プロキシやIPの固定を行ってない人は先生の指示に従い速やかに完了させること

目次

①VScodeで連携したいフォルダを開く
②GitHubアカウントとGitの連携
③リポジトリ(フォルダ)の初期化
④GitHubでの新しいリポジトリ(フォルダ)作成
⑤実際にリモートリポジトリ(ネットワーク上のフォルダ)にアップロード
⑥GitHubの簡単な使い方
⑦途中参加する場合

手順

①VScodeで連携したいフォルダを開く

GitHubと連携させるフォルダを開く
VScodeでRaspberry Pi上のフォルダを開いてください。
今回は仮に2022というフォルダを開きます。
キャプチャ26.PNG

パスワードの入力
キャプチャ27.PNG

開きたいフォルダを指定
キャプチャ28.PNG

もう一度パスワードを入力
キャプチャ29.PNG

②GitHubアカウントとGitの連携

先ほどの手順の最後で表示されたウィンドウに以下の項目を入力する
アカウント名とメールアドレスは共有フォルダのGitの使い方に記述している。

コピー用
git config --global user.name 'アカウント名'
git config --global user.email 'メールアドレス'

プロキシ環境下ならばプロキシ設定も追加

コピー用
git config --global http.proxy http://172.16.0.2:8080
git config --global https.proxy http://172.16.0.2:8080

③リポジトリ(フォルダ)の初期化

画像の通りにVScodeを操作してリポジトリ(フォルダ)を初期化する。
キャプチャ30.PNG

しばらく待つと以下のような画面になる
キャプチャ31.PNG

もし、しばらく待っても以下のよな画面にならなければVScodeを再起動する

④GitHubでの新しいリポジトリ(フォルダ)作成

先ほどの手順で開いたフォルダとネットワーク上のフォルダを連携させる
このフォルダをリモートリポジトリと言ったりする。

GitHubログイン

海洋班のgoogleアカウントにログインしているならブックマークバーからGitHubにアクセスできる。
キャプチャ32.PNG

もし、下の写真のような画面にならなければログイン期限が切れているので再ログインする。
キャプチャ34.PNG

googleにパスワードが保存されているのでテキストボックスに入力しようとすれば自動入力してくれるはず
下の画像に従い「sign in」
キャプチャ37.PNG

もし、パスワードが表示されなければ以下の項目からパスワードを確認する。
キャプチャ35.PNG

下の画像のパスワードを表示を押すと現在使用しているPCのパスワードが要求されるので入力
キャプチャ36.PNG

正常にログインできたら下の画像のようになる
キャプチャ33.PNG

リモートリポジトリ作成

ログイン後に赤枠のnewボタンをクリック
キャプチャ33.PNG

画像の①に適切な名前を入力し②をクリック
キャプチャ41.PNG

以下の①をクリックして②をコピーする。
次の手順で②は使用するので保持しておくこと
キャプチャ42.PNG

⑤実際にリモートリポジトリ(ネットワーク上のフォルダ)にアップロード

実際にリモートにファイルをアップロードする。

対象フォルダを開く

手順④で初期化したフォルダであることを確認する。
以下の手順でターミナル開く
キャプチャ43.PNG

開いたターミナルが手順④で初期化したフォルダと同一であることを確認する
同一でなければフォルダを移動して同一のフォルダにする。
キャプチャ44.PNG

READMEファイルを作る

このファルダの目的や使い方などをmarkdown方式を用いて記述する。
①をクリックし、②にREADME.mdと入力し新しいファイルの名前をREADME.mdにする。
③新しく作成したREADME.md# testと入力する。
キャプチャ49.PNG

リモートにアップロード

git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/opckaiyo2/2022.git
git push -u origin main

正常に進んだ例
キャプチャ57.PNG

ブラウザでGitHubを開き確認してみる

以下の赤枠を確認しコミットした時間帯やコミットメッセージが正しい事を確認する。
キャプチャ58.PNG

⑥GitHubの簡単な使い方

前の手順のように毎回コマンドを打ってちゃきりがない
VSCodeならもっと簡単にできる

ファイルを変更してみる

先ほど使用したREADME.mdファイルを適当に編集する。
以下のように編集してみた。
キャプチャ59.PNG

変更内容確認

編集しCtrl+Sなどでファイルを保存すると①の部分に数字が表示されるようになるのでクリック
続いて②をクリックすると変更箇所が分かりやすく表示される
キャプチャ60.PNG

コミット

アップロードの前にコミットという作業を行う
どこをどのように変えたか記録する作業
①でコミットメッセージを入力変更内容を簡潔に記述(通信機能のバグ修正など)
③本来はコミットの前にステージを行う場合もあるがやらなくても問題はないだろう
キャプチャ62.PNG

アップロード

GitHubにデータを上げる事をプッシュと言ったりする。
以下の赤枠を押しGitHugにプッシュ
キャプチャ64.PNG

確認

しばらく待ってブラウザでGitHubを開き確認する。
キャプチャ65.PNG

⑧途中参加する場合

今まで説明してきた事は新しいraspiのフォルダをGitHubと連携させる手順である。
一度この手順が終われば同じ手順を実行しなくてもよい

VScodeでraspiにSSH接続

手順③と同様にVSCodeで設定し終わったフォルダに接続する。

変更を加えコミット

キャプチャ66.png

push

キャプチャ67.png

VSCodeでGitHubログイン

前手順を完了すると以下のポップアップが表示され
「はい」をクリックするとブラウザでGitHubのログインが求められる。
パスワードがわからなければ手順⑤を参照する。
キャプチャ4.PNG

確認

ログインが完了してしばらくするとpushされるので
編集した内容がブラウザ上でも反映されているか確認する。
キャプチャ5.PNG

終わりに

本記事では一番初めのpushはCUIで行っている。
GUIで何度か試したが動作が不安定なためである。
そこに本校のproxyが関係しているのかはわからなかった。

GitHubは使用しなくても開発に大きな影響があるわけではない
もし、設定がうまくいかなかったリめんどくさければ使用しなくてもよいと思う。
自分が便利だと思ったから記事を書きました。
開発課題の最初にpull、最後にpushするといいかもしれません

参考文献

3
4
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
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?