見出し画像

Shopifyアプリ開発#005【実践】PC2台でGitとGitHubを使う (Windows)(Git Bash) (Dドライブ)(ドロップボックス)(VScode)

クエビコ CUEBKO |　Shopify商品登録設計屋

GitとGitHubの公開鍵に苦戦した結果、Mac と　Windowsの差の問題とは別に

  • コマンドプロンプト

  • PowerShell

  • Git Bash

それぞれの対応のコマンドに差があるけれど「何を使って操作しているか」が不明確なため迷走してしまっていたことが判りました。

今回は　「Git Bash」を使って対応です。

git initのデフォルトブランチ名が「master」になる場合はからmainに変更する必要があります。

　

普段作業でファイルを沢山扱うため、PhotoshopやExcelなどのツールなどの動作が少しでも重くならないようにドロップボックスをDドライブで管理しています。

その為、コマンドでのフォルダの指定がうまく行かなかったため、私の対応した手順を書いていきます。

GitHubのアカウントに登録

GitHubはパソコンで作業した情報の履歴をクラウド上で管理できるツールです。まずはこちらで登録をして下さい。

Git、GitHubの基本工程

  • ローカルリポジトリ

  • イニシャライズ（初期化）

  • インデックス（git add .）

  • コミット

  • コミットログ

  • リモートリポジトリ

  • プッシュ

  • ブランチ

  • プル

  • クローン

ローカルリポジトリ

自分のパソコン上に変更履歴のデータを保存する場所。

【1】Dropbox上に共有リポジトリを作成する

2台で1つのDropboxを使いgitで管理するためのディレクトリを作成します。
今回は、「first-task」というディレクトリを作成して、この中にプロジェクトを作っていくことにします。

※Dドライブに「Dropbox」と言うフォルダで同期しているのでここのフォルダが私のスタートフォルダになります。
※フォルダ名は任意です。

■課題１-first-taskフォルダ作成

  1. Dropboxフォルダに移動

  2. 「git」フォルダ作成   (git 作業全体のフォルダ)

  3. 「git」フォルダ作成   (git フォルダに移動)

cd D:/Dropbox/Dropbox/
mkdir git
cd git

次に、gitディレクトリの中にもうひとつディレクトリを作成します。
これがローカルリポジトリとなる部分になります。
今回は「first-task」という名前のディレクトリを作成します。

  1. 「first-task」フォルダ作成 (今回作業ののフォルダ)

  2. 「first-task」フォルダに移動


mkdir ［新規フォルダ名］
cd ［新規フォルダに移動］

mkdir first-task
cd first-task

イニシャライズ（初期化）

■課題２-first-taskディレクトリにローカルリポジトリを作成してください。

【1】初期化　main? master?

※バージョンによっては「master」で生成される場合があります。
Gitの方で「master」➡「main」変更になっていきますので「main」に変更して使用します。


①リポジトリを初期化します。

git init

.git と言う隠しフォルダが生成されます。
※隠しフォルダなので見えてない場合があります。

(master)が生成されました。

　
隠しフォルダ

②「master」ブランチを作成します。

git branch master

③「main」ブランチを作成し、「master」ブランチのコミットを「main」ブランチにマージします。

git branch -m main
git merge master

④リモートリポジトリが存在する場合は、リモートブランチ名も変更します。

git push origin main 
git push origin --delete master

これで、「master」ブランチが「main」ブランチに変更されます。ただし、他の人と共有しているリポジトリの場合は、変更を事前に連絡し、他の人が同期する必要があることを確認してください。

インデックス（git add .）

何の更新履歴を保存するのか…を指定する。

フォルダを作っただけでまだ空なのでファイルを作成する。

【1】ファイルを作成する

Windowsでは「touch」使えないと言う情報もありましたが、

※文字を入れる場合
echo 'プロフィール作成' > profile.txt

※空のテキストを作る場合
touch profile.txt

Windowsでは使えないと言う情報もありましたが、PowerShellのコマンドでは作成できないですが「Git Bash」では　touch コマンドを使用する事が出来ます。

