エックスサーバーで稼働しているEC-Cubeをコピーしてローカルで動作する保守環境にする（画像出ない）

EC-cubeを勉強がてら稼働していましたが、この度本番稼働に移行しました。まだまだ作りかけ感はありますが、基本は抑えてあるので、微調整はトラフィックの増加に合わせてしていけばいいという感じです。

とはいえ、開店したままのメンテナンスはそれなりに恐いものです。なので、現行の環境を丸っとXamppなんかで動かせればいいなと思ったので、チャレンジしました。バックアップだとか、マイグレーションだどかをするときの経験値や参考にもなりそうなので記録を取ります。

※EC-CUBEは株式会社イーシーキューブの商標です

現行の環境まとめ

EC-Cube4.2.2
OSXserverは非公開だがUbuntu18系っぽい？
DBMySQL 10.5.13-MariaDB-log
phpphp-7.4.33-2
構築方法Xserverの簡単インストール機能を利用

備考として、有料のテンプレート（BootCube・UIcube）を実装してあります。いずれはそのテンプレートなしでどうにかできればいいなと思っているので、スキルに合わせてまたゼロから構築していきたい。私にスキルが無いせいとしか思わないけど、それらに起因したと思われる不具合が出たりしてなんか心配なのと、ネイティブなEC-cubeの情報が参考にしにくくなると思われるため。

とはいえ、今回は愚直に今の環境を持ってくることに集中します。

想定しているシナリオ

  1. Xserverの機能を使ってバックアップを取る
  2. 入れ物を用意する（Windows上のXampp）
  3. バックアップを入れ物に復元

LinuxをHyper-V上に構築してそこに入れることも考えましたが、付加作業が増えるので取り急ぎはXampp上に作っていこうと思います。Hyper-Vは仕事柄さんざん使ってきましたが、今回はそのあたりのスキルを養成することは目的としないようにしないと、発散しそう…

Xserverからバックアップを採取

まずはオリジナルをコピーすることから始めないと始まりません。

参考にさせていただいたサイト様はこちら。

バックアップ・復元方法

DBのバックアップ

XserverはDBのバックアップが簡単です。助かります。ログインしてサーバーパネルから、「MySQLバックアップ」を使って、「現在のMySQLをダウンロード」メニューからダウンロードします。

無事にSQLファイルがダウンロードできました。

ファイルのバックアップ

EC-cubeのファイルをダウンロードしていきます。こちらはサーバーパネルの右上にある「ファイルマネージャ」を使っていきます。

EC-Cubeをインストールしているドメイン名のフォルダを選択して、「ダウンロード」します。

こちらも、ダウンロードできました。自動でzipにしてくれています。

これで必要なデータは準備できました。次は入れ物を作って、そこで実行するところまでです。

Xamppインストール

Xamppをダウンロード

EC-cubeのシステム情報で確認したphpのバージョンが7.4.33なので、それに合わせたバージョンをダウンロードします。

XAMPP Installers and Downloads for Apache Friends

上記URLにアクセスしたら「ダウンロード」を選択。

for Windowsの「More Downloads」を開いていきます。

ページ内検索（Ctrl＋F）で「7.4.33」を探してダウンロードします。

Xamppインストール

今回は環境の持ち運びが簡単にできるようにと思いポータブル・インストーラーを使用します。インストーラーは起動直後にUACに関する警告がありますが、大方「UACきちんとしておかないと、インストールのパーミッション設定失敗するよ」みたいな警告文だと思います（適当）

インストール先のディレクトリは、C\Program Filesなどは避けた方が無難です。C:\直下にxamppというでディレクトリを作ってもいいですし、Dドライブがある方はD:\xamppでもいいと思います。私はメインドライブのパーティションを二つに分割しているので、D:\xamppにしました。

言語設定は変えなくても問題ないでしょう。どのみちドイツ語か英語しか選べません。

Xampp設定（phpMyAdmin）

インストールが終わったら、ApacheとMySQLを起動して、セキュリティ関連を許可しておきます。

DBをインポートしたいので、MySQLのAdminをクリック。

XserverのDBを構築した際の情報をもとに作成していきます。左側のメニューで「新規作成」。

右側でDB名を入力して「作成」をクリック。

無事に作成されたようです。DB周りは不慣れなのでいつも緊張する。


その後DBをインポートします。作ったDBを選択して、右上にある「インポート」からインポートしていきます。Xserverからダウンロードしたsqlファイルを指定します。

無事に終了したようです。

忘れずにユーザーアカウントを作成しておきます。作ったDBをクリックして「権限」をクリックします。

こちらも、XserverでEC-Cubeをインストールした際に設定したものと合わせます。控えがない場合はenvファイルに入ってると思います。

Xampp設定（php.ini）

XamppのApache→Configからphp.iniを開くことができるのでそうします。

変更前変更後
;extension=intlextension=intl
max_execution_time=30max_execution_time =120

直す場所はXamppで開発環境を構築する公式マニュアルを参考にしました。
https://doc4.ec-cube.net/quickstart/gui_win_install

Xampp上にEC-cubeを復元

いよいよ大詰めです。ファイル関係を設置して、設定ファイルを保守環境に合わせて変更します。

データの配置

D:\xampp\htdocs\<保守環境が分かる文字列>として放り込んでいきます。ダウンロードしたZIPの中にある「public_html」配下が本体です。本番環境では「public_html」というディレクトリであることが分かるように、文字列を工夫しておくといいですね。

envファイルの修正

直下にある.envというファイルをローカル環境に合わせて修正します。

TRUSTED_HOSTS=IPアドレスと、localhostでのアクセスを許可する記述へ変更
ECCUBE_FORCE_SSL=0にして強制SSLをオフにする。

うまくいかなかった

この後、ログを見ながら何度かいろいろと調整しました。データベースと、ファイルのコピーをしておけば大体あとはenvかhtaccessファイルを直すだけなのですが、どうしても画像が読み込まれませんでした。

コンテンツ管理のファイル管理からuser_file配下が全く認識されていません。ここをなんとかできればいいのですが、こうなるともう一つのアプローチとして、EC-Cubeをゼロから構築してファイルとデータを上書きするというやり方で再チャレンジしたいと思います。

EC-cubeEC-Cube,Webアプリ

Posted by Keisuke