のんびりゴローのブログ

のんびりゴローのブログ

「日々の出来事をのんびり・せっせと書き連ねます。」

VCCW環境にWordPressサイトを構築してみた

こんにちは。 のんびりゴローのブログにお越しいただきありがとうございます。
ドタバタしていて投稿が空いてしまいました。 
時間管理の基本の「き」は空いたらやるではだ~~め。 やるためにどのように工夫するかですよね。 

 

目次

 

何が忙しくしているか?

最近ゴロー衛門は、遅咲きではありますがサイトの構築、ホームページ作成に関して子供の頃に戻ったように興味(好奇心)がモリモリ旺盛になっています。

ホームページの基礎の「き」に始まり、CSSの基本の「き」の学習とアタフタしています。

・・・とは言っても未だいずれも成果は上がっていません(笑)。

読者の皆様に役に立つ投稿は、道具ではなく「中身そのもの」であることは重々理解していますが、新しいことへのチャレンジもいいかな?と手がけてみました。

 

結論として

以前に構築し投稿したxamppを使用した方法とは異なるVCCWを使用してローカル環境でWordPressが稼働するサイトを構築しました。

ゴロー衛門の復習も兼ねて投稿します。

以下は構築したVirtual Boxのコンソール画面で2つのBOXが稼働中です。

両方ともにWordPress環境で、各々異なるテーマをインストールしてみました。

 

f:id:roncear560:20200304221157j:plain

Virtual Boxのコンソール画面

 

そもそもVCCWって何?

まずはVCCWについて・・・

ゴロー衛門のPC環境はWindows10が稼働してます。

その上にゲストOSを稼働させ、更にその上でWordPressを稼働させます。

 

以前に導入したXAMPPの環境の特徴は、以下のソフトウェアがパッケージになっていました。

対応OS:WindowsをはじめとしてMac, Lunuxなどのクロスプラットフォームに対応しています。

Webサーバー:Apache

DB:MySQL (今は MariaDBが多いみたいです)

Webアプリ用言語:PHP

プログラミン言語:perl

 

roncear560.hatenablog.com

 

 

今回使用のVCCWとの立役者を紹介すると・・・

  • Vagrant(ベイグラントと呼ぶようです):仮想マシンの構築を簡素化してくれるパッケージ
  • Chef:(シェフ、よく分からなくても導入には影響ありませんでした)
  • CentOS:(ご存じLinux。 ゲストOSとなり、Windows10がホストOSです。)
  • WordPressの頭文字を取ってVCCWです。

これらをVirtualBoxという仮想化技術の上で稼働させます。

 

導入手順

詳細情報につきましては先達の情報がたくさんありますので、そちらご参考にしていただければと思います。

以下に簡単に導入ステップをまとめます。 

  1. Virtual Boxのインストールする。
  2. Vagrantのインストールする。
  3. Vagrant インストール後、Windows10を再起動。
  4. 管理者モードでコマンドプロンプトを立ち上げる。 
  5. VCCWをダウンロードし任意のフォルダーに保存する。
  6. ダウンロードしたVCCWを解凍する。
  7. 仮想マシンを構築する場所を確保する。 ディスクの任意の場所にフォルダー(ディレクトリー)を作成。 (例:wp-vccwなど)
  8. 解凍して作成されたVCCWフォルダー配下のフォルダー(provision)とその他のファイルをコピーする。
  9. ステップ7で作成したフォルダーの配下に貼り付ける。(今回の例:wp-vccw)
  10. 作業フォルダーをステップ7で作成したフォルダーに切り替える。 ご参考:cd ドライブ名:\wp-vccw
  11. provisionフォルダー配下のdefault.yml を作業フォルダー(\wp-vccwフォルダー)直下にコピーする。
  12. コピーしたdefault.ymlをsite.ymlに名前を変更する。
  13. site.ymlの内容を変更する。 最下段にご参考値を記します。
  14. site.ymlの変更が終了したら保存します。
  15. host名をWindows10のhostsに追記。 hostsの場所:c:\Windows\System32\drivers\etc\hosts
  16. 管理者権限のコマンドプロンプトから下記の命令を投入する。vagrant up (enter)
  17. 初回は仮想マシンを構築するため少し時間がかかります。
  18. Tera TermなどのSSHターミナルを使用してBOXに接続します
  19. 接続先情報:192.168.33.10 アカウント名:vagrant パスワード:vagrant port:22
  20. ホストOS(Windows10など)のブラウザで 192.168.33.10に接続するとWordPressの初期画面 Welcome to the xxxx が表示されると思います
  21. 設定したWordPress用のアカウントとパスワードでWordPressにログインすると、WordPressの環境になります。 テーマの変更や、お好みのプラグインをインストールなど通常と同様にご利用できます。

 以上で1台目のWordPressのBOX(Provision)が稼働したと思います。

 

