読者です 読者をやめる 読者になる 読者になる

sometimes I laugh

高専卒WEBエンジニアがいろいろ残しておくブログ

SourceTreeとGithubでAWS上のWebサイトをバージョン管理しつつデプロイする

f:id:watass:20141108210224j:plain

以前、Gitの簡単な導入をやってブログにまとめたわけですが、やはり時代はGithubですね。
今後AWSをメインのインフラとして使っていこうと思っているので、EC2でGitサーバを立ててもいいわけですが、認証の問題とか、リポジトリの公開とかいろいろな問題があるので、Githubをバージョン管理に活用していきます。
以前同様、クライアントPCからSorceTreeでバージョン管理していきますが、その中でGithubを使う方法をメモしておきます。

なお、以前書いたGitとSourceTreeの基本的な操作は以下をご参照のこと。


Githubとは

Githubとは、リモートリポジトリをWeb上で管理できるサービスです。
元来、Gitでバージョン管理する場合には、バージョン情報を管理するためのノンベアリモートリポジトリを設置するGitサーバが必要になりますので、単純に

  • 開発環境(クライアントPC)
  • Gitサーバ
  • 本番環境
となり、クライアントPCを除けばサーバが2つ必要になります。本番環境下にノンベアリモートリポジトリを設置すれば本番環境のみで済みますが、やたらと細かな変更の度に本番環境へプッシュするのは好ましくありません。それ以外にも、認証の問題や、リポジトリ公開がしにくい、などなど通常のGitによるバージョン管理では問題山積みなわけです。
それらの問題を解決するのがGithubGithubではアカウント登録をするだけで、リモートリポジトリを管理してくれますので、サーバを新しく立てる必要がありません。さらに、リポジトリごとにURLが与えられるので、簡単にリポジトリにアクセスできるようになります。


今回使用する環境諸々

今回使用する環境諸々は以下の通りです。
クライアント側で編集したファイルをGithubリポジトリにプッシュし、サーバ側からGithubリポジトリをクローン、プルする形で本番環境へのデプロイを実現します。

クライアントOS:Mac OS X Marvericks 10.9.1
サーバOS:Amazon Linux AMI 2014.09.1
Git:version 2.1.0
SourceTree:version 2.0.2


Githubの登録とリポジトリの作成

まずGithubサイトにアクセスしてサインアップします。
https://github.com/

f:id:watass:20141108213832p:plain

新規アカウント登録はほぼ何も考えずにそのままいけると思います。
登録が完了したら、右上のメニューからSettingをクリックします。
その後、左メニューからSSH keysをクリックし、Add SSH keyのボタンをクリック。
すると、以下のような画面になると思います。

f:id:watass:20141108214236p:plain

titleに適当なタイトルを、Keyには公開鍵の情報を登録します。
公開鍵が必要になりますので、標準ターミナルから以下のコマンドで鍵を作成します。

$ ssh-keygen

後は対話的に鍵の名前とかパスフレーズとかを登録します。
名前を登録できますが、このときに単純に名前だけにすると、ホームディレクトリ配下に作成されるので、パスまでしっかり書きましょう。しっかりパスを指定してあれば、ホームディレクトリの.sshディレクトリ配下に鍵が作成されていると思いますので、作成された鍵の公開鍵側(デフォルトならばid_rsa.pub)の中身をコピーします。
ちなみに以下のコマンドでもクリップボードにコピーできます。

$ pbcopy < ~/.ssh/id_rsa.pub

コピーしたら、Githubの画面に戻ってKeyの部分にペーストします。
Add keyをクリックして、鍵の登録は完了です。

登録できたら、早速リポジトリを作成します。右上メニューのNew repositoryをクリック。

f:id:watass:20141108215505p:plain

クリックすると、リポジトリの情報登録画面になりますので、リポジトリ名と、公開非公開を登録します。とりあえず今回、リポジトリ名はflatphptest、Publicに設定しました。
Create repositoryをクリックすると、リポジトリのURLなどの詳細が表示されます。

f:id:watass:20141108220006p:plain

