2017.11.19 町田一平
日記・雑感

寺子屋【初日】WordPressの開発環境の構築

寺子屋生の町田です。

インターネット上で動いているサイトを改善・改修するには自分のパソコンで同じものを再現する必要がありますが、その環境を準備することを開発環境構築といいます。

今回は次の３つの手順で開発環境構築を進めていきました。

  1. 必要なものをインストール
  2. Bitbucketに公開鍵を登録、クローン
  3. MAMP、hostsファイルの設定

１．必要なものをインストール

開発環境を構築するために必要なものをインストールしました。

  • 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アプリケーションなので複数人が同時にアクセス可能で、 サーバをインターネットに公開すれば離れた場所からもアクセス可能です。

 

２．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

クローンを実行すると、リモートリポジトリの内容をまるごとダウンロードしてきて、自分のパソコンにローカルリポジトリとして作成されます。クローンしたローカルリポジトリには変更履歴も複製されているので、元々のリポジトリと全く同じように履歴の参照やコミットをすることができます。

 

３．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つのファイルでおこないました。

１つめのファイルは

/Applications/MAMP/conf/apache/httpd.conf

です。

まずファイルをテキストエディタで開くと574行目付近に以下のようにのコードが記述されています。

# Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

この二行目のコメントアウトを削除し、有効にさせます。

２つめのファイルは

/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を再起動します。

再起動後、設定したドメインで表示できれば成功です。

 

以上で開発環境の構築ができました。これでインターネット上で動いているサイトと同じ環境で自分のパソコンで改善・改修することができるようになります。

合わせてこちらの記事も御覧ください。

WebCamp生で寺子屋制度をスタートします

仕事しながらデザインやプログラミングのお勉強する寺子屋制度を導入しました

The following two tabs change content below.
町田一平
町田一平
町田一平

最新記事 by 町田一平 (全て見る)

カテゴリー
日記・雑感
タグ

SNS

株式会社entershare