Ownedmedia ウェブ制作に役立つコンテンツを発信中!

開発環境構築 2017.12.30

Gitでのリモートリポジトリを作成したwebコーディングフロー

Tags: ,,,
最終更新日:Update

前回記事でGitのクライアントGUIツール導入の流れをまとめていましたが、今回はリモートホストにリポジトリを作成して、複数人での開発フローや複数環境の際に使える方法をまとめていきたいと思います。

 

前回記事「Gitのソースコードバージョン管理でGUIクライアントを導入する(Mac OS X) 」で既にGitのクライアントソフトである「Sourcetree」のインストール及びセットアップは完了している前提で進めていきます。まだの場合は上記の記事をご参考に。

 

Bitbucketでリモートリポジトリを作成

まずはGitのクラウドサービスである「Bitbucket」でリモートリポジトリを作成します。BitbucketはGitの機能であるソースコードのバージョン管理ができるWebサービスです。

Gitでのリモートリポジトリを作成したwebコーディングフロー

Atlassianのアカウントを作成し、無料で利用できます。

【Bitbucket】
https://bitbucket.org/

 

Bitbucketの公式サイトへアクセスし、ログイン画面へと進みます。Atlassianのアカウントを入力しログインします。まだアカウントを取得していない場合はあらかじめアカウントを作成しておいてください。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

ログインするとダッシュボードが表示されます。「リポジトリの作成」をクリックしリポジトリ作成画面へと進みます。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

リポジトリの作成画面が表示され「リポジトリの作成」を同じくクリックし先に進めていきます。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

新規リポジトリの設定画面が表示され、リポジトリの設定を行います。「リポジトリの作成」をクリックすると空のリポジトリが新規作成されます。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

Sourcetreeでリモートリポジトリへプッシュする

Bitbucketでリモートリポジトリを作成したら、次はSourcetreeでソースコードをBitbucketのリモートリポジトリへプッシュしていきます。まずはSourcetreeを立ち上げ、「リモートリポジトリ」タブを選択します。ホストアカウントの設定が表示されますので「Connect」をクリックします。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

Atlassianのアカウント入力画面に切り替わり、アカウント情報を入力しログインします。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

アカウントのアクセス権限に関する情報が表示されますので、確認して「アカウントを許可する」をクリックします。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

リモートリポジトリの設定アラートが表示されるので、適宜情報を設定し「保存」をクリックします。認証キーがない場合はプロトコルの項目をHTTPSに設定します。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

先ほどBitbucketで作成したリモートリポジトリがSourcetreeに紐付けされ、項目に表示されます。続けて該当するリモートリポジトリの項目にある「クローン」をクリックします。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

リポジトリをクローンする設定ダイアログが表示されますので、リモートリポジトリのクローン先となるディレクトリを指定し「クローン」をクリックすると、リモートリポジトリのクローンが開始されます。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

クローンが完了するとローカルリポジトリの項目にもリポジトリが追加されます。この追加されたローカルのリポジトリにソースコードやファイル一式を入れます。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

ソースコードやファイルを入れたことでGitによる変更履歴が記録されますので、それぞれの変更内容に対象とするチェックを入れ「コミット」をクリックします。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

初回のみコミットに関するユーザー情報を登録しますので、適宜情報を入力し、「OK」をクリックします。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

コミット時のメッセージを入力し「コミット」をクリックすることでコミットを確定させます。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

バージョン管理の履歴として先ほどのコミットがローカルリポジトリ内で記録されます。引き続き「プル」をクリックしてリモートリポジトリにアップロードしていきます。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

表示されるダイアログでプッシュ先のリポジトリに関する設定を行います。「OK」をクリックしてプルを完了させます。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

バージョン管理の履歴にリモートリポジトリにも反映されたことが記録されます。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

確認のため、Bitbucketのダッシュボードにアクセスし「リポジトリ」の項目を確認すると変更履歴が記録されています。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 

「コミット」の項目で詳細内容を確認するとソースコードやファイルの変更履歴なども確認することができます。

 

Gitでのリモートリポジトリを作成したwebコーディングフロー

 


 

このように、リモートリポジトリの活用で複数人での同時コーディングや、異なる環境でのコーディングの際にもソースコードの更新を管理することができます。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?