EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

弊社では主にWordpressの開発案件もしくはECサイトの構築案件を請け負うことがとても多いのですが。
ECサイトの構築にはEC-CUBEを使うという方も少なくないのではないでしょうか。
EC-CUBEでの制作となると、1番の悩みがローカル開発環境をどうしようという点。

WordPressでの開発環境はLocal by Flywheelが便利すぎるので、愛用しています。
Local by Flywheelを使えば、開発スタートまでの時間をとても短く出来るため、EC-CUBEでも使えないものかと考えていました。
実際に設定してみると驚くほど簡単にEC-CUBEを動作させる事ができました。

そこで今回はEC-CUBEのローカル開発環境をLocal by Flywheelで構築する方法を詳しくご説明したいと思います。

EC-CUBEをLocal by Flywheelで動かそう。

EC-CUBE本体をダウンロードしてくる。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

まずはEC-CUBEの本体をダウンロードしておきましょう。
今回私は3系をダウンロードしました。

Local by Flywheelの設定

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

まずはLocal by Flywheelを立ち上げ、左下のAdd Local Siteから追加します。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

サイトネームを設定します。
今回は分かりやすくec-cubeとしました。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

サーバーの構成や設定を変更できるのですが、Customを選択し、Web Serverをnginxからapacheに変更します。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

nginxで動くのかどうかは検証していませんが、下記のソフトウェア要件でApacheとなっているため、素直にApacheにしておくのが良いでしょう。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

Local by Flywheelでの設定は主にこれで終了です。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

あとはAdd siteすると、コンテナが追加されたのではないでしょうか。
ここまではWordpressの開発環境を追加するときと同じですね。

EC-CUBE本体の配置

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法
(Local by Flywheel→Localにフォルダ名を変更しています。)

設定が一通り終わったら、Local by Flywheelのフォルダ内に先程追加したec-cubeというフォルダが作成されています。
Local by Flywheel/ec-cube/app/public以下のファイルを全て削除します。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

削除が終わったら先程ダウンロードした、EC-CUBE本体のデータを直接放り込みます。

EC-CUBEインストール

あとはEC-CUBEをインストールするだけ。

http://[サイト名]/html/install.phpにアクセスすると下記のインストール画面が表示されたのではないでしょうか。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

ここからEC-CUBEの初期設定を行っていきます。
まずは何も考えずに次へ進むを選択。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

権限チェックも特に問題なくパスするかと思います。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

サイト設定は好きなように設定して下さい。
私はすべてtestにしました。

セキュリティの設定

管理画面のディレクトリ名が後々の管理画面へのアクセスURLとなります。
インストール完了後はhttp://[サイト名]/html/[設定したディレクトリ名]という感じです。
私の場合はhttp://ec-cube.local/html/testが管理画面への接続URLとなります。

メーラー設定

ここで一番大切な設定があります。
オプションを表示をクリックするとオプションが表示されます。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

メールの設定の中に、メーラーバックエンドという項目があります。
ここを必ず【mail(PHPの読み込み関数mail()を使用してメールを送信】を選択しておきましょう。
選択していなければ、後々エラーが発生する原因となるので必ず設定されているか注意しておくようにしてください。

データベース設定

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

データベースの設定はとても簡単です。
Local by Flywheelに戻りDATABASEの欄を見てみましょう。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

基本的にはここに書かれている値を入力するだけでOKです。

データベースのホスト名:localhost
ポート番号:(空)
データベース名:local
ユーザ名:root
パスワード:root

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

あとはデータベースの初期化を行ない、設定完了です。

EC-CUBEのローカル開発環境をlocal by flywheelで行う方法

サイトトップ:http://[サイト名]/html
管理画面:http://[サイト名]/html/[設定したディレクトリ名]

上記パスでそれぞれアクセスできるのを確認したらLocal by Flywheelでのローカル開発環境の構築は完了です。
あとはblueprintを作成しておけば、使い回しが楽になるでしょう。

管理画面のパスを忘れてしまったら

public/app/config/path.ymlに書かれているので確認してみましょう。

EC-CUBEのローカル開発環境はLocal by Flywheelが最強

とても簡単に、潰しの効くローカル開発環境が開発環境できるLocal by Flywheel。
WordpressとEC-CUBEの制作どちらでも使えるようにしておけば、いろいろなツールを行き来せずにすみます。
自分専用の開発環境を構築し、EC-CUBEの開発をスムーズに行っていきましょう。

PR

Instagram Feed

Something is wrong.
Instagram token error.
Load More

Instagram

WEB DIRECTOR

m.k

2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。

他の投稿を見る →