0%

DevelopWEB開発・運用ノウハウ

Posted:2017.12.30

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

前回記事で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コーディングフロー

 


 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】