開発環境を作ったはなし

お久しぶりです。ながしーです。
前回の記事(利用するプラットフォームを選んだはなし)では、本サイトで利用しているプラットフォームについてまとめました。

サイト構築はすで完了しているのですが、「見た目変えたい!」とか「検索の挙動かえたい!」とか要望は尽きないもので・・・、稼働中の環境を直接いじるのは流石にリスキーなので開発環境を整備しました。

下準備

開発環境は、Macで動作させることを前提に進めていきます。

brewのインストール

すでにインストールしてある場合は、飛ばしてください。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

VirtulaBoxとVagrantのインストール

$ brew cask install virtualbox vagrant

DBのバックアップ

# /backup/backup.tar にバックアップファイルを作成する
sudo docker run --volumes-from db-data -v $(pwd):/backup busybox tar cvf /backup/backup.tar /var/lib/mysql

Vagrantの設定

ディレクトリ構成を下記のようにします。

.
├── Vagrantfile
└── wordpress
├── kusanagi
│ ├── data
│ ├── docker-compose.local.yml
│ └── docker-compose.yml
├── kusanagi-php7
│ ├── Dockerfile
│ ├── LICENSE
│ ├── README.md
│ └── files
├── mariadb
│ ├── README.md
│ ├── backup.tar
│ └── docker-compose.yml
└── uploads.ini

Vagrantfileはこんな感じです。

# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|
config.vm.box = "bento/ubuntu-18.04"
config.vm.network "public_network", bridge: "en0: Wi-Fi (AirPort)"
config.vm.synced_folder "./wordpress", "/home/wordpress",
type: "rsync"

config.vm.provider "virtualbox" do |vb|
vb.gui = false
vb.memory = "1024"
end
config.vm.provision "shell", inline: <<-SHELL
apt-get update
timedatectl set-timezone Asia/Tokyo
apt-get install -y zsh tree zip
SHELL
end

docker-compose.yml は本番と同じものを持ってきています。docker-compose.yml と docker-compose.local.ymlの差分は次の通りです。

--- docker-compose.yml	2018-12-31 17:51:34.000000000 +0900
+++ docker-compose.local.yml 2018-12-31 17:51:30.000000000 +0900
@@ -19,8 +19,8 @@
image: primestrategy/kusanagi-nginx:1.10.0-1
environment:
VIRTUAL_HOST: oekaki-smile.com
- VIRTUAL_PORT: 443
- VIRTUAL_PROTO: https
+ VIRTUAL_PORT: 80
+ VIRTUAL_PROTO: http
LETSENCRYPT_HOST: oekaki-smile.com
LETSENCRYPT_EMAIL: [email protected]
LETSENCRYPT_TEST: "false"
@@ -36,7 +36,8 @@
external_links:
- mariadb:mysql
ports:
- - "443"
+ - 80:80
+ - 443:443
restart: always
networks:
- common_link

本番はhttpsを想定しているので、VIRTUAL_PORTに443を設定していますが、開発環境では証明書を準備するのが大変なのでVIRTUAL_PORTに80を設定しています。

VMの起動と初期設定

起動

vagrant up

設定

# dockerのインストール
$ curl -fsSL https://get.docker.com/ | sh
$ sudo systemctl enable docker

# docker-composeのインストール
$ sudo curl -L https://github.com/docker/compose/releases/download/1.21.0/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose

# networkの作成
$ sudo docker network create --driver bridge common_link

# php7のビルド
$ sudo docker build -t kusanagi-php7 /home/wordpress/kusanagi-php7/

DBの復元

$ sudo docker run --volumes-from db-data -v $(pwd):/backup busybox tar xvf /backup/backup.tar

DBの起動

$ sudo docker-compose -f /home/wordpress/mariadb/docker-compose.yml up -d

ホストの書き換え

wp_optionsテーブルの値を修正する(httpsで受ける想定のところをhttpに変更しているため修正が必要)。

option_name before after
siteurl https://oekaki-smile.com http://oekaki-smile.com
home https://oekaki-smile.com http://oekaki-smile.com

App Start

$ sudo docker-compose -f /home/wordpress/kusanagi-1/docker-compose.yml up -d

開発環境にアクセスする

VMのIPアドレスを取得する

public_networkでVMを起動したので、ローカルのMacと似たようなIPアドレスのはずです。

# VMにssh
$ vagrant ssh
$ ifconfig

hostsファイルの設定

取得したIPアドレスをセットする。

# /etc/hosts
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
fe80::1%lo0 localhost

{{取得したIPアドレス}} oekaki-smile.com

ブラウザでアクセスする

http://oekaki-smile.com にアクセスする。
ブラウザにDNSキャッシュやリダイレクトキャッシュが残っている場合、表示されないことがあるので、キャッシュクリアをしたりブラウザのシークレットモードで表示してみると良いです。

本番に反映する

rsyncとかscpとかでアップロードします。
※ いつかCIでデプロイできるようにしたいものです・・・。

Tips

VMのDBにローカルから接続する

VMへのsshの設定確認

$ vagrant ssh-config

DBのホストを取得

$ vagrant ssh
$ sudo docker network inspect common_link

Sequel Proを利用して接続

SSHのタブから上記で取得した情報を入力する。

まとめ

Mac上で環境を構築することで、稼働中の環境(本番環境)に影響を与えずに見た目や挙動を変えるようになりました。
ただ、hostsを変えて確認する必要があるので、記事を書きながら開発はできないのが玉に瑕だったりします。