Check! Bluemix PHPランタイム + Compose for MySQL で WordPress を構築する

おはようございます、 @dz_ こと大平かづみです。

Prologue - はじめに
====
この記事は、「[[お試し] もくもく + PaaSハンズオン（Azure + Bluemix) #0](https://play-with-cloudz.connpass.com/event/63708/)」の、複数クラウドの PaaS を触ろう！ハンズオンの資料を兼ねています。

久々に Bluemix 触ってみたら、めっちゃかっこよくなってるじゃないですか！！嫉妬しちゃう (*ﾉωﾉ)

じゃなくて、気を取り直して、Bluemix の Cloud Foundry アプリと Compose for MySQL を使って、 WordPress を構築してみたいと思います！

また、Azure PaaS で WordPress 版は、こちら「[Check! Azure Web Apps + MySQL In App で WordPress を構築する](http://qiita.com/dz_/items/71bab073d1f202e7ee72)」をご参考くださいませ～

ご留意点
----
なお、この記事では WordPress を動作させることを目的とし、永続的な運用は考慮しておりません。

WordPress は、デフォルトでは画像やプラグイン、テーマなどのファイルを自身のサーバー内に保存します。PaaS の場合、その特性上、ソースコード管理していないファイルは取り出せなかったり、再起動やデプロイのたびに消えてしまう場合もあります。

実際に運用する場合は、PaaS の特性をよく理解し、十分テストしてから利用するよう、ご対応くださいませ！

Bluemix Cloud Foundry + Compose for MySQL で WordPress を立てよう！
====

Overview - 概要
----

以下の構成で、Bluemix の PaaS に WordPress を構築していきます。

| 項目 |  構成 |
| --- | --- |
| PaaS |  Bluemix Cloud Foundry アプリ（PHPスターター・アプリケーション）|
| MySQL |  Compose for MySQL |

Preparing - 事前準備
----
1. [WordPress のダウンロードページ](https://wordpress.org/download/) から、ソースコード一式の zip をダウンロードしておきます。（例: `wordpress-4.8.1.zip`）
2. Bluemix のアカウントをご用意ください。
    - アカウントをお持ちでない方は、[こちら](https://console.bluemix.net/registration/) から30日間無料トライアルでアカウントを作成できます。

Step by step - 手順
----
### Bluemix Cloud Foundry PHPスターター・アプリケーションを作成する

Bluemix コンソールのカタログを開き、「Cloud Foundry アプリ」から、「PHP」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/2d17b0fc-0e68-649d-f674-d365bab19878.png)

アプリ名を入力し、ホスト名やデプロイする地域などを適宜選択して、「作成」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/58e9ba55-d471-c15b-a979-91ed01ff3b0d.png)

### Compose for MySQL を作成する

次に、再度カタログを開き、「データ＆分析」から「Compose for MySQL」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/9a776bff-432c-5179-d6c2-3d105357f023.png)

適宜、サービス名やデプロイする地域などを選択してください。そして「接続」の欄は、上記で作成した PHPアプリを選択してください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/421f6148-d85d-5558-9285-fa933caaef0b.png)

PHPアプリの接続のため、再ステージの確認が表示されます。「再ステージ」をクリックしてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/9e40866d-4d7c-b32d-6570-78aa8d3aaf57.png)

Compose for MySQL を開きます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/36a1e378-79ed-cf29-b883-747fc9b0cb6e.png)

Compose for MySQL  の画面には接続情報が表示されます。この「Connection Strings > HTTPS」に記載されている文字列から、データベース接続情報を把握しておきます。

