14
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

WordPressの開発環境を用意しました

新しくWordpressの開発環境を追加で作るときの手順を書きます。

この記事よりも簡単に環境を作ることができるvccwでWordPressのローカル開発環境を作りましたという記事も書いたのでそちらもご覧ください。

前提条件 + 開発環境

MacにVagrantのCentOSイメージがあり、ApacheやPHPとMySQLなどのインストール済みとします。MacからTerminal経由での操作を想定しています。

今回exaple.comのWordpressサイトを追加することを想定しておき、ローカルの開発環境では、dev.example.comでアクセスすることにします。

Wordpressをダウンロードする

最新のzipファイルを落として解凍します。~/Download/wordpress/以下にwordpressのファイルが解凍されました。

解答されたファイル群
~/Download/wordpress/*

Worpdressのファイルを準備をする

ファイルをまず準備します。

開発環境にWordpressを用意する
# 開発ディレクトリを作成し移動
cd ~/Document/workspace
mkdir example.com
cd example.com

# Wordpressのファイルをまるごとコピー
cp -a ~/Download/wordpress/* ./

このディレクトリにファイルを置くと、Vagrant内でsyncされるようになっています。

ディレクトリ内を確認します。

コピーしたWordpressファイル一覧を表示して確認
ls -al ./*

もし一覧に.htaccessが存在しない場合は、コピーされていないので、コピーしておきます。

wp-config.phpファイルを作成する

Wordpressにはwp-config-sample.phpという雛型が用意されているので、wp-config-sample.phpをコピーします。

wp-config-sample.phpからwp-config.phpを作成
cp wp-config-sample.php wp-config.php
wp-config.phpに設定を書く
vi wp-config.php

/** WordPress のためのデータベース名 */
define('DB_NAME', 'example_database');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'example_username');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'example_password');

wp-config.phpファイルに、DB_NAME、DB_USER、DB_PASSWORDを指定します。exampleの部分にサービスドメインを使用するなどしておくとわかりやすくなります。

Vagrantfileの設定

Vagrantfileの中味を確認しておきます。

Vagrantfileを確認
# Vagrantfileを置いてあるディレクトリ移動
cd ~/Document/vagrantWordpress

vi Vagrantfile

config.vm.network :private_network, ip: "192.168.33.30"
config.vm.synced_folder "/Users/pugiemonn/Documents/workspace", "/var/www/html/", :nfs => true

上記はnetworkとsynced_folderの抜粋です。

もう設定してあるので特にイジる必要はないです。使うのはipくらいでしょうか。

hostsの設定

Macのブラウザから dev.example.com へアクセスした時に、Vagrant側へリダイレクトするようにします。

hostsを編集
sudo vi /etc/hosts

192.168.33.30 dev.example.com

Apacheの設定

VagrantにログインしてCentOS側の設定を行います。

Vagrantへログイン
vagrant ssh

httpdのバージョンを確認します。

httpdのバージョンを確認
httpd -v
Server version: Apache/2.2.15 (Unix)
Server built:   Aug 13 2013 17:29:28

httpdのconfファイルを編集します

confファイルを編集
sudo vi /etc/httpd/sites-available/dev.example.com.conf

<VirtualHost *:80>
ServerName dev.example.com
ServerAlias dev.example.com
DocumentRoot "/var/www/html/example.com/"
ErrorLog /var/log/httpd/dev.example.com_error.log
CustomLog /var/log/httpd/dev.example.com_access.log common
  <Directory "/var/www/html/example.com/" >
    Options All
    AllowOverride All
  </Directory>
</VirtualHost>

confファイルへシンボリックリンクを貼ります。

confファイルへシンボリックリンクを貼る
sudo ln -s /etc/httpd/sites-available/dev.example.com.conf /etc/httpd/sites-enabled/
httpdの再起動
sudo /etc/init.d/httpd restart

MySQLの準備

WordpressからMySQLを利用するための準備をしておきます。

MySQLにログイン
mysql -u root

mysqlへログインします。コマンドを実行できるのならばrootユーザーでなくても構いません。

databaseを作る
create database example_database;
databaseが作られたか確認する
show_databases;

example_databaseがデータベース一覧にあれば成功です。

userを作る
grant all on example_database.* to 'example_username'@'localhost' identified by 'example_password';
作られたuserを確認する
use mysql;
select count(*) from user where User = "example_username";
+----------+
| count(*) |
+----------+
|        1 |
+----------+
1 row in set (0.00 sec)

1名のユーザーが確認できました。

ブラウザから動作確認

ブラウザからdev.example.comにアクセスします。

Wordpressの画面が見えたので成功です。

Wordpressのthemeディレクトリでgit initしておく

テーマはgitで管理しそうなのでリポジトリだけ作成しておきます。

gitの準備
# vagrantからexitしてMacへ
exit 

# テーマディレクトリへ移動
cd /Users/pugiemonn/Documents/workspace/example.com/wp-content/themes/

git init
Initialized empty Git repository in /Users/pugiemonn/Documents/workspace/example.com/wp-content/themes/.git/

これでテーマを管理できるようになると思います。

感想

もっと簡単に出来そうなのですがどうしていいかわからないですぼすけて(☝ ՞ਊ ՞)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
14
Help us understand the problem. What are the problem?