KDDI Web Communications

Git とスマートリリースで始める、一歩上の CMS サイト運用
コンクリートファイブジャパン株式会社 菱川 拓郎

第 1 回 Git を使った開発サイトの設定

はじめに

ウェブ制作者のみなさま、CMS サイトの運用でお困りではないでしょうか。

テンプレートの追加作業や、CSS の微調整などの依頼が同時に来て、それぞれクライアントに確認してもらう方法に頭を悩ませている…

開発環境からクライアント確認環境への反映、さらに確認環境から本番環境への反映に手間がかかる…

問題発覚、すぐにもとのファイルに戻したい…でも、いったいどのファイルを変更したのか分からない…

CPI にはクライアントに確認してもらえるテストサイトがついてきます。しかも、テストサイトから公開サイトにボタン 1 クリックで反映できるスマートリリース機能がついています。さらに、Git に対応したことで、開発サイトからテストサイトへのリリースも、Git を介してスムーズにおこなうことができるようになりました。しかし、これらの機能をどう使いこなせばいいのか分からず、これまで通り FTP でファイルをアップロードしている方も多いのではないかと思います。本連載では、面倒な FTP でのアップロードを排除した、快適運用プランを全 3 回でご提案します。

第 1 回は開発環境のデータを Git のリモートリポジトリに登録する方法。第 2 回は Git のリモートリポジトリからテストサイトに反映する方法。第 3 回はテストサイトから公開サイトにリリースする方法をご紹介します。

本連載で使用する用語

1. 開発サイト

開発に使用するマシン上で動いている CMS サイトを指します。CMS サイトのリリース後も、テンプレートの改修や新機能の開発は、開発サイトでおこなうことを想定しています。

本連載ではメジャーな MAMP で構築したサイトを使用して解説しますが、XAMPP や Vagrant など他の方法で作成したサイトでも、基本的に同じです。

2. テストサイト

CPI のユーザーポータルからアクセスできるテストサーバー上に構築する CMS サイトを指します。CMS サイトのリリース後も、テストサイトはクライアントがテンプレートの改修や新機能を確認する目的で使用し、テストサイト上で開発は行わないことを想定しています。

3. 本番サイト

CPI のユーザーポータルからアクセスできる本番サーバー上に構築する CMS サイトを指します。インターネットに公開するサイトになります。本番サイト上で直接テンプレートファイルを変更したりすることなく、段階を踏んで問題のないファイルを本番サイトに反映することを目指します。

4. リモートリポジトリ

ローカルの Git リポジトリから push / pull するリモートの Git リポジトリを指します。本連載では、株式会社ヌーラボが提供するプロジェクト管理ツール Backlog を使用します。

Git とは、現在人気の高い分散型バージョン管理システムで、ウェブ制作においても、ソースコードの管理をおこなう目的で使われます。「分散型」の名の通り、Git でおこなうファイル操作は主にローカルマシン上でおこなうため、作業内容を他の開発者や別の環境と共有するには、ネットワーク上に置かれたリモートリポジトリを必要とします。

本連載で紹介する構成

本連載では、CMS サイトを効率的に運用することを目的に、CPI を使って下図のような構成を実現する方法を解説していきます。

開発サイトに加えた変更は常に Git へのコミットとして保存します。そして、開発サイトからテストサイトへの反映は、Git リモートリポジトリを介して行います。テストサイトで修正内容をクライアントが確認したあとで、本番サイトへ反映するには CPI のスマートリリース機能を使用します。この構成には 2 つのメリットがあります。

1 つめのメリットは、Git を使用することで、ファイルのアップロード漏れがなくなることです。開発サイトで行った修正をテストサイトに反映する際に、いちいち FTP で差分ファイルをアップロードするのは面倒ですし、フォルダごとアップロードするには待ち時間が無駄です。Git を使用することで、確実に差分ファイルをテストサイトに反映させることが可能になります。

2 つめのメリットは、構成が比較的単純であることです。スマートリリース機能を使わずに、Git リポジトリ上でテストサイトと本番サイトの 2 つのブランチを使用する構成も考えられますが、設定も Git 上の運用も複雑になります。これから Git を導入していきたいという方であれば、スマートリリース機能を使うことで、簡易な構成で運用できます。

開発サイトに CMS をインストール

それでは、まずローカルマシン上に開発サイトを構築しましょう。本連載では、CMS としてオープンソース CMS の「concrete5(コンクリートファイブ)」バージョン 5.7.4.2 を例として使用しますが、他の CMS でも基本は同じです。

