吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

SourceTreeでGit psuh(プッシュ)するとサーバー環境に自動でデプロイ!

2017年3月9日 / category : lab

SourceTreeでバージョン管理し、push時にサーバー環境にもファイルが反映してくれるともっと楽になるよね・・・、たぶんできるよね。
ということで、できるんだろうな~っと思ってはいたけど、触れずにいましたが、ようやく挑戦してみました。

触れずにいた理由は、とにかく自分は黒い画面が苦手。
ということで、黒い画面が苦手な方にもわかるように説明していこうと思います。

■環境
OS : Windows10
サーバー: heteml
バージョン管理: SourceTree
バージョン管理システム: Git(2.8.1)
■やりたいこと
ローカル環境で作業 → 更新ファイルをSourceTreeでpush → サーバーのテスト環境にファイルが反映
■新たにインストールしたもの
OpenSSH
https://github.com/PowerShell/Win32-OpenSSH/releases

コマンドプロンプトでSSHにアクセス・・・というのがしばらく意味わからなかったが、OpenSSHをインストールすることで、できました。。。
黒い画面、苦手・・・

■用意する環境
・ローカルリポジトリ → ローカルの作業環境
・bareリポジトリ → 作業用のファイルは持たず、管理用のファイルのみを持つディレクトリ
・non-bareリポジトリ → 作業用のファイルを持つディレクトリ

難しい用語が並びましたが、「ローカルリポジトリ」は、ローカルの作業環境です。ここで作業したファイルをSourceTreeでpushするわけです。
「bareリポジトリ」は、pushされたファイルなどの記録を管理するディレクトリです。hetemlでいうと、サーバーの公開領域である/web/配下にはこのディレクトリは置きません。
「non-bareリポジトリ」は、要はテスト環境です。hetemlでいうと、サーバーの公開領域に配置するディレクトリとなります。

一連の流れを図にすると次のようなイメージです。

まずは、下準備!SSHでログインができるかどうか。

まずは、レンタルサーバーでSSHを利用できる環境にします。

続いて、コマンドプロンプトを起動して、SSHでログインします。

コマンドプロンプト
ssh [ユーザー名]@[サーバー] -p [接続ポート]

hetemlの場合、
ssh xxxx@ssh00.heteml.jp -p 2222
みたいな感じになります。
サーバーパスワードも聞かれます。これは、FTP接続の際に入力するパスワードと同じだと思います。

正しくログインできれば、上の状態に。
(これで、コマンドプロンプトでサーバー内に接続できている状態です)

non-bareリポジトリ(テスト環境)を作成します。

non-bareリポジトリが、テスト環境です。
Web制作でいうと、Webサイト(Webサーバー領域)ですので、Webサイトに必要なファイルなどがここに反映されます。

まずは、該当の領域に移動します。
今回は、

http://tsudoi.aru-inc.co.jp/test-auto-deploy/

を該当Webサイトとします。
この場所は、hetemlでいうと、

/home/sites/heteml/xxxxxxxxxxxxxxxxxxxxx/web/tsudoi/test-auto-deploy/

になります。
FTP接続で、該当の箇所まで移動して、ダミーのindex.htmlをアップしておきましょう。

コマンドプロンプト
$ cd web/tsudoi/test-auto-deploy

これで移動ができます。
index.htmlを格納していますので、

コマンドプロンプト
$ ls

を実行すると、index.htmlがあることがわかります。

続いて、.gitを設置します。

コマンドプロンプト
$ git init

.gitが設置されました。
続いて、既に格納されているindex.htmlをコミットしておきます。

コマンドプロンプト
$ git add .
$ git commit -m "first commit"

これで、non-bareリポジトリは完了です。

bareリポジトリを作成します。

ここは、作業用のファイルは持たず、管理用のファイルのみを持つディレクトリとなります。
サーバーの公開領域の外に作りましょう。

hetemlでは、webフォルダが公開領域ですので、今回は、webフォルダと同階層にgitフォルダを作成し、
その中に、管理用のディレクトリを作成します。

まずは、gitフォルダに移動し、test-auto-deployフォルダを作成、その中に移動します。

コマンドプロンプト
$ cd git (gitまで移動)
$ mkdir test-auto-deploy (フォルダの作成)
$ cd test-auto-deploy (作成したフォルダの中に移動)

test-auto-deployフォルダは、下記のようなパスになっています。
/home/sites/heteml/xxxxxx/git/test-auto-deploy/

続いて、non-bareリポジトリを、このbareリポジトリにcloneします。
.gitの名前は適当な名前で問題ないですが、今回は「repo.git」とします。

コマンドプロンプト
$ git clone --bare /home/sites/heteml/xxxxxx/web/tsudoi/test-auto-deploy/ repo.git

git clone –bare [non-bareリポジトリまでのパス] repo.git
となります。

これでbareリポジトリの作成は完了です。

non-bareリポジトリ(テスト環境)とbareリポジトリを連携させる

今の状態ですと、non-bareリポジトリとbareリポジトリがそれぞれ単独なままなので、このふたつを連携させます。
この連携によって、リモートでbareリポジトリからnon-bareリポジトリ(テスト環境)へpullできるようになります。

non-bareリポジトリへ移動し、次のコマンドを実行します。

コマンドプロンプト
$ cd /home/sites/heteml/xxxxxx/web/tsudoi/test-auto-deploy/
$ git remote add origin /home/sites/heteml/xxxxxx/git/test-auto-deploy/repo.git

これで連携完了です。
続いて、ローカルの作業環境を作ります。

ローカルリポジトリの作成

普段作業するディレクトリにtest-auto-deployフォルダを作ります。
SourceTreeの操作は割愛しますが、SorceTreeを起動し、bareリポジトリをクローンします。
その際に必要になるパスは、次のようになります。

クローンするのは、bareリポジトリ
ssh://xxxx@ssh00.heteml.jp:2222/home/sites/heteml/xxxxxx/git/test-auto-deploy/repo.git

URL:ssh://[ユーザ名]@[サーバー]:[接続ポート][bareリポジトリのパス]

これでうまく接続ができれば、index.htmlがローカル環境に追加されているはずです。

自動化の設定

この自動化には、フックスクリプトを使います。
bareリポジトリのディレクトリの中に、hooksフォルダがあります。
この中にあるpost-update.sampleファイルをローカルに落としてきて、post-updateにリネームします。
このファイルの中を、次のようにします。

post-update
#!/bin/sh

cd /home/sites/heteml/xxxxxx/web/tsudoi/test-auto-deploy/ || exit
unset GIT_DIR
git pull origin master

exec git update-server-info

hooksフォルダにアップし直します。
その際、post-updateファイルのパーミッションを「755」にしてください。

これで全ての作業が完了です。
ローカル環境にあるindex.htmlを更新して、SourceTreeでプッシュしてみてください。
テスト環境も反映されているはずです!