```
mysql://admin:<パスワード>@sl-us-south-1-portal.1.dblayer.com:<ポート番号>/compose
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/024ea321-8cae-d26e-8915-2d68bfba8954.png)


以下は抜粋した表です。環境によって変わる可能性もあるので、 Bluemix コンソールの情報をご確認ください。

| 項目 |  設定値 |
| --- | --- |
| データベース名 | `compose` |
| ユーザー名 | `admin` |
|パスワード | 上記 `<パスワード>` の部分 |
| データベースのホスト名 | `sl-us-south-1-portal.1.dblayer.com:<ポート番号>` |


### PHPアプリの「継続的デリバリー」を有効にして、オンラインエディタを有効にする

PHPアプリの画面に戻り、オンラインエディタ「Eclipse Orion Web IDE」を含む「継続的デリバリー」を有効化させましょう。

「概要」の「継続的デリバリー」の欄で、「有効化」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/15752d0a-3b37-34fe-781d-e8cc8a05f684.png)

「Continuous Delivery ツールチェーン」の画面で、それぞれ内容を確認のうえ、「作成」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/b32f211f-322f-1a9b-beb0-5b25ce120531.png)

作成が完了したら、「Eclipse Orion Web IDE」を開きます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/22ecfb39-02de-2dbb-ac23-b3895e65e854.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/f4ed405f-ea8e-7726-cc51-acc8ba738706.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/307668f8-b0c1-99f4-7b60-87b1f9ef1506.png)

### WordPress ソースコードを配置する

サイドパネルに作成したPHPアプリと同名のディレクトリがあることを確認し、そのディレクトリを右クリックします。「インポート > ファイルまたは zip アーカイブ」をクリックし、WordPress のソースコードの zip ファイルをアップロードします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/399d2b53-4132-c112-90c8-4278f9cde30e.png)

解凍するか聞かれるので、解凍してください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/f04c3410-fe75-8ad9-e6db-75cf36dcca0c.png)

### ビルドパックにPHPエクステンションを追加する

そして、WordPress が必要とする mysql の機能を追加します。具体的には、 `mysqli` というPHPエクステンションを追加します。

再度PHPアプリのディレクトリを右クリックして、「新規作成 > フォルダー」をクリックし、 `.bp-config` （※）というフォルダーを作成してください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/be7d6fc0-a635-e174-4a26-a5612610a801.png)

※ フォルダー名が `.` （ドット）から始まることにご注意ください～

次に、 `.bp-config` を右クリックし、`options.json` という名前のファイルを新規作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/f66d3c0c-31f9-56f5-d7b6-cb042bb00e25.png)

`options.json` に下記の JSON を貼り付け、保存してください。

```json:.bp-config/options.json
{
    "WEBDIR": "htdocs",
    "PHP_EXTENSIONS": ["bz2", "zlib", "curl", "mcrypt", "mysqli"]
}
```

※ この `options.json` について、こちらに少しまとめました。ご参考になればさいわいです。

- [Check! Bluemix PHPランタイムでPHPエクステンションを追加したいときは？](http://qiita.com/dz_/items/dc80bdd98c69d9c1cfb9)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/c35954db-adc3-31af-817c-2e9cb3c2d509.png)

保存を終えたら、PHPアプリを再デプロイします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/dabd3c1f-f1ce-5fc7-5a15-b8480bcb2efe.png)

### WordPress をセットアップする

再デプロイが完了したら、デプロイされたアプリケーションを開きましょう！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/6c1e10ff-8855-fee4-74a2-c269917389d3.png)

まずは、デフォルトで用意されている「Hello World!」が正しく表示されるか確認します。表示されましたね？

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/59f586ab-8ea5-d5e2-dfd7-961641201792.png)

それでは、いよいよ `wordpress` のディレクトリをみてみましょう！

[https://<アプリ名>.mybluemix.net/wordpress](https://<アプリ名>.mybluemix.net/wordpress)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/7cce6c1b-3c4a-406d-033c-edffa6c9d91a.png)

Wordpress のセットアップ画面が表示されましたか？無事表示されればそのままセットアップを進めてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/15bdd0d3-64a0-eea9-9cfe-cbbe872347e6.png)

データベースの設定は上記で確認したものです。ホストには、ポート番号も含めてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/4d99fdf0-b4ea-c0fc-c37a-b23e13e938f1.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/427437ee-f926-b5b5-cb84-72f3d372379b.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/4fecedbd-02bc-8c02-7c29-7317aa569393.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/55731150-4e82-015e-02ed-2c15a83315b6.png)

WordPress のセットアップができましたー！(*>∀<)ﾉ))★

応用編
====
ちなみに、この記事では、簡単な手順となるようオンラインエディタを使っておりますが、この場合、WordPressが作成する `wp-config.php` などのファイルはデプロイするたびに消えてしまいます。

恒久的に利用する場合は、別途 Git などを用いてソースコードを管理してください。

なお、ソースコードを管理する際に接続情報などを保存することは運用上問題がありますので、Bluemix (Cloud Foundry ?) が提供する `VCAP_SERVICES` という環境変数を利用することをお勧めします。

`VCAP_SERVICES` には、今回利用した Compose for MySQL などの接続情報も格納されており、下記のサンプルコードのように取り出して使うことができます。ソースコード管理のほか、WordPress セットアップを自動化したい場合などにも重宝すると思います。ぜひ確認してみてください。

- [wp-bluemix-config/wp-config.php at master · ibmjstart/wp-bluemix-config](https://github.com/ibmjstart/wp-bluemix-config/blob/master/wp-config.php#L52-L62)

Epilogue - おわりに
====
余談、資料作成中に WordPress のファイルのアップロードに失敗し、悪戦苦闘したのは内緒です…(;´･ω･)