• TOP
  • [EC-CUBE]Vagrant + VirtualBox + VSCode Remote Developmentでローカル環境を構築する
ECCUBE LOCAL DEVELOPMENT

[EC-CUBE]Vagrant + VirtualBox + VSCode Remote Developmentでローカル環境を構築する

「EC-CUBE Advent Calendar 2021」 23日目の投稿です。
タイトル通りにはなりますが、弊社でも採用しているEC-CUBEのローカル環境構築について今回は記事を書いてみようと思います。
なお、今回はEC-CUBE.coを利用せずに自社でホスティング環境を用意し、運用していく場合の環境構築を想定しています。


先に今回構築する際の流れだけをまとめますと

  1. ローカルにてVirtualBox＋Vagrantを使用して仮想マシンを構築し、仮想マシンの中でEC-CUBEをGithubからクローン
  2. VSCodeのRemote Developmentを使用してホストマシンから仮想マシンにssh接続
  3. 仮想マシンの中で直接ファイル操作を行う

今回のポイントはVagrantのディレクトリマウントを使用せずにサーバー(仮想マシン)の中で直接ファイル操作を行うというところです。
今回この構成で構築した時のメリットはいくつかあるのですが

  • 仮想マシン側のVSCodeに拡張プラグインを導入するだけで言語(FW)などの補完がきく
  • Vagrant+VirtualBoxの構成なのでホストマシン(Mac,Windows)の環境差分を吸収できる
  • boxファイルをパッケージして共有することで、メンバー間で発生しがちな環境差分を吸収できる
  • 仮想マシンの構築手順をAnsible等のプロビジョニングツールで自動化することで本番環境にも適用できる
などが挙げられるかと思います。

検証環境

  • MacOS Catalina, Windows10
  • VirtualBox 6.1.30
  • Vagrant 2.2.19
  • VSCode

手順解説

1. ローカルにてVirtualBox＋Vagrantを使用して仮想マシンを構築

この章では開発に使用する仮想マシン(サーバー)を構築していきます。
なお今回は下記の構成で仮想マシンを構築していきます。

  • Ubuntu 20.04
  • Apache 2.4
  • MySQL 8.0
  • PHP 7.4
  • EC-CUBE 4.1

弊社は本番環境でAmazonLinuxを使用する場合はUbuntuではなくCentOSで構築していますが、今回はEC-CUBE公式の情報に合わせてUbuntuで構築していきます。


まずここから先の手順を進める前にVirutualBoxとVagrant(プラグイン含め)のインストールをしてください。
下記ハンズオン形式の記事が非常に参考になりますので一読されることをオススメします。
また、本記事では今回使用するツールやそれに関するコマンドなどの解説は割愛させていただきます。

  

// Vagrant(プラグイン含め)とVirtualBoxのインストールを確認
$ vagrant -v Vagrant 2.2.19
$ vagrant plugin list vagrant-share (2.0.0, global) vagrant-vbguest (0.30.0, global)
$ VBoxManage -v 6.1.30r148432

// 今回使用するUbuntuのboxイメージを追加
$ vagrant box add ubuntu/focal64
$ vagrant box list ubuntu/focal64 (virtualbox, 20200326.0.0)


// 任意のディレクトリに作業ディレクトリを作成
$ mkdir ec-cube

// 移動
$ cd ec-cube

// 先ほど取得したUbuntuのBoxファイルを使用してVagrantファイルの雛形を作成
$ vagrant init -m ubuntu/focal64

今回はUbuntuのパッケージやミドルウェア等のインストールをshellで実行します。
これを作成しておくだけでも環境構築の手順書代わりになるのでオススメです。
なお、必要なパッケージ等はEC-CUBE開発者情報と公式GithubのDockerファイル等を参考に選定しています。

  

// 仮想マシンを初回起動時に各種モジュール等をインストールするshellを作成
$ vim init.shell

init.shell


#!/bin/bash

# shell実行時オプション
# https://qiita.com/keitean/items/83c7d0d6221ec1b9c63c
set -eux