これでリポジトリは作成完了、表示されているURLでリポジトリに簡単にアクセスできます。


リポジトリをクライアントPCにクローン

Github上で作成したリポジトリをまずクライアントPCにクローンしましょう。
使うのは前回同様、SourceTreeですが、前回使用したときにはGithubなどのアカウント情報を登録していなかったので、最初に登録しておきます。設定メニューからGithubを指定してアカウント情報を入力します。

f:id:watass:20141108220609p:plain

アカウント情報の登録が終われば、後はURLからクローンできます。このURLにはGithubリポジトリを作成したときに表示されたURLが使えますので、クローンしましょう。

f:id:watass:20141108220908p:plain

これでクローン完了です。該当のディレクトリ配下にファイルを作成、変更すれば、Githubのリモートリポジトリにプッシュできるようになります。


リポジトリAWS EC2にクローン

次に、サーバ側のAWS EC2にもリポジトリをクローンします。
インスタンスにログインして、まずgitをインストールしましょう。
ついでに、この後PHPを使いますので、一緒にインストールしておきます。

# yum install git
# yum install php

ちなみに、EC2インスタンスは初期設定だと、ルートユーザのパスワードが設定されていないので、しっかり設定して、スーパーユーザになっておくことをおすすめします。いちいちsudoをつけるのは面倒ですからね。

$ sudo su -
# passwd

gitが問題なくインストールできたら、Apacheのドキュメントルートへ移動して、リポジトリの初期化、クローンを行います。

# cd /var/www/html/
# git init
# git clone https://github.com/wata727/flatphptest.git

これで/var/www/html/flatphptestディレクトリが作成されていれば、クローン完了です。


クライアントからコミットして、EC2上に反映させる

準備が整いましたので、クライアント側から作成、変更した内容をGithub経由でバージョン管理し、サーバ側にデプロイします。
以下のようなindex.phpをクライアント側で作成して、SourceTreeでプッシュします。

<html>
<head>
<title><?php echo 'Hello, Github!' ?></title>
</head>
<body>
<h1><?php echo 'Hello, Github!' ?></h1>
</body>
</html>

プッシュすると、Githubの画面でリポジトリを選択すると、コミットしたコミットログが反映されていることが確認できます。

f:id:watass:20141108222836p:plain

次にインスタンスのドキュメントルートへ移動し、以下のコマンドでプルしてきます。

# git pull https://github.com/wata727/flatphptest.git master

たったこれだけでデプロイ完了。
実際にhttp://IPアドレス/flatphptest/index.phpにアクセスしてみると・・・

f:id:watass:20141108223143p:plain

クライアントでの変更が見事に本番サーバに反映されました!


まとめ

  • GithubリポジトリをWeb上で管理できるサービス
  • URLが生成されるので、それを使えばリポジトリのクローンもプルも簡単
  • Githubを経由することで、簡単にバージョン管理&デプロイができる


原理を理解することって大事ですよね

今回は今までの記事と比べてすごいすっきり書けた印象です。
以前にGit単品でバージョン管理のやり方を試行錯誤したことが役に立っている気がしますね。
やっぱりノンベアリポジトリとか、その辺りのイメージをしっかり持っておくことが、Githubのような最新サービスの理解を深めることに繋がるような気がします。いきなり最先端触るのもいいけど、その根源を試してみることにも意味はあるよね、ってことで。
だいぶバージョン管理もすっきりしましたが、サーバ側のプルとか自動化したいですね。ググってると、なんか近い内容は結構見かけたので、今後試していきます。今後ね。


参考にした記事

GitHubを使ってみよう!導入と簡単な流れ、よく使うコマンドなど。 - YATのBLOG
# Githubの基本的な登録手順とか諸々参考にさせていただきました。
SSH認証キーをBitbucket/GitHubに設定しよう! [Mac簡単手順] - 酒と泪とRubyとRailsと
# SSHキーの設定でちょっと躓きかけましたが、こちらの記事で解決しました。
リモート操作 | 逆引きGit | サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ
# Githubを使うとリモート系のGitコマンドが必要になると思いますので、とても役立ちました。