そこで2台目のBox(Provision)を動かしてみたいと思ったら・・・・

上記1台目のBox(Provision)作成手順のステップ4以降を繰り返すことで実現します

 

注意点:1代目で使用した下記の設定値は使用できませんので他の値を設定する

  • 新規に作成するフォルダー名
  • 設定するip address 
  • host名

  

VCCWのメリットとデメリット

メリット 

導入がxamppに比べて簡便の印象。

site.ymlのバックアップがあればBOX(Provision)の復元は容易にできる。

2台目の仮想マシンの作成がすごく簡単。(site.ymlをコピー・更新して再使用できる)

VCCWで提供されていないパッケージ環境(BOX=Provision)は、独自に構築してパッケージ化して利用できる。 

 

 デメリット

知名度が低い?(知らなかったのはゴロー衛門だけかな?)

Vagrantの必要最低限の命令などの知識は持つ必要があると感じました。

新しいWebサーバー(nginx=エンジン エックス)のVCCWは、この投稿時点では提供されていません。

 

まとめ

 はじめてVirtual Boxを使用してみましたが意外と仮想マシンは身近な存在でした。 

今回はローカル環境のため、実環境のようなデータの蓄積やトランザクションは発生していませんが、WordPressの練習はもとより、本番展開の前のテスト投稿やサイトの更改に向けた準備作業等にも活用できるのかと考えました。

 

最後に

 最近話題のnginxを使用して独自のBOX(Provision)を構築してみたいと思っています。

スキルが高まりましたらチャレンジしたいと思います。 


今日も最後までお読みいただきありがとうございました。

 

ご参考情報 

青字は変更箇所です

wp_box: vccw-team/xenial64

memory: 1024
cpus: 1

hostname: wp-vccw.test
ip: 192.168.33.10

hostname_aliases:
- www.wp-vccw.test

 

# WordPress Settings
version: latest
lang: ja
title: Welcome to the xxxxxx
multisite: false
rewrite_structure: /archives/%post_id%


# WordPress Path

wp_siteurl: '' # Path to the WP_SITEURL like "wp"
wp_home: '' # Path to the WP_HOME like "wp"


# WordPress User
admin_user: admin
admin_pass: admin
admin_email: wp-vccw@example.com


# WordPress Database
db_prefix: wp_
db_host: localhost
db_name: wordpress
db_user: wordpress
db_pass: wordpress

plugins:
- logbook

theme: ''

options:
blogdescription: Hello WP-VCCW.


# WordPress Multisite Options

multisite_options: {}


# The values of wp-config.php
force_ssl_admin: false
wp_debug: true
savequeries: false

gitignore: https://raw.githubusercontent.com/github/gitignore/master/WordPress.gitignore


# Additional PHP code in the wp-config.php
extra_wp_config: |
// Additional PHP code in the wp-config.php
// These lines are inserted by VCCW.
// You can place additional PHP code here!


# Theme unit testing
theme_unit_test: false
theme_unit_test_uri: https://raw.githubusercontent.com/WPTRT/theme-unit-test/master/themeunittestdata.wordpress.xml

reset_db_on_provision: true


# RubyGems
# Wordmove will be forcibly installed.
ruby_gems:
- bundler
- wordmove

mailcatcher: true

wp_i18n_tools: true


# NPM modules
npms: []


# composer

composers:
- phpunit/phpunit:5.6
- squizlabs/php_codesniffer:~2.0
- wp-coding-standards/wpcs:*

# wp-cli package commands
wp_cli_packages:
- https://github.com/vccw-team/wp-cli-scaffold-movefile/archive/master.zip


# Linked Clone for Vagrant v1.8
linked_clone: false

 

# PHP ini values
php_ini:
date.timezone: UTC
default_charset: UTF-8
mbstring.language: neutral
mbstring.internal_encoding: UTF-8
post_max_size: 1024M # Same with VVV
short_open_tag: Off
session.save_path: /tmp
upload_max_filesize: 1024M # Same with VVV
xdebug.remote_enable: true
xdebug.remote_host: 127.0.0.1
xdebug.remote_port: 9000
xdebug.profiler_enable: true
xdebug.idekey: VCCWDEBUG
xdebug.remote_connect_back: true
xdebug.remote_autostart: true

synced_folder: wordpress
document_root: /var/www/html

 

参考に読んでみた書籍
 
 

お問い合わせ