ブログ

最近気になるVCCWを使ってみた

blog_image_WP

こんにちは、フロントエンドエンジニアのかみーゆです。

最近めっきり寒くなりましたね〜。広島では冬の風物詩ドリミネーションが始まります!平和大通りの周辺がライトアップされてとてもキレイです。
まあきっと幸せそうな家族やカップルで溢れかえることでしょうから、私は寂しくプログラマー仲間と忘年会の帰りにでも闊歩しようかと思います。

さて、今日は初めてVCCWというWordPress開発環境を使って環境構築しました!

VCCWとは、VagrantをベースとしたWordPressの仮装開発環境。
普段からVagrantは使ってるのですが、VCCWはWordPress専用なのでWordPressのインストール(テーマやプラグインなんかも)してくれます。
しかも!直接本番環境などにデプロイ(サーバーにアップ)できるスグレモノ。
ワクワクワクワクしながらチャレンジしたいと思います。

※この記事はMac仕様です。あしからず。

VCCW公式サイト
● http://vccw.cc/

みんな大好き、黒い画面を開きましょう

まず、Vagrant とVirtualBoxをダウンロードします。

公式サイトではmacでやる場合、Vagrant pluginのvagrant-hostsupdaterをインストールしろと言ってますが今回は使いませんでした。

hosts(ホスツ)とは、TCP/IPを利用するコンピュータにおけるホスト名のデータベースで、IPアドレスとホスト名の対応を記述したテキストファイルである。hosts のフォーマットは、4.2BSDで登場した。DNSが一般的になった今日では、その使用は限定的なものにとどまっている。
参照:wikipedia hosts(ホスツ)

インストールでコケる記事をたくさん見かけましたし、私自身もこけました。実はこのプラグイン、hostsの中身を書き換えてるだけですし、入れたところであまりメリットもないのかも。。。。
今回はあえて別の方法で書き換えます。

Vagrant とVirtualboxをインストール

とりあえず、最新のものを落としましょう!

virtualbox
● https://www.virtualbox.org/

Vagrant
● http://www.vagrantup.com/

コマンドからvagrantのboxイメージを作ります。

$ vagrant box add vccw-team/xenial64

インストールするディレクトリーを作ります。
任意の名前でOKです。今回はvccwとしました。

コマンドで任意のディレクトリーに移動します。

$ cd (パス)/vccw

ダウンロード

Gitから直接ダウンロードします。

$ git clone git@github.com:miya0001/vccw.git

gitcloneでうまく落とせない人は直接http://vccw.cc/からダウンロードしてみてください。

ipが他のものと被っている場合は変更できます。
ディレクトリvccw内にDLできたらprovision内にdefault.ymlというのがあるので、コピーしてsite.ymlと名前を変えてvccw直下に置きます。

site.ymlをエディターで編集

hostname: vccw.dev
ip: 192.168.33.10

例えば、こんな感じに書き換えます。

hostname: vccw.dev
ip: 192.168.44.10

ツールでhostsを変更

コマンドからhostsファイルを書き換えてもいいですが面倒なのでHostsといツールで変更します。
 DLはこちら

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-22-19-21-29

システム環境設定から開きます。左下プラスマークを開いてipとhostnameを追加します。
不要になれば削除すればいいので楽ですね!!!
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-22-19-27-44

準備ができたらVagrant up!

いよいよ、みんな大好きVagrant upのお時間がやってまいりました!
コマンドに以下コードを入力しましょう♪

$ vagrant up

はい!完了です。
vccw.dev
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-22-19-36-26

vagrantを落としたい時は以下のコマンドを使います。

$ vagrant halt

vagrantが必要なくなったら以下のコマンドを使います。

$ vagrant destroy

便利なツールはどんどん利用していきたいですね!

まだよく調べきってないのもありますし、他にも便利なカスタマイズがあるらしいのでまた追記します〜。

■この記事を書いた人 かみーゆ(フロントエンドエンジニア)

CMS concrete5の認定エバンジェリスト。コーディングからプログラミングまでフロント周りを中心にお仕事してます。広島支社でフロントエンドからサーバエンドまで幅広く触れるリベロなエンジニアを目指してます。お得意のconcrete5や技術的なTipsの記事を主にUPしてます。好きなものは肉とビール。

関連記事

  1. blog image-illustrator-pentool ペンツールでベジェ曲線を描くコツはアンカーポイントの打ち方にあり…
  2. how-to-capture fullpage screen captureで邪魔な固定表示を…
  3. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など 【初心者OK】IllustratorCCで漫画風吹き出しの作り方…
  4. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など 【初心者OK】IllustratorCCで漫画風吹き出しの作り方…
  5. blog image-illustrator-pentool ペンツールでベジェ曲線を練習するための初心者向けトレース素材画像…
  6. hamburger そのサイト、スマホの使い勝手どうでしょう?〜メニューボタン編〜
  7. hpseisaku ホームページ制作における良いデザインとは?
  8. check-list CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説…

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP