vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです

git pushで本番環境に“自動デプロイ”できる環境を作ってみよう!

      2017/01/30

LINEで送る
Pocket

git-push-deploy
こんにちは、okutani(@okutani_t)です。Gitを使えばかんたんにプログラムのバージョン管理をすることができますが、リモートにリポジトリをプッシュする機能(git push)を使えば「本番環境への自動デプロイ」がかんたんにおこなえる環境を構築することができます。

今回は一例として、僕のポートフォリオサイト(okutani.net)をGitで管理して、本番環境に自動デプロイできるようにする流れで解説しています。

次の環境でおこないます。

  • ローカルリポジトリ
  • MacPC上で管理。

  • 本番環境
  • エックスサーバーにリモートリポジトリを作成し、そこにプッシュすることで本番環境にデプロイできるように設定していく。

  • GitHub
  • GitHubでも管理しているため、本番環境とGitHubへのプッシュを同時にできる設定もおまけで設定。

    参考: GitHubのURL→「https://github.com/okutani-t/okutani.net

ではさっそく、本番環境へ自動デプロイできる環境を作っていきましょう。

参考gitで自動デプロイ環境構築(bare,hook) | たくのこ Web

参考Gitでサイトを更新したい! – Qiita

スポンサーリンク

各環境の情報を確認

まずは、ローカル環境、本番環境、GitHubの情報を確認しておきましょう。

ローカル環境

ローカル環境側でおこなう設定はあまりありませんが、SSHの設定はあらかじめおこなっておく必要があります。

また、エックスサーバーにかんたんにSSH接続できるよう「~/.ssh/config」に下記を記述しています(参照:エックスサーバーにSSHで接続してみよう! | vdeep)。

Host xsrv
  HostName サーバーID.xsrv.jp
  Port 10022
  User サーバーID
  IdentityFile ~/.ssh/id_rsa
  ServerAliveInterval 60

ssh xsrv」だけでSSH接続できるようになって便利です。設定しておくことをおすすめします。

・本番環境(エックスサーバー)

エックスサーバーでは「okutani.net」で独自ドメイン設定済みであるとき、下記の場所が公開用ディレクトリとして作成されます。後ほど、ここに自動デプロイできるようにしていきます。

/home/サーバーID/okutani.net/public_html

また、次の記事のとおり「エックスサーバーでGitを利用できる」環境が必要なので気をつけてください。

LINKエックスサーバーにGitを導入する手順 | vdeep

git pushを本番環境へおこなうための「ベアリポジトリ(リモートリポジトリ)」は次の場所に作成します。

/home/サーバーID/okutani.net/okutani.net.git

ここに、ローカルからgit pushをおこない、hookでプッシュを感知して自動デプロイするようにします。

ベアリポジトリの慣習として、「hoge.git」のように.gitを後ろにつけてあります。これらを後ほど順を追って作成していきます。

GitHub

GitHubでもリモートリポジトリを管理しているので、本番環境とGitHubへのプッシュを同時におこなえるように、後ほど設定します。

GitHubへのpull, pushは下記記事で紹介していますので、ご参考に。

参考GitHubの登録手順、SSH設定&リポジトリをclone,pushまで | vdeep

GitHubは自動デプロイをする上で特に必要な要素ではありません。GitHubを使ってない方は、該当する箇所を読み飛ばして進めてください。

それぞれの環境が整っている上で、話を進めていきます。

本番環境でリポジトリ設定をおこなう

ではさっそく作業していきましょう。

エックスサーバーにSSHでログイン後、public_htmlで公開しているファイルをGitで管理できるようにしておきます。

$ cd ~/okutani.net/public_html
$ git init
$ git add .
$ git commit -m "first commit"

これで、公開ディレクトリからgit pullを使うことができるようになります。

次に、外部からアクセスできない場所(public_html外)に、ベアリポジトリを作成。

$ cd ~/okutani.net/
$ git clone --bare --shared ~/okutani.net/public_html okutani.net.git
Cloning into bare repository 'okutani.net.git'...
done.

これで、「公開しているファイルのベアリポジトリ」が生成されました。

ベアリポジトリはかんたんに説明すると、「ワーキングディレクトリを持たないリモート用のリポジトリ」です。共有リポジトリとも呼ばれていますね。ググればたくさん情報が出てくるので、詳しく知りたい方は各自調べてみてください。

上記のコマンドでは「git clone --bare --shared」を使って、公開用のリポジトリから「okutani.net.git」という名前のベアリポジトリを作成しています。

lsコマンドなんかで中身を見てみると良いかと思います。

$ ls okutani.net.git
HEAD  branches    config    description  hooks  info  objects  packed-refs    refs

post-receiveの作成

次は、今作成したベアリポジトリ内の「hooks」に「post-receive」というファイルを作成します。

hookでプッシュを感知し、post-receiveを使って「公開ディレクトリからベアリポジトリをpullする」といった設定をおこないます。

