寺子屋【初日】WordPressの開発環境の構築
寺子屋生の町田です。
インターネット上で動いているサイトを改善・改修するには自分のパソコンで同じものを再現する必要がありますが、その環境を準備することを開発環境構築といいます。
今回は次の3つの手順で開発環境構築を進めていきました。
- 必要なものをインストール
- Bitbucketに公開鍵を登録、クローン
- MAMP、hostsファイルの設定
目次
1.必要なものをインストール
開発環境を構築するために必要なものをインストールしました。
- Sublime Text(テキストエディタ)
テキストエディタはSublime Textをインストールしました。テキストエディタではCSVファイルやHTMLファイル・CSSファイルの編集をはじめ、PHPファイルなど プログラミング言語が書かれたファイルを開いて編集したりします。Sublime TextはWindowsでもMacでも使うことが可能で、プラグインが豊富に用意されています。
- iTerm(ターミナル)
ターミナルは、普段使っているアプリのようにマウスやトラックパッドを用いて操作するのではなく、キーボードで「コマンド」と呼ばれる命令を入力することによって操作や設定を行うためのツールです。Windowsで言うところの「コマンドプロンプト」に相当します。iTermは画面の色を変えたり、ウィンドウを簡単に分割できるコマンドなど、色々便利な機能が盛り沢山です。
- MAMP
今回はWordpressで作成されているサイトの改善・改修を行うので、MAMPというソフトをインストールしました。MAMPとは「Macintosh」「Apache」「MySQL」「PHP」の頭文字をとったもので、Mac上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフトです。開発環境のPHP(言語)、Apache, Nginx(Web Server)、MySQL(DB)を簡単に提供してくれます。WordPressはその大部分がPHPで作成されています。
- Source Tree
Source TreeとはGitを簡単に使いこなすことができるツールで、WindowsでもMacでも無料で使うことが可能です。Source Treeを使うとgitでの作業を視覚化することができます。コマンド操作だと、今誰がどのファイルをどのように編集しているのかという部分が見えづらかったのですが、Source Treeでは簡単に作業することができます。
- BitbucketとRedmineに登録
Bitbucketはバージョン管理ツールのリポジトリを預かってくれるホスティングサービスです。BitbucketではGithubと違い、無料プランでもリポジトリを非公開にすることができます。Redmineはタスク管理やプロジェクト管理のできるオープンソースのツールです。IT企業の中でRedmineを使ってタスク管理をしている会社は多くあります。RedmineはWebアプリケーションなので複数人が同時にアクセス可能で、 サーバをインターネットに公開すれば離れた場所からもアクセス可能です。
2.Bitbucketに公開鍵を登録、クローン
BitbucketにSSH認証の公開鍵を登録しました。
SSH認証鍵を設定すると、Pushするときにパスワードを打つ必要がなくなり、セキュリティも向上します。
SSH認証の公開鍵と秘密鍵を作成
コンソール上で以下のコマンドを入力し、公開鍵と秘密鍵を生成しました。
ssh-keygen -t rsa
鍵の生成が完了したら2つのファイルができます。
- id_rsa: 秘密鍵、自分で保管
- id_rsa.pub: 公開鍵、Bitbucketに登録
公開鍵の内容をクリップボードに保存
以下のコマンドで公開鍵の内容を表示し、クリップボードにコピーしました。
cat ~/.ssh/id_rsa.pub
Bitbucketに公開鍵を登録
Bitbucketにログイン後、SSH鍵の追加フォームに先程クリップボードにコピーした公開鍵の内容をペーストしました。これでBitbucketにSSH認証の公開鍵が登録されました。
Bitbucketからリポジトリをクローンする
リモートリポジトリを複製するには、以下のコマンドでクローン(Clone)という操作を行いました。
git clone git@bitbucket.org:△△△/◯◯◯◯.git
クローンを実行すると、リモートリポジトリの内容をまるごとダウンロードしてきて、自分のパソコンにローカルリポジトリとして作成されます。クローンしたローカルリポジトリには変更履歴も複製されているので、元々のリポジトリと全く同じように履歴の参照やコミットをすることができます。
3.MAMP、hostsファイルの設定
MAMPの設定
MAMPでMacにApache、MySQL、PHPの環境をインストールするための設定をしました。
- スタート/ストップ
MAMPの「スタート/ストップ」時の動作を設定します。
MAMP起動時にサーバを起動
MAMP終了時にサーバを停止
にチェックを入れました。
- ポート
MAMP の初期設定では、Apache のポートが「8888」、Nginx のポートが「7888」、MySQLのポートが「8889」に設定されていますが、Apache と Nginx のポートを「80」、MySQLのポートを「3306」に変更しました。
- PHP
PHPのバージョンの設定です。7.1.8を選択しました。
- Webサーバ
Webサーバの設定です。Apacheを選択しました。
ファイルの設定
- バーチャルホストの設定
バーチャルホストとは、Webサーバソフトの機能の一つで1台のWebサーバで複数のドメイン名のWebサイトを運用することです。 バーチャルホストの設定は2つのファイルでおこないました。
1つめのファイルは
/Applications/MAMP/conf/apache/httpd.conf
です。
まずファイルをテキストエディタで開くと574行目付近に以下のようにのコードが記述されています。
# Virtual hosts # Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
この二行目のコメントアウトを削除し、有効にさせます。
2つめのファイルは
/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
です。
同じようにファイルをテキストエディタで開き、27行目付近のコードを以下のように編集しました。
<VirtualHost *:80> ServerName ドメイン名.com DocumentRoot "/Applications/MAMP/htdocs/vh80/サイト名" <Directory "/Applications/MAMP/htdocs/vh80/サイト名"> AllowOverride All </Directory> </VirtualHost>
- hostsファイルの設定
ドメインでアクセスするためには、OS本体にあるhostsファイルを修正する必要があります。hostsファイルとはIPアドレスとホスト名の対応を記述したテキストファイルです。hostsファイルはDNSよりも優先度が高いため、hosts設定をするとDNSに関係なく指定のドメインのIPアドレスを強制的に設定できるようになります。
hostsファイルはetcというフォルダの中にあるので、以下のコマンドで開きました。
sudo vi /etc/hosts
開かれたvimに以下のようにIPアドレスとホスト名を入力しました。
127.0.0.1 ドメイン名.com
これで127.0.0.1の代わりにドメイン名.comが使えるようになります。
上記の設定を終えたら、MAMPを再起動します。
再起動後、設定したドメインで表示できれば成功です。
以上で開発環境の構築ができました。これでインターネット上で動いているサイトと同じ環境で自分のパソコンで改善・改修することができるようになります。
合わせてこちらの記事も御覧ください。
仕事しながらデザインやプログラミングのお勉強する寺子屋制度を導入しました


最新記事 by 町田一平 (全て見る)
- 寺子屋【初日】WordPressの開発環境の構築 - 2017年11月19日