BitbucketにGit PUSHしてサーバーに自動でデプロイしちゃうよ!

皆さんのWeb開発では、

開発環境 → 本番環境

へのファイルアップロードはどんな手順でおこなっていますか??

今日はgit pushで開発環境や本番環境へ、gitのリポジトリから自動デプロイ(アップロード)する方法を紹介してみます。

よくあるサーバーへのファイルアップロード手順

これまで、様々なWeb制作案件や、ソーシャルゲームの開発に携わらせてもらいました。

幾つかの開発現場で、サーバーへのファイルアップロードをおこないましたが、こんな感じの手順が多かったように思います。

1. FTP(SFTP)で直接アップロード

なんだかんだ、FTP(SFTP)が一番主流でした。

自分のPCなど、ローカルな環境上で開発するか、サーバー上の開発環境で直接作業するかはエンジニアそれぞれでしたね。
vimとか得意な人は、割とサーバー上のファイルを直接編集していた気がします。

開発が完了すると、開発環境で動作・表示テストなどをおこなって本番環境へとファイルアップロードするわけですが、どのファイルをいじったかメモをとったり、もしくはサーバー上のファイルのタイムスタンプを見て、この日時以降のファイルをアップするといった感じで本番環境へとファイルアップロードしますよね。

・・・でもこれ、かなり危険!!

絶対にファイルのアップロードミスが発生しますよね。アップするファイルが漏れていたり、何らかのミスで、ファイルを上書きできていなかったり。。

また、共同作業だとしたら、誰の本番アップ作業によるミスが原因なのか分かりづらかったように思います。ファイルの最終編集者や、アップロード担当者をちゃんと管理していないと、ミスしても言い逃れできちゃいますよね。
 

共同作業で、SVN(Subversion)がよく使われるようになって、誰がどんな作業をおこなったか記録されるとともに、ファイルのマージをおこないやすくなりました。

それでも、昔は相変わらず本番アップだけは自動化されないことも多かったですねw 少人数のスタートアップ企業とか。

2. Linuxのrsyncコマンドでファイルを同期

Linuxにちょっと詳しいエンジアがいたり、インフラ担当者がいるような現場では、開発サーバーのファイルと本番サーバーのファイルのタイムスタンプなどの差分をチェックして、同期できるようなバッチファイルを用意してくれていました。

開発環境にはFTPアップロードをして開発しますが、本番環境へはFTPを繋がず、ターミナルで開発環境のサーバーにSSH接続して、rsyncコマンドを使って本番反映します。かなり便利です。

ただ、SVNや、最近ではGitでバージョン管理はしているものの、やはりFTPソフトでアップロードするという手順があると、実はバージョン管理ファイルと開発環境のファイルで差分があったり、アップロード漏れがあったなんていう自体になっている可能性があります。

そこで登場するのが、git pushしたらサーバーに自動デプロイ(アップロード)するという仕組みです。

最近は全くSVNを使わなくなったので、同じようなことができるかは知りません。。

git pushが便利なので続いて紹介します。

3. git pushでサーバーへ自動デプロイ

最近携わっていた案件では、FTPを使わず、git pushすることで開発サーバーに自動デプロイ、そして、本番サーバーでgit pullすることで本番反映完了という仕組みになっていました。

これなら、git管理したものがそのまま開発環境や本番環境へと反映され、差分が生まれない仕組みとなりますよね。素晴らしいです!

今はファイルアップロードをこういうふうにgitから直接できるような開発体制になっている会社や開発環境が多いんですかね??FTPソフトは使わないほうが、極力安心ですね。

自分でもgit pushでサーバーにアップロードしたい・・・

git pushでサーバーへ自動アップロードできるとことの快適さ、安心感を知ってから、自分の開発環境にも導入してみたいと思ったんですが、いかんせん僕は自前サーバーすら用意できないようなにわかエンジニア。gitは「Bitbucket」、サーバーは「さくらインターネット」のレンタルサーバーを使ってWebサイトの開発をしています。

もし、Bitbucketに用意している自分のリポジトリにgit pushして、さくらインターネットのサーバーに自動デプロイできたらのになーと思い情報を調べたところ、どうやらできるということが分かり、今ではどの開発にも取り入れるようにしています。

誰か同じ仕組みを使ってみたい人がいれば参考になると思うので、手順を以下に書いてみます!
 

Bitbucketに登録してリポジトリを作る

BitbucketはGitHubと同じようなサービスと思ってもらえればいいのですが、リポジトリを全世界に公開して・・・とか、やらないようなシャイなエンジニアさんにはちょうどいいサービスです。

GitHubもプライベートリポジトリは作れると思いますが、非公開でも5ユーザーまで共有無料、リポジトリ作成制限がないという点でBitbucketのほうが使い勝手がいいように思います。

