1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

0.はじめに

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

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

1.GitHubとは?

1.1 GitHubの概要

  • GitHubとは、エンジニアがコードを管理・共有するためのプラットフォーム。
  • Git(バージョン管理システム)をベースにしたウェブサービスで、世界中で利用されている。
  • ファイルのバージョン管理、複数人での開発、オープンソースプロジェクトへの参加などに利用されている。

1.2.基本的な用語

1.2.1.本ブログでの概念図

image.png

1.2.2.Git操作コマンド

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

1.2.3.Gitの概念

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

2.ハンズオン

前提条件

  • GitHubにアカウントが作成済みである
  • GoogleCloud の CloudShell環境で実施

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にログインして、以下項目で画面遷移

  • Settingsページへ移動
    image.png

  • 左ペインSSH and GPG keys から Authentication keys に保存されていることを確認
    image.png

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の設定ファイルにコミットするユーザ情報を保存

  • ここでの設定により(メールアドレスは、GitHubアカウントに登録しているメールアドレス、またはGitHubの設定でコミット用に許可したメールアドレスを使用することで)GitHub上で自分のコミットとして正しく認識される。
# 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.リポジトリ作成

  • 今回リポジトリを公開して作成(--public コマンド)をしています。プライベートで作成する場合、オプションなしで作成できます。
# ローカルでディレクトリを作成
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での画面

image.png

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での画面

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

3.おわりに

3.1.得られた知見

  • GitHubを使ったバージョン管理の基本的な流れを理解する
  • ローカルでの変更をGitHubに反映させる一連のプロセスを理解する

3.2.今後の課題

  • ブランチを使った並行開発の進め方を学ぶ
  • フォークとクローンを使って他のプロジェクトに貢献する方法を習得する
  • プルリクエストの作成と対応方法について理解を深める
1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?