wordpress開発環境などを爆速で作れるいい感じの仮想環境を爆速で作れるいい感じのプロジェクトテンプレートを作った

PCに Node.js と Vagrant さえインストールされていれば、あとはいくらでも爆速で wordpress が立ち上げられるテンプレートを用意してみました。  
[masamunet/project\_setup\_template](https://github.com/masamunet/project_setup_template)  
wordpress と書きましたが、デフォルトのテンプレートがwordpressなだけで、docker-compose を編集すればいくらでもどんな開発環境も爆速で立ち上げられるいい感じにしてあります。  
カスタマイズの方法は本体の[README.md](https://github.com/masamunet/project_setup_template/blob/master/README.md)に書いてあるので、ここではデフォルトのwordpress開発環境を例にして紹介していきます。

# どんなものなのか

WEB系デザイナーさんやコーダーさんなど、業務でおっかなびっくりNode.js環境は構築しているが、コマンド操作など極力触りたくない、という人向けに、できるだけ簡単に高度な開発環境を提供できないかと思って作りました。  
コーダーさんがソロで使用できる、ということをゴールに設定しつつ、例えばチーム内でエンジニアがメンテした開発環境を全体で共有する、というような今時のプロジェクトチームのあり方にも充分に対応できるように設定されています。  
また、それぞれの仮想環境はできるだけお互いの環境から切り離してあるので、独自の開発環境にそのまま導入もしやすい、といった面もあります。

まとめますと

+ システムに不慣れな人でも導入可能な簡単さ（普段触るコマンドは最低限に）
+ エンジニアがもっと高度な環境にカスタマイズするために直接触れるメンテナンス性（ベース技術はVagrantやDockerなので新たな学習コストは限りなくゼロ）
+ すでにある開発環境やこれから導入する別の環境にも対応できる独立性（導入コストも必要最小限に）

これらを同じレベルで実現することを念頭に置いて作ってあります。  
「仮想環境での開発はチーム全体で共有しやすいから便利なんだけど、一番恩恵を受けるはずのアート寄りスキルホルダーのメンバーたちがそもそもVagrantやDockerの環境構築に不慣れ」という残念なパラドックスを解消するために作ってあります。

# 動作環境

次の環境が必要です。それぞれインストールされているか確認する方法と、されていなければどうやってインストールするかは「環境構築編」で説明します。

### 絶対必要

+ [Vagrant by HashiCorp](https://www.vagrantup.com/)
+ [Node\.js](https://nodejs.org/ja/)

### あると便利

+ [Git](https://git-scm.com/)
  + なくてもいいが、この記事は入ってる前提で書いてある 
+ [Docker \- Build, Ship, and Run Any App, Anywhere](https://www.docker.com/)
  + Vagrant上に入ってるので無くてもいいが、あると単体で起動とかできて便利な場面もある

# まずはやってみよう

任意のディレクトリで以下のコマンドを実行します。

```bash
git clone https://github.com/masamunet/project_setup_template.git
```

次のようなディレクトリ構成になります。

<img width="367" alt="スクリーンショット 2018-09-05 10.49.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/3707/88155f3a-dcbb-3963-ebae-791d824dcf01.png">


できたディレクトリに移動します。

```bash
cd project_setup_template
```

以上でインストールは完了です。  
ここからは早速wordpressを立ち上げてみましょう。
次のコマンドを実行してください。

```bash
node setup
```

現在の作業ディレクトリの一階層上に
[myProject]
というディレクトリが作成されます。このようなディレクトリ構成になります。

<img width="367" alt="スクリーンショット 2018-09-05 10.50.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/3707/eadb1cfe-6979-17a5-cec5-b2beeef7d458.png">


以上でwordpressはサーバー込みで作成されています。  
サーバーを立ち上げてみましょう。

できた [myProject] ディレクトリ内にあるVagrant環境に移動します。

```bash
cd ../myProject/myProject_vagrant
```

次のコマンドを実行します。

```bash
vagrant up
```

かなりしばらく待って、  
[http://localhost:8000](http://localhost:8000)  
ブラウザでアクセスして、wordpressの初期設定画面が表示されれば成功です！

ちなみにネットワーク環境にもよりますが、初回はめちゃくちゃ待ちます。「固まってるのかな？」と不安になるくらい。苦労して初回起動から立ち上げまで自動化させたんですが、こんなに不安になるくらいならここ手動でもよかったんじゃないかな、と思ってしまうほどです。

<img width="413" alt="スクリーンショット 2018-09-05 13.38.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/3707/31717687-ba16-1fc8-733e-22391c9261e9.png">

めちゃめちゃ待って、Wordpressの初期設定画面が表示されれば成功。
今後は、作業開始前には

```bash
vagrant up
```

作業中断するには

```bash
vagrant halt
```

サーバーを再起動するには

```bash
vagrant reload
```

とコマンドを実行するだけで、wordpressがサーバーごと起動・停止・再起動するようになります。

ネットワーク環境にもよりますが、一番最初はネットから諸々ダウンロードしてくるのでこの画面が出るまでかなり時間がかかるはずです。10分とか20分とか。30分以上待っても表示されない場合は、ネットワークがタイムアウトしている可能性が高いので、リンク先のREADME.mdにある「トラブルシュート」を参考にしてください。

[masamunet/project\_setup\_template](https://github.com/masamunet/project_setup_template#%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%88)

# いくつも作ってみよう

[project_setup_template]ディレクトリまで戻って(setup.jsやREADME.mdがあるディレクトリ）、次のコマンドをいくつか試してみてください。  

```bash
node setup test1
node setup test2
node setup test3
```

[test1]、[test2]、[test3]ディレクトリが作成されます。  
それぞれが「サーバー込みで」独立した、wordpressが作成されました。  
それぞれ先ほどと同じような流れで、

```bash
cd test1
cd vagrant_test1
vagrant up
vagrant halt
```

とコマンドを実行していくことでサーバーごと起動・停止できるようになります。

# 独自のwordpressテンプレートが使いたい！

[development/wp_themes] ディレクトリにテンプレートをフォルダごとおいて、wordpressの管理画面で選べば、そのまま反映されます。  
つまり、[development/wp_themes]ディレクトリの中にあるファイルを編集していくことで、独自wordpress開発も進められます。

# 開発完了！公開したい！

## すでに本番サーバーで稼働しているwordpressがある場合

すでにwordpressが動いている本番サーバーがあるなら、[development]ディレクトリで作業したテンプレートファイルを本番サーバーにアップすれば公開完了です。

## せっかくなのでDockerごと本番運用したい

Dockerでの環境を本番運用したい場合、

+ [development]
+ [libs]
+ [myProject_docker]
+ [storages](DBもまるごと移行したい場合）

以上のディレクトリを本番環境に移動すれば、Docker環境ごと本番運用に移行しやすくなります。  
docker-compose.ymlは[myProject_docker]ディレクトリ内にあります。  
デフォルトではHTTPS化の設定・更新を自動で行ってくれる[SteveLTN/https\-portal](https://github.com/SteveLTN/https-portal)も導入済みなので、非常に楽に本番以降できるかと思います。  
※本番環境でのDocker運用については、各自ノウハウをお使いください。
とくにデフォルトではポート番号8080でphpMyAdminが動いているので、そのまま本番公開するのは大変危険です。

# アンインストール

これ自体はただのテンプレート集なので、ディレクトリごと削除すれば完了ですが、Vagrant環境は必要であればコマンドから消す必要があります。  
[masamunet/project\_setup\_template](https://github.com/masamunet/project_setup_template#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E5%89%8A%E9%99%A4%E3%81%97%E3%81%9F%E3%81%84vagrant%E3%81%8C%E3%81%AA%E3%82%93%E3%81%8B%E3%81%8A%E3%81%8B%E3%81%97%E3%81%84)  
リンク先READMe.mdをよく読み、該当するディレクトリで

```bash
vagrant destroy --force
```

などを実行して、Vagrant環境の削除をあらかじめ行ってください。

# いろいろな開発環境を構築してみよう

もともとデフォルト設定でwordpress開発環境を入れてあるので、この本文でもwordpressの開発環境に絞って説明をしていますが、server/docker-compose.ymlを入れ替えることでいくらでも好きな開発環境にカスタマイズすることが可能です。
将来的なアップデートでは、laravel環境やPython + Jupyter Notebookで機械学習環境などもテンプレートで選べるようにする予定です。そもそも作者がもともと行っていたdocker-composeでの開発環境が、マシンごとに動作速度が違って困っていたので、もう一枚Vagrant環境で仮想化させたほうが実行速度が平均化することに気づいて作ったプロジェクトテンプレートですので、いろいろな案件にDockerで対応できるようにしてあります。
基本的には作者の開発環境設定ファイル自動コピペツールにすぎないので、もっといい開発環境にあわせて、適宜更新してみてください。

# 環境構築編

ここではMacをメインに説明してあります。Windowsの方は適宜置き換えて参考にしてみてください。

## Vagrant

Vagrantをインストールするためには、VirtualBoxtとVagrantの二つのアプリ（ここでは便宜上アプリと表現します）が必要です。
ここでは、VirtualBoxtとVagrant、GitやNodebrewなどもインストールしやすくなるHomebrew + Caskをあらかじめインストールすることから説明を始めていますが、PC運用のポリシーなどで余計なアプリを入れたくない方は必要に応じて読み飛ばして、各自VagrantとNode.js環境を構築してください。

### Homebrew

[macOS 用パッケージマネージャー — macOS 用パッケージマネージャー](https://brew.sh/index_ja)

リンク先のインストール用コマンドを実行して、インストールしてください。ほぼ自動ですべて終了します。

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

### Homebrew Cask

[Homebrew Cask](https://github.com/Homebrew/homebrew-cask)

次のコマンドを実行してください。

```bash
brew cask --version
```

インストールされていればバージョン情報が表示されます。インストールされていなければ自動的にCaskがインストールされます。

### VirtualBoxt

[Oracle VM VirtualBox](https://www.virtualbox.org/)

次のコマンドを実行してください。

```bash
brew cask install virtualbox
```

Macでインストールに失敗する場合、一度「環境設定」→「セキュリティとプライバシー」→「一般」→「ダウンロードしたアプリケーションの実行許可」あたりに何か「VirtualBoxをインストールしてもいいかどうかの確認ボタン」が表示されているまずなので、それを押して、再度上記のコマンドを挑戦してみてください。

![スクリーンショット 2018-09-05 9.03.44.png](https://qiita-image-store.s3.amazonaws.com/0/3707/a9b4b07b-bc98-194d-1f73-4783f8f43204.png)


### Vagrant

[Vagrant by HashiCorp](https://www.vagrantup.com/)

次のコマンドを実行してください。

```bash
brew cask install vagrant
```


## Node.js

Node.jsはバージョン管理できるnodebrewからのインストールが便利です。nodebrewはHomebrewがインストールされている前提で使用できます。

### nodebrew

[hokaccha/nodebrew: Node\.js version manager](https://github.com/hokaccha/nodebrew)

```bash
brew install nodebrew
```
### Node.js

[Node\.js](https://nodejs.org/ja/)

前述したように、nodebrewからインストールします。

```bash
nodebrew install latest
nodebrew use latest
```

上記コマンドは、最新バージョンをインストール、最新バージョンを使用、を実行しています。

## Git

[Git \- Downloads](https://git-scm.com/downloads)

GitもHomebrewからのインストールを記載しておきます。

すでにインストールされてあるか、バージョン確認

```bash
git --version
```

なければインストール

```bash
brew install git
```


## Docker + docker-compose

本テンプレートでは、Docker環境はVagrantゲスト上に自動的に構築するため、本来はホスト上にDockerは無くてもいいのですが、Docker単体で起動できるようにもしてあるため、ホスト上にDockerがインストールされていると何かと便利です。Homebrew経由でのインストール方法を記載しておきます。

[Docker \- Build, Ship, and Run Any App, Anywhere](https://www.docker.com/)

```bash
brew install docker
```

上記Dockerだけでもいける気がしたが、念のためdocker-composeのインストール方法も記載しておきます。

```bash
brew install docker-compose
```