gitのGUIツール「SourceTree」を出している会社なので、ソフトとの親和性もいい感じです。Windowsには「Tortoise git」など、gitのGUIツールが多くありますが、Macは少なく、SourceTreeが綺麗で使い勝手も優れていて、個人的には一番良いのではないかと思います。

Bitbucketに登録していない人は、登録後リポジトリを作り、SourceTreeを使って初回分をpushします。

「bitbucket-sync」をサーバーにアップロードする

alixandruさんという方が作った、「bitbucket-sync」というPHPで作られたプログラムがあります。これを利用して、レンタルサーバーにgitの自動デプロイを行います。

仕組み的には、サーバーでgitのリポジトリからファイルの差分を自動的にFTPアップロードしてくれるというものになります。

1. 「bitbucket-sync」をダウンロード

 https://bitbucket.org/alixandru/bitbucket-sync/downloads
 「alixandru-bitbucket-sync-xxxxx.zip」といったzipファイルを解凍します。

2. さくらインターネットのレンタルサーバー(確認したのはスタンダードプラン)に「bitbucket-sync」内のファイルをアップロード

 僕の場合はこんな感じの構成になっています。

■さくらインターネットのディレクトリ
 /home/xxxx/www/exxample.com
 /home/xxxx/www/bitbucket

「bitbucket-sync」をリネームして、「bitbucket」としてみました。

「exxample.com」内が公開しているディレクトリとなります。「bitbucket」ディレクトリでgit pushを検知し、「exxample.com」ディレクトへと必要なファイルをアップロードします。

「bitbucket」ディレクトリ内の「config.sample.php」を使い「config.php」ファイルを作成します。

下記の設定変更をおこないます。

	/**
	 * The default branch to use for getting the changed files, if no specific
	 * per-project branch was configured below.
	 */
	'deployBranch' => 'リポジトリ名を入力',

	/** The ID of an user with read access to project files */
	'apiUser' => 'Bitbucketのユーザー名を入力',

	/** The password of {apiUser} account */
	'apiPassword' => 'Bitbucketのパスワードを入力',
	'requireAuthentication' => true, // trueにして、AuthKeyを設定しましょう
	'deployAuthKey' => '',
	'gatewayAuthKey' => 'ここに適当な文字列でキーを入力します',

 
git管理に対応するディレクトリを指定します。

ここを間違えて、デプロイうまくいかないなー・・・ということが多いので間違えないように気をつけましょう↓

$DEPLOY = array(
    'example' => '/home/xxxx/www/example.com',
);

 

http://example.com/bitbucket/gateway.php?test」を実行して、エラーがでないかどうかを確認します。

もし失敗した場合は、サーバーの「/bitbucket/commits」ディレクトリ内に「failed-commit-xxxxxx」といったログファイルが記録されていないか確認してみてください。

生成されている位場合は、Bitbucketのユーザー名やパスワード名などに間違いがないか確認してみてください。

3. Bitbucketにログインしてホックを設定する

bitbucket-webhook

WebサービスのBitbucketにログイン後、

 「Settings」→「Services」→「Selected a service」のプルダウンから「POST」を選択後、「http://example.com/bitbucket/gateway.php?key=xxxxx」のようにURLを入力します。ここでのkeyは、先ほどサーバーにアップして設定した「config.php」内のkeyを使用します。

 Bitbucketの画面は日本語翻訳が進んだり、変更があったりするので度々変わるので、キャプチャ画像と違っているかもしれません。将来、このPOST設定(webhook)できる画面は別の画面となる可能性もあるようですね。

4. git管理しているファイルの一部を書き換えてみて、commit後pushします。

FTPでファイルアップロードするため、少し時差がありますが、エラーが発生していなければ、PUSHしてから数秒後、サーバー側のファイルも変更されると思います。

まとめ

git管理しているファイルが、そのままレンタルサーバーにアップロードできたらいいなと思っていたらできちゃいました!

僕はさくらインターネットのスタンダードプランでbitbucket-syncを使っていますが、他のサーバーでも使えたりしたら、是非twitterなどでご連絡ください!
動作が確認できたサーバーを追記していければいいなーなんて思っています。

いやな梅雨時ですが、gitを使った自動デプロイで、快適な開発生活を送りましょうー!

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

Webデザインスクールの「WebCamp」が手がけるママのためのWebデザインコース

1ヶ月の短期集中でWebデザイナーを目指せます。仕事復帰を希望する主婦やママさんにオススメです。

1ヶ月でHP作成!WebCamp

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

自己流でプログラミングを覚えようとすると、環境設定でつまづく、書いたプログラムがなぜ動かないか解決できず、多大な時間を浪費してしまいがちです。

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!コードレビューしてもらえるのも素晴らしい点ですね。

【TechAcademy】家で学べるプログラミングスクール

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

まだ「独立・開業はちょっと...」という方へは、当社の制作案件をお手伝いして頂く道も開けます。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景