次のコマンドを続けて入力していきましょう。

$ cd okutani.net.git/hooks
$ vi post-receive

viで次のとおり記述します。

#!/bin/bash

cd ~/okutani.net/public_html
git --git-dir=.git pull ~/okutani.net/okutani.net.git master

--git-dir」を利用することで、指定したgitコマンドが使えるようになります。単純に「ベアリポジトリ(okutani.net.git)からpullをおこなう」といったコマンドを記述しているだけです。

次のコマンドでpost-receiveに実行権限を付けておきましょう。

$ chmod +x post-receive

これで、次のことが実現できるようになりました。

・ローカルから本番環境のベアリポジトリへプッシュ

・ベアリポジトリのhookがプッシュを感知し、post-receiveが動作

・本番環境にあるGitリポジトリが、ベアリポジトリへpullをおこなう

だいたいの流れはこれで把握できたでしょうか。

すこしごちゃごちゃしているので、いまいち理解できなかった方はもう一度頭から流れを見なおしてみましょう。

ローカルリポジトリから本番環境へプッシュしてみる

ローカル環境に戻り、実際に自動デプロイができるまでを順を追って見ていきます。

まずはgit cloneで本番環境のベアリポジトリからリポジトリをクローンします。

$ git clone xsrv:~/okutani.net/okutani.net.git

ここで「~/.ssh/configで設定したxsrv」を使っていることに注意してください。この情報は、SSHで接続できるものを利用すれば、なんでもOKです。

本番環境のファイルを含んだローカルリポジトリが取得できました。

他の方法もあり、次のように「既存のローカルリポジトリに本番環境のベアリポジトリを追加」してもOKです。

$ git remote add origin xsrv:~/okutani.net/okutani.net.git

上記の場合、競合がおきる場合があるので気をつけてください。

では、適当にファイルを追加してコミットします。

$ cd okutani.net
$ touch test-file
$ git add -A
$ git commit -m "add test-file"

本番環境にプッシュしてみましょう。次のように表示されていればOKです。

$ git push origin master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 269 bytes | 0 bytes/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: From /home/サーバーID/okutani.net/okutani.net
remote:  * branch            master     -> FETCH_HEAD
remote: Updating 2fab772..8185d50
remote: Fast-forward
remote:  test-file | 0
remote:  1 file changed, 0 insertions(+), 0 deletions(-)
remote:  create mode 100644 test-file
To xsrv:~/okutani.net/okutani.net.git
   2fab772..8185d50  master -> master

本番環境の公開ディレクトリに、追加したファイルが存在するか確認してみてください。

追加されていれば、git pushだけで本番環境に自動デプロイすることができました!

GitHubにも同時にpushする場合

git push origin master」で自動デプロイできるようになりましたが、同時にGitHubにもプッシュしたい場合の手順を示しておきます。

ローカル上で次のコマンドを実行しましょう。GitHubにもoriginで同時プッシュできるようになります。

$ cd okutani.net
$ git remote set-url --add origin git@github.com:okutani-t/okutani.net.git

もしくは「.git/config」の[remote “origin”]以下に、GitHubのURLを追記してあげてもOK。

$ cd okutani.net/.git
$ vi config
[remote "origin"]
  url = xsrv:~/okutani.net/okutani.net.git
  fetch = +refs/heads/*:refs/remotes/origin/*
  url = git@github.com:okutani-t/okutani.net.git #追記

ちなみに、リモートリポジトリの情報は下記コマンドで確認できます。

$ git remote -v

同時プッシュにこだわらないのであれば、GitHubのリモートリポジトリをorigin以外で追加すればOKです。

$ git remote add github git@github.com:okutani-t/okutani.net.git

では、同時プッシュを試してみましょう。本番環境とGitHubにそれぞれプッシュされるのを確認してみてください。

$ git push origin master

git pullのリモート先をGitHubにする

ただし、このままだとローカルで「git pull origin master」をおこなうと、「本番環境のベアリポジトリを取得」してしまいます。

プル時はGitHubのリモートリポジトリを見たい」といった場合は、次のようにします。

$ git remote rm origin
$ git remote add origin git@github.com:okutani-t/okutani.net.git
$ git remote set-url --add origin xsrv:~/okutani.net/okutani.net.git

これでプルするときはGitHubを見るように設定できます。

まとめ

git pushを使って本番環境へ自動デプロイする手順を紹介しました。

SSH接続から、かんたんなシェルスクリプトまで利用するので、非プログラマーの方はすこし混乱するような内容だったかと思います。

しかし、ゆっくり時間をかけてでも仕組みを理解すれば、とても便利に利用できるので是非試してみてください。

LINEで送る
Pocket

okutani (okutani_t) のヒトコト
これでローカルで開発→git pushで楽ちん自動デプロイができますね。他にもGitHub上の設定でhookするやり方もあるらしいので、余裕があればそちらも検証してみたいと思います。

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。

Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio


 - Git

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。