# パッケージの削除
rm -rf /var/lib/apt/lists/*
echo "en_US.UTF-8 UTF-8" >/etc/locale.gen
locale-gen

# PHP7.4とApache2のインストール
add-apt-repository ppa:ondrej/php
apt -y install php7.4

# MySQL用モジュール
apt -y install php7.4-mysql

# その他必要なPHPモジュールのインストール
# 参考：https://doc4.ec-cube.net/quickstart/requirement
apt -y install php7.4-curl php7.4-cli php7.4-zip php7.4-intl php7.4-xml php7.4-mbstring

# MySQLのインストール
apt -y install mysql-server mysql-client

# MySQLの文字コードと照合順序を設定ファイルとして書き出し
cat << EOS | sudo tee /etc/my.cnf
[mysqld]
character_set_server = utf8mb4
collation_server = utf8mb4_ja_0900_as_cs
EOS

# MySQLを再起動
systemctl restart mysql

# MySQLのデータディレクトリを初期化
# mysqld --initialize-insecure --user=mysql

# EC-CUBE用のdatabaseを作成
mysql -u root << EOT
CREATE DATABASE eccube_db;
CREATE USER eccube@'%' IDENTIFIED WITH mysql_native_password BY 'secret';
GRANT ALL PRIVILEGES on eccube_db.* to eccube@'%';
EOT

# /var/www/ にec-cube 4.1を設置(ドキュメントルート)
git clone -b 4.1 https://github.com/EC-CUBE/ec-cube /var/www/ec-cube

# Composerのインストール
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '906a84df04cea2aa72f40b5f787e49f22d4c2f19492ac310e8cba5b96ac8b64115ac402c8cd292b8a03482574915d1a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

mv ./composer.phar $(dirname $(which php))/composer && chmod +x "$_"
composer --version

# EC-CUBEに必要なパッケージを取得
composer update -d /var/www/ec-cube

echo "インストール完了！"
  

/ 作成したshellを初回起動時に実行するようにVagrantfileを編集
$ vim Vagrantfile

# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/focal64"
  config.vm.network "forwarded_port", guest: 80, host: 8000
  config.vm.provision :init, type: "shell", path: "init.sh"

    # 仮想マシンのCPUとメモリも設定しておく
    config.vm.provider "virtualbox" do |vb|
    # vb.gui = true
    vb.memory = "4096"
    vb.cpus = "2"
  end
end


// 仮想マシンを起動
$ vagrant up
 

仮想マシンを起動するとshellの内容を初回のみ実行して各種パッケージをインストールします。 無事起動が完了したら仮想マシンにsshで入ります。 


// 仮想マシンにsshで入る
$ vagrant ssh
 

2. VSCodeのRemote Developmentを使用してホストマシンから仮想マシンにssh接続

この章では前の章で作成した仮想マシンにVSCodeの拡張プラグインを導入したホストマシンからssh接続を行います。

  

// 1度仮想マシンから出る
$ exit
  • VSCodeを起動する
  • 画面左側の拡張機能タブを選択し、検索窓に「remote develop」と入力
  • 検索結果からRemote Developmentを選択し、プラグインをインストール
  • 左下の緑アイコンからリモートウィンドウを開く
  • メニューからOpen SSH Configuration File...を選択
  • /Users/ユーザー名/.ssh/config を選択し、ファイルを開く
  • 仮想マシンを起動しているコンソールに切り替えて下記コマンドを実行 
    
// 仮想マシンが起動している状態で
$ vagrant ssh-config

// 下記情報をコピー
Host default
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /Users/ユーザー名/vagrant/ec-cube/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
  • コピーした内容を/Users/ユーザー名/.ssh/config に貼り付け and 上書き保存
    • 捕捉: Host defaultのdefault部分は自分がわかりやすい名前に変更すると良い
    • 今回はeccube-defaultに設定
  • 再度左下の緑アイコンからリモートウィンドウを開く
  • メニューからConnect To Host...を選択
  • eccube-defaultを選択し、仮想マシンにssh接続(別ウィンドウでVSCodeが開きます)

ここまでの手順で無事仮想環境にssh接続したVSCodeが開ければ一旦OKです。

次にEC-CUBEを初期状態で動かせるようにしていきます。

  • コンソールから起動中の仮想マシンにsshで入る 
    
$ vagrant ssh
  • Apacheのドキュメントルートをec-cubeに変更する 
    
// 設定ファイルを開く
$ sudo vim /etc/apache2/sites-available/000-default.conf

// INSERTモードに切り替えてから下記の修正をして上書き保存
# DocumentRoot /var/www/html
DocumentRoot /var/www/ec-cube
RewriteEngine On

# 鍵かっこは表示上の都合で全角にしていますが、本来半角なので注意してください!!
＜Directory "/var/www/ec-cube"＞
	AllowOverride All
＜/Directory＞
  • Apache2のmod_rewriteを有効にする 
    
$ sudo a2enmod rewrite
  • Apacheを再起動する 
    
$ sudo systemctl restart apache2
  • ec-cubeインストールコマンドを実行 
    
$ cd /var/www/ec-cube

$ sudo bin/console e:i

// プロビジョニング用のshellで登録した内容を入力(コピペでOKです)
Database Url
> mysql://eccube:secret@127.0.0.1/eccube_db

// Mailer Urlは今回設定しないのでエンター
// Auth Magicはそのままでエンター

ここまでの手順が終わったらブラウザで http://localhost:8000 へアクセスしてみましょう。
EC-CUBEデフォルトTOPページが表示されればOKです
管理画面はデフォルトだと http://localhost:8000/admin です。
id: admin
pass: password



ここからがやや面倒なのですが、VSCodeのRemote Developmentは接続する仮想マシンごとにVSCodeのプラグインをインストールしなければいけません。
そのため、今回紹介するのは必要最低限ではありますが、下記プラグインをeccube-defaultに接続しているVSCodeでもインストールしておきましょう。
※プラグインによってはローカルでインストールしているものが既に仮想マシンでも有効化されている場合もあります。

  • Japanese Language Pack for Visual Studio Code
  • zenkaku
  • indent-railbow
  • Bracket Pair Colorizer
  • Symfony extensions pack

※その他必要に応じてPHP DebugやPHP DocBlocker、php cs fixerなど...


仮想マシンの中で直接ファイル操作を行う

この章では仮想マシンの中でファイル編集などの操作ができるようにしていきます。

ポイントはRemote Developmentでssh接続して仮想マシンをVSCodeで操作しているユーザーがvagrantユーザーという点です。
なのでまずはVSCode側で直接ファイルを編集できるようにファイル/ディレクトリの権限を変更する必要があります。


$ sudo chown -R vagrant:www-data /var/www/

これでVSCode側でファイル内容を変更やファイルの追加・削除ができるようになります。

まずはssh接続先にあるec-cubeディレクトリを開きます。



さっそくVSCode側.envファイルを修正してみましょう。
とりあえず、モードを開発用に切り替えてみます。


Ctrl+sでファイルの上書き保存をしてから、TOPページを更新してみると...。


はい、画面下部にSymfonyのデバッグバーが表示されるようになりました。


次は独自プラグインのひな型生成コマンドを実行してみます。


$ cd /var/www/ec-cube

$ sudo bin/console eccube:plugin:generate
// 全てそのままエンターで進む

コンソールにOK表示を確認したらVSCode側で app/Plugin の中を見てみましょう。



先ほど生成したSampleという名前のプラグインが確認できます。
ここからがこの構築方法の本領発揮です。


試しに app/Plugin/Sample/Controller/Admin/ConfigController.php を開いて、indexアクションにカーソルをのせてみます。
すると、きちんとPHPDocに書かれている内容が表示されます。


また、EC-CUBE本体側にあるクラスを選択して
「定義へ移動」を押すと...


本体側のソースもこのように開くことができます。


もちろんメソッドや変数もこのように候補が表示されます。


まとめ

全体的に簡単な説明にはなってしまいましたが、弊社でも採用している開発環境の構築を紹介させていただきました。
あとはお好みでVSCodeの拡張プラグインを追加してみたり、使いやすいようにカスタマイズしてみてください。

参考

 

関連記事

  • EC-CUBEサイトアワード2021受賞！EC-CUBEサイトアワード2021受賞！ この度、EC-CUBEの構築事例の中から優秀な事例を表彰する「EC-CUBEサイトアワード2021」の「オリジナリティ部門」を、弊社が手がけました、株式会社DUO RING様の「執事眼鏡eyemirror […]
  • [EC-CUBE 4] トップページにカテゴリ一覧を表示するカスタマイズ[EC-CUBE 4] トップページにカテゴリ一覧を表示するカスタマイズ 前回トップページに新着商品を表示するカスタマイズを紹介しました。 今回は、そのコードを利用して特定のカテゴリの商品を表示していきます。 カテゴリには「新入荷」を利用します。「新入荷」以外のカテゴリにすることもできますので、最後までお付き合いください。 ※本記事は、前回の続きと […]
  • EC-CUBE 東京UG 勉強会 / 2019-02-07 レポートEC-CUBE 東京UG 勉強会 / 2019-02-07 レポート 日時：2019年2月7日 19:00から 場所：Connecting The Dots YOYOGI / […]