cloud9を使って、PHP・WordPressの開発環境を最速で作ってみよう。

どうもこんにちは、櫻井(sakutomo0615)です。

前回の記事では精神論的な成分が多めの記事になってしまいました。

 

TwitterやFacebookでも応援メッセージを頂き大変うれしく思いますが、

所詮は精神論は精神論に過ぎず、それ自体が何の未来をも生み出す事はありません。

日々発生する問題と向き合いながら解決して生きていく以外に無いと思います。

 

さて、私自身も今までPHPやWordPressなどの開発・テスト環境を用意する際にDockerやvagrantを使っておりましたが、最近めっきり使い機会が減りました。

ほとんどの場合はCloud9を使えばPHPに関する大体の事が出来てしまいます。今回はそんなCloud9の紹介と身近な使用例も含めて解説したいと思います。

Cloud9とは?

39

Cloud9 (https://c9.io

Webブラウザから使用できるクラウド型IDE(統合開発環境)と呼ばれるものでして、プログラムを書くためのエディタやツール群、プログラムの実行環境、テスト環境とツールをセットにした統合環境の事です。有名な例ですと、Visual StudioやEclipseなんかがあります。普通の非エンジニアの方にはあまり馴染みのない物だと思います。

 

 

ところが、このCloud9は非エンジニアの方でも知っておいた方が良い機能がいくつかあります。

代表的な例を挙げると、WordPressのテスト環境として使う分には非常に便利です。

Docker・Vagrantと比べてどうか?

large_v

docker、vagrant共に共通する点は予めこれらが動作する環境を用意しなければならないという点です。もちろん、1からサーバーをセットアップする必要はありませんが、前段階としてPCにVirtual Boxをインストールしたり、vagrant、boot2dockerなどをインストールしておく必要があります。

Cloud9の場合はユーザー登録さえ事前に済ませておけば、いつでも必要な開発環境の仮想マシンをデプロイする事が出来ます。手間としてはクラウド上のUbuntuサーバーにDokcerコンテナをpullする時と同じくらいで済みます。

 

様々なPHP開発環境のセットアップ

Cloud9では最初からMySQLも使えます。なのでWordPressやCakePHPもいくつかのコンポーネントを追加すれば使用可能になります。

早速、Cloud9を使ってみよう。

①Cloud9 (https://c9.io)をWebブラウザで開きましょう。ブラウザはGoogle ChromeでもMS Edgeでも大丈夫です。

cloud9_01

 

②ユーザー名を入力します。(自分だけが使う名前なので、好きに決めてOKです。他のユーザーとの重複判定はありません。)

cloud9_02

 

③公開用のユーザー名を入力します。作成したWebページやプログラムを外部の人と共有したり、公開する時に使用するユーザー名です。

cloud9_03

 

④利用目的を入力します。選択式なので適当に選んでOKです。

cloud9_04

 

⑤入力内容の確認。問題がなければNextで次へ進みます。

cloud9_05

 

⑥チェックを入れてNext

cloud9_06

 

⑦これであなたのDashboardが作成されました。早速+をクリックして、WorkSpace(仮想マシン)を作成します。

cloud9_07

 

⑧WorkSpace(仮想マシン)の作成画面です。今回の記事ではWordpressとPHPを対象に作成します。

cloud9_08_1

ワークスペースを削除する方法

念のため、不要になったワークスペースの削除方法にも触れておきたいと思います。

①ワークスペースの一覧画面で削除したいワークスペースを選択します。

cloud9_10

 

②右上の歯車のアイコンをクリックすると画面下部に削除メニューが表示されます。

cloud9_11

 

③ワークスペース名を入力し、Confirmをクリックします。

cloud9_12

 

これでワークスペース(仮想サーバー)が削除されます。

WordPress環境をセットアップする

非エンジニアの方でもWordPressをインストールする機会は意外と多いと思います。自分でブログを運営していると、テーマを新しいものにしたりデザインを大幅に変えたりする時に、別のWordPressの環境を作ってテストしてから、稼働中のブログに反映させたいと思うことは多いと思います。

そんな時にもCloud9は威力を発揮します。

では作成手順に入ります。

①+ボタンをクリックして、WordSpaceの作成に入ります。

WorkSpace名を入力して、ネットワークタイプを選びます。

Wordpress01

↑※ネットワークタイプ:自分だけ使う場合はPrivate。殆どの場合はPublicで問題ありません。

 

②早速、WordPressのテンプレートがデプロイされたワークスペースが出来ました。

左側ペインにはWordPressのファイル類がツリー状に表示され、中央部分は各種設定ファイルやプログラムの編集画面、中央下部がサーバーにコマンドを入力するコンソールが表示されています。

Wordpress02

 

③WordPressの設定に入る前に画面下部のコンソール部分からMySQLを起動します。

Wordpress03

 

④次にWordPressの画面を表示するWebサービスを起動します。

画面上部の『Run Project』をクリックします。

Wordpress04

 

⑤Webサービスが起動されると、コンソール部分にブラウザでアクセスするためのURLが表示されます。(リンクになっているのでクリック⇨Openで既定のブラウザのウインドウが立ち上がります)

Wordpress05

 

⑥WordPressの初期設定画面が表示されます。

Wordpress06

 

⑦あとはブログ名やユーザー名、パスワードを指定します。

Wordpress07

 

⑧あとは普段通りにWordPressのテーマや画像、記事を追加する事が出来ます。

Wordpress08

Cake PHP3環境をセットアップする

ここからはエンジニアが対象になりますので、説明の粒度を下げて行きたいと思います。大人気PHPフレームである、Cake PHP3も使う事が出来ます。

①まずはPHP用のワークスペース(仮想マシン)を作成します。

cake01

 

②次にComposerを追加します。

cake02

 

③CakePHP3を追加します。

cake03

 

最後に権限を付与するか聞かれるので”Y”を入力します。

cake04

 

④MySQLは最初からインストールされているので、MySQLを起動します。

cake05

 

⑤MySQLにデータベースを作成します。

cake06

 

⑥データベースにテーブルを作成しておかないと警告を出してくるので、適当なテーブルを作っておきます。

cake061

 

⑦データベース接続の設定(config/app.phpの修正)

configディレクトリ内のapp.phpを開き、Datasources部分を編集します。

cake07

 

⑧config/bootstrap.phpの編集(タイムゾーンの変更)

99行目のタイムゾーンを’Asia/Tokyo’に直しておきます。

cake09

 

⑨動作確認してみます。

https://ワークスペース名.c9users.io/testapp/ でCakePHPの初期画面が表示できると思います。

cake11

あとはお好みで開発を進めて行く事が出来ます。

Laravel環境をセットアップする

せっかくなので、Laravelもインストールしてみます。

①まずはPHP用のワークスペース(仮想マシン)を作成します。

cake01

②次にComposerを追加します。

cake02

 

③Laravelをインストールします。

Laravel02

結構時間がかかります。

Laravel03
インストール完了

 

④MySQLにデータベースを作成します。

cake06

 

⑤.envファイルにDB接続情報を設定します。

作成したlaravelappの直下に.envファイルがありますので編集します。

(隠しファイルなので左のツリー内には表示されません。)

laravel03

 

vi .env でenvファイルを編集しましょう。

laravel041

 

⑥app.phpファイルにtimezoneとlocaleを設定します。

こちらは隠しファイルではないので、画面上部の編集画面で編集できます。

laravel05

’timezone’ =>’UTC’ を’Asia/Tokyo’に修正。

’locale’=>’en’ を’ja’に修正します。

 

⑦動作確認

laravelapp/public/index.phpを右クリックして、Runを実行します。

laravel06

Webサービスが起動しますので、早速アクセスしてみましょう。

 

スクリーンショット 2016-04-23 14.30.22

初期画面が表示されました。この後はテーブル作成、権限変更などの追加設定を開発しながら進めればよろしいかと思います。

 

他にもこんな環境が使えます。

最後に私がたまに使う、wwwsqldesignerについて触れてみたいと思います。こちらはPHPとJavaScriptで動作する、『ブラウザ上で描けるER図作成ツール』です。

データベース設計を行う際に便利なツール「WWW SQL Designer」|Materializing [マテリアライジング]
自分で勉強ついでに作ったようなテーブル数が少ないシステムだったら、後からコード見ればテーブル構造なんかは思い出せますが、そうでない場合は作っておかないと大変メンドくさい思いをする事になります。

wwwsqldisignerのセットアップ

①wwwsqldesignerのダウンロード

こちらのサイト(https://code.google.com/p/wwwsqldesigner/downloads/list)からzipファイルをダウンロードして下さい。

wwwsqldesigner01

 

②ダウンロードしたzipファイルを解凍します。解凍したフォルダをcloud9へアップロードしましょう。

File⇨Upload Local Filesを選択します。

wwwsqldesogner03

 

Select folderを選択します。

wwwsqldesigner04

 

③Webサービスを起動します。

wwwsqldesigner/index.htmlを右クリックして、Runを実行します。

wwwsqldesigner05

④動作確認

早速、ブラウザでアクセスしてみます。https://ワークスペース名.c9users.io/wwwsqldesigner/index.html です。

wwwsqldesigner06

主な操作ですが、空白の場所でクリックすると新規テーブルを作成できます。

次に作成したテーブルを選択すると、右のメニューでAdd Fieldボタンが有効化されますので、カラムを追加する事が出来ます。

別のテーブルとリレーションを張る時は『Connect foreign key』でリレーションを張ります。

 

⑤作成したER図のSave/Loadについて

Save/Load画面の左側のクライアントメニュー側で操作しているクライアントへブラウザを通して、ファイルを出力します。Save XML/Load XMLでXMLファイルでエクスポート/インポートと言った感じです。

逆にServer側はサーバー内にファイルとして保存するか、データベースに保存するかが選択できます。

php-fileで保存すると、wwwdesigner/backend/php-file/dataフォルダにデータファイルが保存されますので、次回使う時はこちらのファイルを指定してLoadすれば作業を再開できます。

wwwsqldesigner07

 

まとめ

vagrantやDockerに比べて、いつでもどこでもブラウザさえ使えれば、ローカル開発環境が使える点が大変魅力です。

一番ポピュラーなのはRuby on Railsだと思いますが、こちらも毎回Rails環境を構築する必要が無いので人気を博しています。

最初に自分好みの環境のテンプレートを用意しておいて、必要に合わせてクローンして使うという点では同じです。

ちなみに私は国府津から通勤する時の電車の中でiPad miniからPHPを書くなんて事もしていました。

dotintallのレッスンで使う時なんかはvagrantを使うよりもおススメですよ。

 

【About】この記事を書いた人

櫻井 智行株式会社ビットクリア代表
ネットワーク・データベース寄りの意識不明系インフラエンジニア。実にものぐさ+毒舌な性格。
個人のブログはhttp://www.tank-sakurai.com