ローディング中

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本体をダウンロードしてくる。

スクリーンショット 2018 05 11 午後7 27 39

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

Local by Flywheelの設定

Ec cube install 1

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

Ec cube install 2

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

Ec cube install 3

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

Ec cube install 4

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

スクリーンショット 2018 05 11 午後7 32 15

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

Ec cube install 6

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

EC-CUBE本体の配置

Ec cube install 7
(Local by Flywheel→Localにフォルダ名を変更しています。)

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

Ec cube install 8

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

EC-CUBEインストール

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

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

Ec cube install 9

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

Ec cube install 10

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

Ec cube install 11

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

セキュリティの設定

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

メーラー設定

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

Ec cube install 12

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

データベース設定

Ec cube install 14

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

Ec cube install 13

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

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

Ec cube install 15

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

Ec cube install 16

サイトトップ: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の開発をスムーズに行っていきましょう。

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.