【2】ファイルを開く

code profile.txt

VSbcode で警告がでれば「はい」を押す。

【3】Gitに登録するファイルを選択する。


※下記はディレクトリの中の全てを「選択」する。

git add .

保存する情報の一覧が表示されます。

コミット

コミットとは実際にリポジトリへ選択したファイルを保存する作業の事を言います。

git add .　で選択して　　git commit -m “保存名”　で保存する。

git commit -m “最初の保存”

保存されます。

git add .
git commit -m “保存名”

「どれを保存するか選択」→「保存」の役割の為2つの工程はセットになっています。

　

コミットログ

変更履歴(コミットのログ)を確認します。

内容変更(ファイル保存)　➡　選択　➡　変更履歴を保存の作業。

【1】コミットログの確認

git log

【2】ログ確認の終了方法

確認をすると(END) と表示されて終了する事が出来ません。

終了するには　q   を打つだけで終了できます。


公開鍵・秘密鍵を作成しよう

【1】VScordターミナルで公開鍵作成。

ssh-keygen -t ed25519 -C "Githubに登録しているメールアドレス"

ここで、下記が表示されたら3回ほどエンターキーを押します。

成功すると下記のような表示がされます。

　

【2】鍵が出来ているか確認

C:/Users/［ユーザー名］/.ssh
の位置に保存されています。

　
ls -al  ~/.ssh

作成日時などが表示されます。

【3】公開鍵の中身をコピー

clip < ~/.ssh/id_ed25519.pub

【4】GitHubに公開鍵を登録

GitHubにログイン

登録をしたGitHab のサイトにログインをして下さい。


iconをクリックするとメニューが表示されます。
Settings　をクリック。

　

左側メニューの　SSH and GPG keys  を選択

SSH keys　横の　New SSH key をクリック

　

key 部分にコピーしたキーを入力

　

GitHabのパスワードの入力

　

設定の完了です。

【5】接続の確認

自分のアドレスではなくこのままの入力してください。

ssh -T git@github.com

下記以外の確認の表示がされた場合は「yes」を押してエンター

Hi (account名)! You've successfully authenticated, but GitHub does not provide shell access

上記が表示された場合は接続完了です。

リモートリポジトリ

ローカルリポジトリ(自分のPC上の更新情報)を、リモートリポジトリ(ネット上の保存場所)に紐づける準備。

【1】GitHubにログイン

【2】右上の＋をクリックし　「New repossitry」 を選択


　

【3】リポジトリ名を記入

　

保存。　


　

リモートリポジトリの作成が完了です。

プッシュ

GotHabのトップページに戻ります。

【1】作成したリモートリポジトリのメニューをクリック

　

【2】「SSH」を選択コピー

git remote add origin git@github.com:［アカウント名］/［リポジトリ名］.git
の部分をコピー。

　

VScodeに戻って入力　

git remote add origin git@github.com:cuebko/first-task.git


成功をしても特に何も表示されません。

【3】プッシュ


接続が出来ればプッシュしてみましょう。
ローカル保存をリモートに保存。

git push origin main

※強制的にアップする場合はか

git push -f origin main


リモートリポジトリのURLを確認する

【1】GitBub で確認

リモートリポジトリのメニューを選択して
<>code 　で表示されたURLで確認出来ます。

　

【2】VScode で確認

git remote -v

URLが表示されます。

　

変更の差を確認

【1】ローカルの差を確認

コミット履歴を確認する(ログ)

git log

差を確認する

　
git diff [変更前のコミット識別子]..[変更後のコミット識別子]

比較して変更になった個所が表示されます。

　

【2】リモートの差を確認 (GitHubで特定のコミット間の差分)


GitHub でコミットしたログを確認し、古いコミット番号と新しいコミット番号、比較したい番号をそれぞれ取得します

　

 下記の内容でURLを作成し、ブラウザのURLに張り付けます。

https://github.com/ユーザ名/リポジトリ名/compare/古い方のコミット番号...新しい方のコミット番号

過去の情報と、現在の情報が比較できます。

　

ブランチ

