Grunt で Vagrant up 時にデータベースをインポートするようにしたらすごく捗る!

普段、ローカルは Vagrant( VCCW )で開発を行っていて、WordPress の各ディレクトリ・ファイルは Vagrant の共有フォルダ機能があるので良い感じに別環境に複製したりテスト環境、本番環境にアップロードしたりできるのですが、データベースの内容はローカルと共有できず、Vagrant 環境の中にある形となるので、インポート、エクスポートがとっても面倒だなと思っていました。

ということで、Grunt から WordPress データベースのインポート、エクスポートが良い感じにできるようにしてみました。

実際どのような環境にしたのか

対象サイトの開発環境のルートで grunt とコマンドを打つだけで Vagrant の起動、sql ファイルが存在したらそれをインポート(無ければ無視)、grunt halt でデータベースのエクスポート、Vagrant の終了が行われるようにしました(実際には、終了時に開発用の不要なファイルなどを除去したリリース用のデータをまとめて別ディレクトリに出力するようにもしていますが、ここでは省略します…)。

こうすることで何が便利かというと、僕はデスクトップ PC とノート PC、もしくは会社と自宅と復数の環境で開発を行っているので、例えば

  1. デスクトップ PC で開発して終了時に自動的にデータベースをエクスポート(各ファイルは Git で共有)
  2. 別の場所でノート PC にデスクトップ PC からエクスポートしたデータベースファイルをコピー
  3. Vagrant を起動するだけで自動的にデータベースをインポート = デスクトップ PC の開発環境と同じ状態を復元

便利すぎる!!

本番環境のデータをローカルにインポート、開発してエクスポート、本番にインポートなんていうのもとても楽にできるようになりました。

ディレクトリ構成

VCCW を使って、下記のような構成で環境を用意しました。

/Users/hoge/htdocs/www.example.com(特定のサイトの開発環境のルート)
┣ Gruntfile.js
┣ vccw(vccw を clone したディレクトリ)
┗ mysql(データベースのインポート・エクスポート用ディレクトリ。自動で生成)

WP-CLI、MySQL のインストール

WP-CLI を使って WordPress データベースのインポート・エクスポートを行いますので、WP-CLI が入っていない場合はインストールします。「Grunt + Sass + Compassでつくるナウいフロントエンド開発環境」を参考にすると簡単です。

また、ホストマシンから Vagrant 上のデータベース(MySQL)のインポート・エクスポートを行うにはホストマシンで MySQL が動いている必要があるそうです。homebrew でインストールすると簡単です(Windows はわからないのでググってください…)。

# インストール
brew install mysql

# インストールすると次のコマンドで初期化してね的なメッセージがでるので従う。
# ここでしなくても、brew info mysql でまた見れます。

# 起動
mysql.server start

Grunt の準備

下記のコマンドで、必要な grunt プラグインをインストール。

npm init
npm install --save-dev grunt grunt-exec

で、下記が Gruntfile.js。

module.exports = function( grunt ) {
	grunt.loadNpmTasks( 'grunt-exec' );

	grunt.initConfig( {
		dir: {
			root       : '/Users/hoge/htdocs/www.example.com', // 開発環境のルート(フルパス)
			vagrantroot: '<%= dir.root %>/vccw',
			develop    : '<%= dir.vagrantroot %>/www/wordpress',
			mysql      : '<%= dir.root %>/mysql' // データベースインポート・エクスポート用ディレクトリ
		},
		mysql: {
			database   : 'wordpress', // データベース名
			user       : 'wordpress', // ユーザー名
			password   : 'wordpress'  // パスワード
		},

		exec: {
			up: {
				cwd    : '<%= dir.vagrantroot %>',
				command: 'vagrant up'
			},
			halt: {
				cwd    : '<%= dir.vagrantroot %>',
				command: 'vagrant halt'
			},
			wp_export: {
				cwd    : '<%= dir.develop %>',
				command: [
					'rm -rf <%= dir.mysql %>',
					'mkdir <%= dir.mysql %>',
					'wp db export "<%= dir.mysql %>/<%= mysql.database %>.sql"'
				].join( ';' )
			},
			wp_import: {
				cwd    : '<%= dir.develop %>',
				command: function() {
					var importfile = grunt.template.process( '<%= dir.mysql %>/<%= mysql.database %>.sql' );
					if ( grunt.file.exists( importfile ) ) {
						return 'wp db import "' + importfile + '"';
					}
					return 'echo no import file. ' + importfile;
				}
			}
		}
	} );

	grunt.registerTask( 'default', ['exec:up', 'exec:wp_import'] );
	grunt.registerTask( 'halt', ['exec:wp_export', 'exec:halt'] );
};

これで、下記ができるようになります。

  • grunt … Vagrant の起動、sql ファイルが存在したらそれをインポート(無ければ無視)
  • grunt halt でデータベースのエクスポート、Vagrant の終了

本来は Vagrant のほうをいじってやるのが良いのかもしれませんが、そちらには疎いので Grunt でやってみました。複数人作業だとデータベースの共有は問題があるかもしれませんが、一人作業の方はものすごく便利だと思うので、同じことで悩んでいる方の参考になれば嬉しいです!

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく