サイトアイコン 協栄情報ブログ

Cloud ShellでGitHubハンズオン (1) add, commit, push の流れ

INAMURA

0.はじめに

最近仕事でも開発を始め、いままで利用しなかったGitHubをそろそろ本格的に利用できるようにしたいと思い、まずは基本的な「リポジトリ作成」「コミット」「プッシュ」の流れをハンズオンしました。

有名サイトも参考にしつつ、実際に手を動かして確認した記録としてまとめました

1.GitHubとは？

1.1 GitHubの概要

1.2.基本的な用語

1.2.1.本ブログでの概念図

1.2.2.Git操作コマンド

No. 本ブログの対象 操作名 詳細
1 〇 add 変更をステージングエリアに追加すること
2 〇 commit ステージングエリアからリポジトリに保存すること
3 〇 push ローカルリポジトリのコミット履歴をGitHubのリモートリポジトリにアップロード（同期）すること
4 次回説明 fork GitHub上の他人のプロジェクトを「自分のGitHubアカウント」にコピーすること
5 次回説明 clone GitHubのプロジェクト（自分のものでも他人のものでも）を「ローカル環境（このハンズオンではCloud Shell）」にダウンロードすること
6 次回説明 merge あるブランチの変更を別のブランチに統合すること
7 次回説明 pull GitHubの最新の変更をローカルリポジトリに取り込むこと

1.2.3.Gitの概念

No. 本ブログの対象 用語 詳細
1 〇 リポジトリ（リモート/ローカル） コードやファイル、変更履歴などの保存場所
2 〇 ステージングエリア コミット（変更の保存）する前に、変更を一時的に準備しておく場所
3 次回説明 ブランチ(リモート/ローカル) メインのコードから分岐した作業スペースのこと
4 次回説明 プルリクエスト(PR) 自分の変更を他の人に確認してもらい、メインブランチにマージしてもらうリクエスト

2.ハンズオン

前提条件

2.1.GitHubへ接続するための設定

2.1.1.(GitHubに登録する)SSHキーの作成

【Google Cloud(Cloud Shell)】
Google Cloud にログインして、右上「>\_」からターミナルを表示してコマンドを実行

# Googleアカウントのメールを変数に入れる
EMAIL=$(gcloud config get-value account)

# メールの確認
echo "メールアドレスは: ${EMAIL}"

# SSHキーを生成(レスポンスにはすべて ENTERと返す)
ssh-keygen -t ed25519 -C "${EMAIL}"

# 公開鍵が作成されていることを確認
cat ~/.ssh/id_ed25519.pub

2.1.2.GitHub CLIをインストール

以下コマンドを実行して、CloudShellからGitHubを操作できるようにする

# GitHub CLIをインストール (Cloud Shellの場合)
curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null

# パッケージリストを更新する
sudo apt update

# GitHub CLIツール(gh)をインストールする
sudo apt install gh

2.2.GitHubへログイン設定

2.2.1.【Cloud Shell】での操作

以下コマンドを実行して、GitHubにSSHキーを保存

# GitHubにログイン
gh auth login

# 以下ウィザード形式で質問に回答(矢印部分を選択)
? Where do you use GitHub? 
　→GitHub.com

? What is your preferred protocol for Git operations on this host? 
　→SSH

? Upload your SSH public key to your GitHub account? 
　→ ~/.ssh/id_ed25519.pub

? Title for your SSH key: 
　→本SSHキーのタイトル入力(例：Google Cloud Shell)

? How would you like to authenticate GitHub CLI? 
　→Login with a web browser

# ブラウザ経由で認証のための 8桁コードとURLがレスポンスされる
! First copy your one-time code: 1234-5678
Press Enter to open https://github.com/login/device in your browser... 
https://github.com/login/device

2.2.2.【WEB画面】での操作

2.2.3.【GitHub】での保存画面確認

GitHubにログインして、以下項目で画面遷移

2.2.4.【2.2.3】の操作後の Cloud Shell画面

以下レスポンスよりログインが成功したことを確認

✓ Authentication complete.
- gh config set -h github.com git_protocol ssh
✓ Configured git protocol
! Authentication credentials saved in plain text
✓ Uploaded the SSH key to your GitHub account: ~/.ssh/id_ed25519.pub
✓ Logged in as {GitHubユーザ名}

2.3.Gitの初期設定

Gitの設定ファイルにコミットするユーザ情報を保存

# Gitのユーザー名とメールアドレスを設定
GITUSER="あなたの名前"
GITEMAIL="あなたのメールアドレス@example.com"

# Gitをグローバルに設定
git config --global user.name "${GITUSER}"
git config --global user.email "${GITEMAIL}"

# 設定を確認
git config --global user.name
git config --global user.email

2.4.GitHubの操作(最初のリポジトリを作成)

2.4.1.リポジトリ作成

# ローカルでディレクトリを作成
mkdir my-first-repo  && cd my-first-repo

# リポジトリ作成
REPO="my-first-repo"
gh repo create ${REPO} --public

2.4.2.リポジトリ初期化とコミット準備

# (初回のみ)Gitリポジトリの初期化(Gitが変更履歴を追跡できるような設定)
git init

# READMEファイルを作成
echo "# My First Repository" > README.md

# 変更をステージングエリアに追加
git add README.md

# ローカルGitに記録
git commit -m "Initial commit"

2.5.GitとGitHub間の連携とプッシュ

2.5.1.GitHubへプッシュ

# (初回のみ)ローカルリポジトリからプッシュ先の設定を行う
git remote add origin git@github.com:{アカウント名}/{リポジトリ名}.git

# 変更をGitHubに更新(デフォルトブランチ名（通常は main または master）を確認して指定してください)
git push -u origin master

2.5.2.GitHubでの画面

2.6.ファイルを編集

2.6.1.ファイルを更新してプッシュ

# READMEファイルを編集
cat > README.md << 'EOF'
# My First Repository

This is my updated README file.
EOF

# 変更をステージングエリアに追加
git add README.md

# ローカルGitに記録
git commit -m "Update README content"

# 変更をGitHubに更新
git push

2.6.2.GitHubでの画面

変更した内容が反映されてることを確認することができる

3.おわりに

3.1.得られた知見

3.2.今後の課題

モバイルバージョンを終了