【1】developブランチの作成

git checkout -b develop

README.mdファイルを作成して移動
ファイルをインデックス
リポジトリへ保存(コミット)


touch README.md
code README.md
git add .
git commit -m “READMEコミット初回”

【2】存在するブランチの確認

git branch

【3】mainブランチの移動

git checkout main

【4】developブランチの変更をmainブランチに取り込む（マージ）

git merge develop

ローカル上でdevelopブランチに移動し、新しいファイル「develop.txt」ファイルを作成してください。また、ファイルには適当な文章を記載しておいてください。次に、コミットしてください。

【5】developブランチの移動

git checkout develop

  • develop.txt　ファイルを作成

  • develop.txt　ファイルに移動

  • テキスト入力

  • インデックス

  • コミット

touch develop.txt
code develop.txt
git add .
git commit -m “developコミット初回”


developブランチをGitHubにpushしてください。GitHub上でdevelopブランチからmainブランチに対して、プルリク（pull request：PRとも言う）を作成してください。

【6】今いるブランチを確認

git branch -a

【7】コミットをリモートにpushする。

git push origin HEAD
 or 
git push origin ブランチ名

HEADと記述するとわざわざブランチ名を書かなくてよくなる


Pull Request の手順


developブランチからmainブランチに対してpull requestを作成します。

GitHubを開いたら、自分の first-task のリポジトリに移動します。

【1】「Pull requests」タブをクリックします。


　

【2】右側にある「New pull request」ボタンをクリックします。


　

「base:」のところは「master」にして、「compare:」のところで「develop」ブランチを選択します。
※承認してくださーい!! って言うリクエストです。

　

「compare:」の方がプルリクエストする側のブランチです。

　Create pull request　ボタンを押してください。

　

すると、プルリクエストのタイトルと本文を入力できる画面が開きます。
「タイトル」「本文」を記入したら「Create pull request」ボタンを押します。

　

GitHub上でプルリクを承認し、mainブランチにマージ

「Pull Request」タブをクリックし
一覧から確認したいPull Requestをクリックします。

　

横のギアマークをクリックして
自分のユーザー名をクリックしてレビュアーに追加します。

　

承認したPull Requestをマージします。

スクロールすると緑のボタン「Merge pull reqeust」があるのでクリックします。

　

確認のため緑のボタン「Confirm Merge」をクリックします。


　

Pull Requestのマージが完了しました。

　

ローカル上で、masterブランチにGitHub上のmainブランチをマージ

【1】ローカルのディレクトリに移動

cd D:/Dropbox/Dropbox/git/first-task

【2】リモートのmainブランチの最新の変更を取得します。(develop)

git fetch origin main

【3】ローカルのmainブランチに切り替えます。

git checkout main

【4】ローカルのmainブランチとリモートのmainブランチをマージします。

git merge origin/main

【5】マージが成功したら、ローカルの変更をリモートにプッシュします。

git push origin main


2台目PC

1台目のPC と　2台目のPC は　ドロップボックスを利用し共有フォルダで作業をしています。

【1】公開鍵・秘密鍵の設定

  1. 2台目PCでも公開鍵・秘密鍵を作成

  2. GitHub の New SSH ke に2台目のPCに設定したキーを追記

で連携が出来ているようです。

【2】ローカルリモートリポジトリ

2台目のPCも常にドロップボックスの共有で1つのディレクトリーの情報が共有されています。

ローカルのリモートリポジトリも共有されています。

  1. VScideのターミナルでディレクトリに移動

  2. 作業ファイルを開くと「リポジトリがあります開きますか？」と言うような警告が表示されます。

  3. リポジトリをクリックします。

作業してpushしてみると正常に作業出来ました。

この工程は、1人で業務をしている為、同時に複数人で対応していないので出来ています。

2台目で編集➡プッシュ　すると、リポジトリの情報が変わっているので、翌日1台目でどのような動きをするのか確認してみたいと思います。

　

おわりに


情報が混在していると思いますので、間違っている部分や更に良い方法がありましたら教てください！


私に焼肉食べさせてください🤤