concrete5 のパッケージをダウンロードするには、concrete5 の日本語公式サイト( http://concrete5-japan.org/ )にアクセスし、「最新版ダウンロード」ボタンをクリックします。concrete5 は、2014 年にリリースされた、インターフェースが一新された 5.7 系と、レガシーな 5.6 系の 2 つのメジャーバージョンがメンテナンスされています。今回は、5.7 系をインストールしましょう。バージョン 5.7.4.2 の「ダウンロード開始」ボタンをクリックします。

ダウンロードした zip アーカイブを解凍し、フォルダごと MAMP の htdocs フォルダにコピーします(注:MAMP 以外へのインストール方法を知りたい方は、公式サイトをご覧ください!)。フォルダ名は任意の名前に変更して構いません。ここでは、「cpi」というフォルダ名に変更しました(下図)。

次に、CMS のデータを保存する為のデータベースを設定します。MAMP の phpMyAdmin から、新しいデータベースを作成しましょう。

以上の準備ができたら、http://localhost/cpi/ にアクセスしてみましょう。ファイルのコピーが正しく行われていれば、インストール画面が表示されます。

「Language」で「Japanese (Japan)」を選択し、「Choose Language」ボタンをクリックすると、日本語のインストール画面が表示されます。

MAMP の場合は各項目のチェックに緑のマークが表示されていると思いますが、赤の NG マークが表示されている場合は、表示されるヘルプに従って設定を修正してください。「インストールを続ける」ボタンをクリックすると、サイトの管理者情報とデータベース情報の入力画面になります。

先ほど作成したデータベース情報を入力し、「concrete5 をインストール」ボタンをクリックしましょう。プログレスバーでインストール状況が表示され、しばらく待つとインストールが完了します。

Git の設定

ターミナルを開き、CMS をインストールしたディレクトリに移動しましょう。

$ cd /Applications/MAMP/htdocs/cpi

Git を使う初期設定を行います。

$ git init

.gitignore ファイルの中身を編集しましょう。Git リポジトリに登録したくないファイルの範囲は、Git リポジトリの使い方によって異なりますが、基本的には環境依存のファイルは除外する方が望ましいでしょう。

/application/config/generated_overrides
/application/config/database.php
/application/files
.htaccess

CMS を使わない場合でも、node_modules や composer.lock などを無視
github.com/github/gitignore にて様々なプロジェクト用の .gitignore が共有されている

次に、開発サイトのファイルをローカルの Git リポジトリに commit しましょう。まず、.gitignore ファイルで除外したファイル以外の全てを git add コマンドでステージに追加します。

$ git add .

次に、ステージに追加したファイルをコミットします。

$ git commit -m 'First commit'

これで開発サイトの Git の設定は完了です。念のため、git status コマンドで作業ディレクトリにコミットしていないファイルがないことを確認します。

$ git status
On branch master
nothing to commit, working directory clean

リモートリポジトリへ push

最後に、開発サイトのソースコードを Git のリモートリポジトリに push (送信)しましょう。まず、リモートリポジトリを作成します。本連載では Backlog を使用しています。

リポジトリを作成すると、HTTPS と SSH の 2 つの URL が作成されます。書き込みをおこなう場合は、通常 SSH の URL を使用します。SSH 経由でローカルマシンからリモートリポジトリにアクセスするには、事前に Backlog の個人設定から、ローカルマシンの公開鍵を登録しておく必要があります。

SSH 公開鍵登録 | Backlog を使いこなそう
http://www.backlog.jp/help/usersguide/git/userguide1281.html

公開鍵を登録できたらターミナルに戻り、git remote add コマンドでリモートリポジトリを登録します。

$ git remote add origin username@spacename.git.backlog.jp:/PROJECT_KEY/concrete5.git
$ git remote -v # 登録できているかの確認

リモートリポジトリが登録できたら、いよいよ push です!

$ git push origin master

Backlog の画面から、リモートリポジトリに問題なく push が完了したことを確認してみましょう。

いかがでしょうか。環境設定や、Git の設定など、普通に CMS サイトをインストールする際には必要ない作業が色々とでてきましたね。最初はこれらの設定に手間取るかもしれませんが、最初に Git との連携設定などをしておくことで、運用の際に大きなメリットがあります。また、Git の作業はコマンドで説明しましたが、よく使われている SourceTree など、GUI で Git を操作できるソフトも利用できますので、ぜひこの機会に Git に慣れてみてください。

SourceTree
https://www.sourcetreeapp.com/

第 2 回では、Git リモートリポジトリに開発サイトの変更を push すると自動的にテスト環境に反映されるように設定する方法をご紹介します。

菱川 拓郎(ひしかわ たくろう)

菱川 拓郎(ひしかわ たくろう)
コンクリートファイブジャパン株式会社

ウェブ制作会社でマークアップエンジニア、企画・開発ディレクターとして勤務したのち、フリーランスとして独立。
独立後はオープンソース CMS「concrete5(コンクリートファイブ)」のコミュニティに参加、日本語版の翻訳や、開発・普及活動をおこなう。2012 年より concrete5 のサポート・普及活動をおこなうコンクリートファイブジャパン株式会社を設立。
CMS がウェブ制作者とクライアントの良好な関係をいかに手助けできるかを常に考えている。

トップに戻る