Cloud9ワークスペースをGitHubでバージョン管理しよう
💡この記事は２年以上前に投稿しました。AWS Cloud9は2024年7月25日に新規受付を終了しました。
代替サービス等の情報について、以下の回答がおすすめです。
またAWSのホスティングサービスであれば、AWS Amplifyがあります。
Github リポジトリを紐づけて、Webアプリケーションのデプロイが可能です。
便利なサービスですので、検討してみてください。
AWS Cloud9ワークスペースで作業に入る前にバージョン管理の設定を行います。
準備
Cloud9にワークスペースを作っておきます。
中にすでに何かのプロジェクトがあっても構いません。
GitHubアカウントも作成しておいてください。
ローカルリポジトリの作成
Gitを使ってバージョン管理をはじめるために、ローカルリポジトリの作成と初期化を行います。
ローカルとは言うものの当然PC上ではなくワークスペース内のお話です。
cd ~ でルートディレクトリ（左側のツリー上で最も上に表示されているフォルダ）に移動します。
git init
作成できたら$masterと表示されます。
「いまgit上ではmasterという名前のブランチにいますよ」という意味です。
リポジトリ
リポジトリ(レポジトリ Repository)とは、ファイルやディレクトリの状態を記録する場所です。
後述するコマンドでファイルの内容やフォルダ構成、変更された箇所などが自動的に保存されます。
保存されたこれらの情報は履歴として残り、あとから確認することができます。
ブランチ
Gitは履歴を枝分かれさせて記録することができます。
例えば複数人で開発をしている際、追加している機能ごとにバージョン管理できたら便利だと思いませんか？
ブランチを切っていればそれが可能です。
難しい概念につい身構えてしまいますが、実は既にブランチを作っています。masterブランチです。
Gitのリポジトリを作成すると自動で作られます。
主たるブランチですので、本番環境のソースコードが割り当てられることが多いです。
2020年10月以降に新規作成したリポジトリのデフォルトブランチは、mainという名前になります。
コミット対象になるファイルを確認
ルートディレクトリの中でGit管理対象になるファイルを確認します。
git status
すると下記のように表示されます。
On branch master
No commits yet
Untracked files:
(use "git add <file>..." to include in what will be committed)
README.md
……
nothing added to commit but untracked files present (use "git add" to track)
すでに他のプロジェクトが入っているワークスペースではUntracked files:のあとにズラッとファイル名が並びます。
ローカルリポジトリにファイルを追加
git add .
addコマンドのあとに.を指定するとルートディレクトリ以下のフォルダ・ファイル全て、つまりワークスペース上のファイル全てがGit管理下におかれます。
アスタリスク(*)でも行けますが、慣例に習いこちらを使います。
git add README.md
ファイル名を指定することで特定のファイルのみをGit管理下におくことも可能です。
ローカルリポジトリをコミットする
ここでgit statusでローカルリポジトリの状況を確認します。
No commits yet
(中略)
new file: README.md
まだコミットされていませんよ、と言われています。
ローカルリポジトリに正式にファイルを登録します。
git commit -m "はじめてのコミット"
git commitだけでもコミットできるのですが、あとでコミット履歴を見返した時、一行一行履歴を開いてコードを一つ一つ見ないと何を修正したのかわからなくなります…。
それを避けるため-mオプションと続けてコメント内容を書くことでわかりやすくしています。
コミットが成功したところでgit statusで確認します。
nothing to commit, working tree clean
ローカルリポジトリの中にコミット対象のファイルはありません。
先ほどのコミット以後変更されたファイルはありませんよと教えてもらえます。
GitHubリポジトリを作成
Cloud9ワークスペースのファイル管理からはいったん離れ、GitHubアカウント上にリポジトリを作ります。
Webブラウザに移動してGitHubアカウントにアクセスします。 右上の+ボタンを押して｢New repository｣を選びます。
必須項目はRepository nameのみです。
必要であればリポジトリを公開するか(Public)、非公開にするか(Private)を選択して、Create Repositoryを押します。
GitHubの無料アカウントではプライベートリポジトリが無制限に作れるようになりました。
またプライベートリポジトリのアクセス人数も無制限になりましたので、用途に合わせて好きな方を選択してください。
リポジトリを作成すると[HTTPS | SSH]トグルボタンの右にURLが表示されています。
このURLはCloud9で必要ですので右端のコピーボタンを押してクリップボードにコピーしておきます。
もちろん、あとから該当リポジトリページにアクセスして確認することもできます。
ローカルリポジトリにリモートリポジトリを登録
ローカルリポジトリはCloud9側で作ったリポジトリ、リモートリポジトリはGitHubアカウント上に作ったリポジトリです。
ローカルリポジトリにおいて、リモートリポジトリを｢origin｣という名前で登録します。
git remote add origin 先ほどのURL
「先ほどのURL」と書いてある箇所にGitHubでコピーしたURLを貼り付けます。
originは慣例です。好きな名前を付けていいですが、多くのGit解説本や記事にはoriginで書いてあると思います。最初のうちはoriginを採用するのがおすすめです。
ローカルリポジトリからリモートリポジトリへソースをプッシュ
カタカナばっかじゃん、ルー大柴かよ。 いよいよローカルリポジトリでコミットしたファイルをリモートリポジトリへアップロードします。
git push アップロード先のリモートリポジトリ名 ローカルブランチ名
例えばこんな感じで。
git push origin master
Gitは上流リポジトリ（この場合GitHub上のリモートリポジトリ）のうち指定がなければ同名のブランチにプッシュするようです。
もし同名ブランチがなければ勝手にリモートリポジトリに作成されます。
pushコマンドにリモートブランチを指定するオプションをつけることもできます。
git push リモートリポジトリ名 ローカルブランチ名:リモートブランチ名
Cloud9でワークスペースを作って実験するだけならあまり出番はないのかなと思います。
Angularの勉強をされる方はCloud9上にAngular環境を構築する方法を載せているのでぜひご覧ください😊
- この記事を共有する
