はじめに
Cloud9を利用しているGit初心者向けに、Cloud9で作成したソースコードをGitHubに保存する手順を解説します。
前提条件
- Cloud9のアカウント、ワークスペースは作成済み
- GitHubアカウントは作成済み
もくじ
1. Cloud9で作成したソースコードをGitHubに保存
1-1. 【Cloud9】ローカルリポジトリを作成
1-2. 【Cloud9】ソースコードをコミット
1-3. 【GitHub】リポジトリを作成
1-4. 【Cloud9】リモートリポジトリを登録
1-5. 【Cloud9】ソースコードをプッシュ
2. Cloud9で修正したソースコードをGitHubに反映
2-1. 【Cloud9】ソースコードの修正
2-2. 【Cloud9】ソースコードをコミット
2-3. 【Cloud9】ソースコードをプッシュ
3. GitHubで修正したソースコードをCloud9に反映
3-1. 【GitHub】ソースコードの修正
3-2. 【GitHub】ソースコードをコミット
3-3. 【Cloud9】ソースコードをマージ
準備
操作は画面下部のターミナルで実施します。
操作できるターミナルがない場合は＋ > New Terminalで新しいターミナルタブを用意できます。
1. Cloud9で作成したソースコードをGitHubに保存
1-1. 【Cloud9】ローカルリポジトリを作成
gitでのバージョン管理をはじめるためにgit initコマンドでローカルリポジトリ(保管場所)の作成＆初期化を実施します。
$ git init
Initialized empty Git repository in /home/ubuntu/workspace/.git/
ローカルリポジトを作成するとプロンプトにmasterと表示されます。
これは現在の作業ブランチを表しています。
1-2. 【Cloud9】ソースコードをコミット
git statusでコマンドでリポジトリの状態を確認できます。
以下の例では
- 現在のブランチは
masterです - まだコミットされてません
- 追跡対象になってないファイル(
README.md,hello-world.html)があります -
git addコマンドでファイルをコミット対象に含めることができます
と表示されてます。
$ git status
On branch master
No commits yet
Untracked files:
(use "git add <file>..." to include in what will be committed)
README.md
hello-world.html
nothing added to commit but untracked files present (use "git add" to track)
ソースコードをコミット対象にするためにgit add <filename>コマンドを実行します。
$ git add README.md
$ git add hello-world.html
補足
filenameにワイルドカードを指定して、git add *とすることも可能です
ステータス確認を行うと、git addコマンドで指定したファイルがコミット対象になったことがわかります。
$ git status
On branch master
No commits yet
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: README.md
new file: hello-world.html
git commit -m <message>コマンドでコミットを実行します。
[message]部分にはどのような変更を行ったかを記述しますが、最初のコミットではfirst commit、initial commit、初回コミットなどとしても問題ありません。
$ git commit -m "first commit"
[master (root-commit) 8c9db4c] first commit
2 files changed, 88 insertions(+)
create mode 100644 README.md
create mode 100644 hello-world.html
ステータス確認を行うと、（コミットが実行された後に）変更されたファイルがない状態であることがわかります。
$ git status
On branch master
nothing to commit, working tree clean
1-3. 【GitHub】リポジトリを作成
Cloud9でバージョン管理の準備が整ったので、今度はGitHubでソースコードを保存する準備を行います。
GitHubでソースコードの保管場所(リポジトリ)を用意するために＋ > New repositoryを選択します。
Create a new repositoryページでRepository name(リポジトリ名)を入力してCreate repository(リポジトリを作成)ボタンをクリックするとGitHub上にソースコードの保管場所(リポジトリ)が作成されます。
補足：
Githubの無償アカウントで作成できるのはPublicリポジトリのみです。
Publicリポジトリの内容は誰でも閲覧することができるため、秘密の情報（パスワードなど）をソースコードに直接記述しないように注意が必要です
リポジトリ作成直後はページ上にソースコードの保存に利用するURLが表示されてます。
このURLを利用してCloud9からGitHubにソースコードを送ります。
1-4. 【Cloud9】リモートリポジトリを登録
Cloud9からGitHubにソースコードを送るために、Cloud9のターミナル上でgit remote add <name> <url>コマンドを実行します。
補足：
nameはローカルリポジトリ上でのリモートリポジトリの名称(呼び名)になります。
慣例的にoriginと名付けることが多いです。
urlにはGitHubで作成したリポジトリのURLを指定します。
以下のコマンドを実行すると「Cloud9上のローカルリポジトリでは リモートリポジトリ(https://github.com/xxx/xxx.git) をoriginという名前で登録するよ」という意味になります。
$ git remote add origin https://github.com/xxx/xxx.git
登録したリモートリポジトリの情報はgit remoteやgit remote -vコマンドで確認できます。
$ git remote
origin
$ git remote -v
origin https://github.com/xxx/xxx.git (fetch)
origin https://github.com/xxx/xxx.git (push)
1-5. 【Cloud9】ソースコードをプッシュ
git push <repository> <branch>コマンドを実行して、Cloud9上のソースコードをGitHubに送信します。
補足：
repositoryにはリモートリポジトリの名称(本投稿内ではorigin)を指定します。
branchにはローカルのブランチ名(本投稿内ではmaster)を指定します。
コマンドを実行するとGitHubのUserName,Passwordを聞かれるので入力します。
$ git push origin master
Username for 'https://github.com': xxx
Password for 'https://xxx@github.com': xxx
Counting objects: 4, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 1.34 KiB | 1.34 MiB/s, done.
Total 4 (delta 0), reused 0 (delta 0)
To https://github.com/xxx/xxx.git
* [new branch] master -> master
GitHubでリポジトリページを確認すると、Cloud9上で作成したソースコードが閲覧できるようになってます。
2. Cloud9で修正したソースコードをGitHubに反映
2-1. 【Cloud9】ソースコードの修正
Cloud9上でソースコードを修正します。
前回コミット時との差分はgit diffコマンドで確認することができます。
$ git diff
diff --git a/hello-world.html b/hello-world.html
index 3ace1d0..272d7bf 100644
--- a/hello-world.html
+++ b/hello-world.html
@@ -54,7 +54,7 @@ var myText = document.getElementById("helloText");
myButton.addEventListener('click', doSomething, false)
function doSomething() {
- myText.textContent = "hello, world!!";
+ myText.textContent = "hello, GitHub!!";
}
</script>
2-2. 【Cloud9】ソースコードをコミット
新しいファイルを追加した場合は、git add <filename>コマンドを実行します。
$ git add <filename>
新しいファイルを追加してない場合はgit commitに-aオプションをつけることで、変更されたファイルを対象にしてコミットを実行することが出来ます。
$ git commit -am "表示テキストを修正"
[master 9e5fb52] 表示テキストを修正
1 file changed, 1 insertion(+), 1 deletion(-)
2-3. 【Cloud9】ソースコードをプッシュ
ソースコードのプッシュは初回と同様です。
$ git push origin master
Username for 'https://github.com': xxx
Password for 'https://xxx@github.com': xxx
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 369 bytes | 369.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/xxx/xxx.git
8c9db4c..9e5fb52 master -> master
GitHubのリポジトリページを見ると修正内容が反映されています。
branchページでは過去の変更を閲覧することができます。
3. GitHubで修正したソースコードをCloud9に反映
3-1. 【GitHub】ソースコードの修正
簡易な修正であれば、GitHub上でソースコードを修正することも可能です。
README.mdの修正だけであればGitHub上で修正を済ませてしまうケースが多いです。
GitHub上で対象のファイルを開いてEdit this file(鉛筆マーク)ボタンをクリックすると編集モードになります。
3-2. 【GitHub】ソースコードをコミット
ファイルの修正が完了したら、画面下部のフォームでCommit Changesボタンをクリックすることで修正内容が保存されます。
3-3. 【Cloud9】ソースコードをマージ
Cloud9(ローカルリポジトリ)にGitHub(リモートリポジトリ)の修正内容を反映するためにはgit pull <name> <branch>コマンドを実行します。
補足：
repositoryにはリモートリポジトリの名称(本投稿内ではorigin)を指定します。
branchにはローカルのブランチ名(本投稿内ではmaster)を指定します。
$ git pull origin master
remote: Counting objects: 3, done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.
From https://github.com/xxx/xxx
* branch master -> FETCH_HEAD
9e5fb52..f8b32ff master -> origin/master
Updating 9e5fb52..f8b32ff
Fast-forward
hello-world.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
Cloud9上の操作を行わずにソースコードの変更が行われたため、変更を反映してよいかを確認するダイアログが表示されます。今回はGitHubからpullしたソースコードが最新のためUse Remoteボタンをクリックします。
Cloud9上でソースコードを確認するとGitHub上の変更が反映されてることがわかります。
