vagrantでWordPressを立ててAgular2でフロントエンド開発

#VagrantでWordPressを立てる
virtualboxのインストール
Vagrantのインストール

VCCW v3　をダウンロードする。
http://vccw.cc/

vagrant-hostsupdaterをインストールする。

vagrant

vagrant plugin install vagrant-hostsupdater

プラグインインストール後にupしてWordPressを立てる

cmd

cd vccw
vagrant up

#WordPressの設定
正常にupできていれば

• http://vccw.dev/
  • または　http://192.168.33.10/
• http://vccw.dev/wp-admin/
  • または　http://192.168.33.10/wp-admin/

にアクセスできる。

日本語とかにしとくと幸せになれる。
Wordpressは最新にしておく。

#Angular2のインストール
https://angular.io/docs/ts/latest/cli-quickstart.html
を参照

nodeとnpmをインストールする。
https://nodejs.org/en/

インストールが終わったらAngular2のCLIをインストールする。

cmd

npm install -g @angular/cli

インストールが終わったらプロジェクトを作成する。

cmd

ng new my-app

プロジェクトが作成されたら実行してみる。

cmd

cd my-app
ng serve

http://localhost:4200/ にアクセスして
app works! みたいなの出れば動いてる。

#Angular2をコンパイルしてVagrantで動かす

Angular2をbuildする

cmd

ng build

終わると dist/ というフォルダが生成されている。
dist/ を先程のvccw/wordpress/ にコピーする。
http://vccw.dev/dist/ にアクセスすると先程のapp worksが出る。

トップページごと変えたい場合はdist/の中の全部をvccw/wordpress/にぶち込む。

#最後に
最近（4.7から？）のWordPressもAPIが提供されているのでとりあえずローカルで試せる環境の構築をした。
WordPressの管理画面は使いたいけどPHPでデザインとかはやりたくないしフロントエンドでいろいろやったほうが楽だと思ってる。
とりあえず開発環境はできたので色々やりたい。