■目次
ECCube4ダウンロード導入導入(EC2)導入(Vagrant)導入(Docker)インストールカスタマイズプラグインの導入プラグインの作成テストAWSでの稼働メモ
■ECCube4
ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」 https://www.ec-cube.net/ EC-CUBE4 理想のショップは作れる"あなたのための" EC-CUBEできました https://www.ec-cube.net/product/4.0/ EC-CUBE4 管理・運用マニュアル | shiro8 https://www.shiro8.net/manual4/v40x/ EC-CUBE 4.0 開発者向けドキュメント - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/ EC-CUBE1系・2系・3系・4系の違い - Qiita https://qiita.com/nanasess/items/dc8407c48a3dcf982ea2 ■Symfony EC-CUBE4はSymfony3.4をベースに作られている EC-CUBEはなぜSymfonyを選んだのか - Qiita https://qiita.com/chihiro-adachi/items/d1293ec08a5d004fac32 Symfony Book | SymDoc - PHP フレームワーク Symfony3 日本語ドキュメント Wiki http://symdoc.kwalk.jp/doc/book/start Symfony のインストールと設定 | SymDoc - PHP フレームワーク Symfony3 日本語ドキュメント Wiki http://symdoc.kwalk.jp/doc/book/installation 超入門 Symfony3 | シムノート http://symnote.kwalk.jp/public/learning_symfony
■ダウンロード
ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」 https://www.ec-cube.net/ EC-CUBEダウンロード | ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」 https://www.ec-cube.net/download/ 公式サイトからダウンロードしたものには、一部開発ツールが含まれていない? 以下のGitHubからならすべてのファイルが揃っていると思われる EC-CUBE/ec-cube: EC-CUBE is the most popular e-commerce solution in Japan https://github.com/EC-CUBE/ec-cube
■導入
・EC2 ・Vagrant ・Docker について記載する EC2は t2.micro でも、特に遅いとは感じないくらいの速度だった Vagrantは動作が重いが、何とか作業できなくも無いくらいの速度だった Dockerは遅すぎて作業にならないくらいの速度だった VagrantとDockerは、LinuxとWindowsでのファイル同期の速度が問題になっているのかもしれない
■導入(EC2)
■環境の構築 ※apache_php7_mariadb のPlaybookで環境を作成 # amazon-linux-extras install ansible2 -y # amazon-linux-extras install php7.3 -y # ansible --version ansible 2.9.5 # vi /etc/ansible/hosts
[localhost] 127.0.0.1
# exit $ cd /home/ec2-user/ansible $ ansible-playbook site.yml --connection=local http://203.0.113.1/ ■データベースを作成 データベースと接続ユーザを作成 $ mysql -u root -p mysql> GRANT ALL PRIVILEGES ON eccube4.* TO webmaster@localhost IDENTIFIED BY '1234'; mysql> FLUSH PRIVILEGES; mysql> CREATE DATABASE eccube4 DEFAULT CHARACTER SET utf8mb4; mysql> QUIT; ■ECCubeの初期設定 # mkdir /var/www/eccube # cd /var/www/eccube # wget http://downloads.ec-cube.net/src/eccube-4.0.3.zip # unzip eccube-4.0.3.zip # chown -R apache. eccube-4.0.3 # find eccube-4.0.3 -type d -print | xargs chmod 775 # find eccube-4.0.3 -type f -print | xargs chmod 664 パーミッション変更の際に以下の警告が表示されたが、無視して進めて問題無さそう chmod: `eccube-4.0.3/vendor/symfony/finder/Tests/Fixtures/with' にアクセスできません: No such file or directory chmod: `space' にアクセスできません: No such file or directory # cp -rp /var/www/eccube/eccube-4.0.3/. /var/www/main/html … /var/www/main/html/index.php は上書き配置でいい http://203.0.113.1/ にアクセスするとインストール画面が表示されたが、以下が表示されている
[必須] intl拡張モジュールが有効になっていません。 システム要件をご確認ください [推奨] apc拡張モジュールが有効になっていません。
Ansibleで php-intl を追加インストール /home/ec2-user/ansible/role-web/tasks/main.yml
15: - php-intl
これで「必須」が消えた 「推奨」は表示されたままだが、「apc拡張モジュール」はPHP5の機能みたいなので無視して良さそう EC-CUBE4のインストール方法と具体的な手順 - たぶろぐ https://tab-log.com/eccube4-install#apc
■導入(Vagrant)
■環境の構築 ※SELinuxを無効化しておく ※apache_php7_mariadb のPlaybookで環境を作成 $ sudo su - # python --version Python 2.7.5 # yum -y install epel-release # yum -y install ansible # ansible --version ansible 2.9.7 # vi /etc/ansible/hosts
[localhost] 127.0.0.1
# exit $ cd /var/www/ansible $ ansible-playbook site.yml --connection=local http://192.168.33.10/ ■データベースを作成 データベースと接続ユーザを作成 $ mysql -u root -p mysql> GRANT ALL PRIVILEGES ON eccube4.* TO webmaster@localhost IDENTIFIED BY '1234'; mysql> FLUSH PRIVILEGES; mysql> CREATE DATABASE eccube4 DEFAULT CHARACTER SET utf8mb4; mysql> QUIT; ■ECCubeの初期設定 起動後、html 内にECCube4のファイルを丸ごと配置した http://192.168.33.10/ にアクセスすると、しばらく待ったあと以下が表示された
Fatal error: Maximum execution time of 30 seconds exceeded
プログラムが重いようなので、PHPの実行時間を伸ばしてみる # vi /etc/php.ini
61: - { regexp: "max_execution_time = 30", replace: "max_execution_time = 600" }
再読み込みすると、しばらく待ったあと以下が表示された
Warning: SessionHandler::read(): Session data file is not created by your uid
セッションの保存場所が特殊みたいなので、一般的なものにしてみる C:\Users\refirio\Vagrant\eccube4\code\main\html\app\config\eccube\packages\framework.yaml
12:- save_path: '%kernel.project_dir%/var/sessions/%kernel.environment%' 12:+ save_path: '/tmp/%kernel.environment%'
インストール画面が表示されたが、以下が表示されている
[必須] zip拡張モジュールが有効になっていません。 システム要件をご確認ください [必須] intl拡張モジュールが有効になっていません。 システム要件をご確認ください [推奨] apc拡張モジュールが有効になっていません。
Ansibleで php-intl と php-zip を追加インストール C:\Users\refirio\Vagrant\eccube4\code\ansible\role-web\tasks\main.yml
26: - php-intl 27: - php-zip
これで「必須」が消えた 「推奨」は表示されたままだが、「apc拡張モジュール」はPHP5の機能みたいなので無視して良さそう
■導入(Docker)
※公式のDockerfileで起動できなかったので、独自に作成した docker-compose で起動 以前に作成したPHP7環境で起動してみる ※動作が非常に重く、何の工夫もなく使うのは現実的ではない Vagrantで起動する方がマシだが、同期対象を絞るなどで改善の余地はあるみたい ■起動 $ cd /c/Users/refirio/docker/eccube4/docker $ docker-compose build $ docker-compose up -d $ docker-compose down http://192.168.99.100/ http://192.168.99.100/system/ admin / abcd1234 システム要件 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/quickstart_requirement ■ECCubeの初期設定 起動後、html 内にECCube4のファイルを丸ごと配置した http://192.168.99.100/ にアクセスすると、しばらく待ったあと以下が表示された
Warning: SessionHandler::read(): Session data file is not created by your uid
セッションの保存場所が特殊みたいなので、一般的なものにしてみる C:\Users\refirio\docker\eccube4\html\app\config\eccube\packages\framework.yaml
12:- save_path: '%kernel.project_dir%/var/sessions/%kernel.environment%' 12:+ save_path: '/tmp/%kernel.environment%'
インストール画面が表示されたが、以下が表示されている
[必須] zip拡張モジュールが有効になっていません。 システム要件をご確認ください [必須] intl拡張モジュールが有効になっていません。 システム要件をご確認ください [推奨] apc拡張モジュールが有効になっていません。
C:\Users\refirio\docker\eccube4\docker\php\Dockerfile
3:+ libicu-dev \ 4:+ libzip-dev \ 9:- && docker-php-ext-install gd pdo_mysql mysqli mbstring \ 9:+ && docker-php-ext-install gd pdo_mysql mysqli mbstring intl zip \
これで「必須」が消えた 「推奨」は表示されたままだが、「apc拡張モジュール」はPHP5の機能みたいなので無視して良さそう 【EC-CUBE on Docker】「[必須]intl拡張モジュールが有効になっていません」の原因と解決方法 | まいにち1UP!! https://tetrablog.net/eccube-on-docker-no-intl dockerfileでPHPのzip拡張を導入するメモ - Qiita https://qiita.com/Y-Kanoh/items/9d450a6868183557042f Docker php:7.3-fpm で zip モジュールを使えるようにしようとして発生したエラーと解決方法 - oki2a24 https://oki2a24.com/2019/03/20/solve-build-error-to-use-php-zip-module-in-docker-php-7-3-fpm/ ■公式手順でインストールできなかったメモ インストール方法 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/quickstart_install#docker%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%8... 手順通りに実行 $ cd /c/Users/refirio/docker/eccube4 $ docker build -t eccube4-php-apache . The following packages have unmet dependencies: libicu-dev : Depends: libicu57 (= 57.1-6+deb9u3) but 57.1-6+deb9u4 is to be installed E: Unable to correct problems, you have held broken packages. The command '/bin/sh -c apt-get update && apt-get install -y curl apt-utils apt-transport-https debconf-utils gcc build-essential zlib1g-dev git gnupg2 unzip libfreetype6-dev libjpeg62-turbo-dev libpng-dev libzip-dev libicu-dev vim git ssl-cert && docker-php-ext-install -j$(nproc) zip gd mysqli pdo_mysql opcache intl && rm -rf /var/lib/apt/lists/*' returned a non-zero code: 100 libicu57に問題があるらしい C:\Users\refirio\docker\eccube4\Dockerfile
13:- libpng-dev libzip-dev libicu-dev vim git ssl-cert \ 13:+ libpng-dev libzip-dev vim git ssl-cert \
試しに省いてみる configure: error: Unable to detect ICU prefix or no failed. Please verify ICU install prefix and make sure icu-config works. checking for location of ICU headers and libraries... checking for pkg-config... /usr/bin/pkg-config checking for icu-config... no not found The command '/bin/sh -c apt-get update && apt-get install -y curl apt-utils apt-transport-https debconf-utils gcc build-essential zlib1g-dev git gnupg2 unzip libfreetype6-dev libjpeg62-turbo-dev libpng-dev libzip-dev vim git ssl-cert && docker-php-ext-install -j$(nproc) zip gd mysqli pdo_mysql opcache intl && rm -rf /var/lib/apt/lists/*' returned a non-zero code: 1 ICUが無いと言われる $ apt-get install libicu-dev $ sudo yum install libicu-devel これらでインストールできず
■インストール
※URLはVagrantで起動したときのもの あらかじめ hosts でURLを割り当てておいてもいい インストール手順: http://192.168.33.10/install/step1 「ようこそ」が表示されているので「次へ進む」をクリック 「権限チェック」で「アクセス権限は正常です」と表示されていることを確認して「次へ進む」をクリック 「サイトの設定」で以下を入力して「次へ進む」をクリック あなたの店名: テスト店 メールアドレス: refirio.work@gmail.com 管理画面ログインID: admin 管理画面パスワード: abcd1234 管理画面のディレクトリ名: system 「データベースの設定」で以下を入力して「次へ進む」をクリック データベースのホスト名: localhost データベース名: eccube4 ユーザ名: webmaster パスワード: 1234 「データベースの初期化」が表示されるので「次へ進む」をクリック 「インストールが完了しました!」が表示されたら「管理画面を表示」をクリック 上で設定した管理画面情報でログインする http://192.168.33.10/ http://192.168.33.10/system/ ■メール送信 メールを送信する場合は以下を編集する 以下はGmailのSMTPを使う例 C:\Users\refirio\Vagrant\eccube4\code\main\html\.env
25:- MAILER_URL=smtp://localhost:25 25:+ MAILER_URL=smtp://smtp.gmail.com:465?encryption=ssl&auth_mode=login&username=refirio.work@gmail.com&password=XXXXXXXXXXXXXXXX
■コマンドラインインターフェイス コマンドラインインターフェイス - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/quickstart_cli $ cd /var/www/main/html $ bin/console list Symfony 3.4.26 (kernel: Eccube, env: prod, debug: false) Usage: command [options] [arguments] 「bin/console list」を実行して「bin/console: Permission denied」のエラーになる場合、 以下のようにすると実行できることがある $ php bin/console list ■認証キー 管理画面 → オーナーズストア → 認証キー設定 から、認証キーの新規発行と登録ができる 認証キーが共通なら、以前に購入した有料プラグインを再度インストールしたりできるみたい 認証キーを登録しないと、プラグインの一覧など一部機能が使えない
■カスタマイズ
WebデザイナーがEC-CUBE4を触る為に知っておくと良い事 | EC-CUBE CORPORATE BLOG https://www.wantedly.com/companies/ec-cube/post_articles/199543 EC-CUBE4 Template for Adobe XD on Behance https://www.behance.net/gallery/94593359/EC-CUBE4-Template-for-Adobe-XD EC-CUBE 4.0 開発者向けドキュメント - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/ ■ファイル構成 ディレクトリ・ファイル構成 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/spec_directory-structure ■テンプレートの編集 以下の場所にテンプレートがある html\src\Eccube\Resource\template 例えば以下のファイルを編集すると、ログイン画面に反映される html\src\Eccube\Resource\template\default\Mypage\login.twig ただし元のファイルは直接編集せずに、以下に複製配置して編集することが推奨される html\app\template\default\Mypage\login.twig テンプレートは管理画面の「オーナーズストア → テンプレート → テンプレート一覧」から確認できる ダウンロードすると、CSSファイルや画像ファイルに加え、上の手順で複製配置した差分ファイルを取得できる デザインテンプレートの基礎 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/design_template EC-CUBE4:デザインテンプレートのインストール | ITOBEN STYLE Blog https://itoben.com/blog/3751.html ■CSSファイルの編集 ※エラーで進められず GulpでSassをビルドする必要があるみたい まずは以下のようにNode.jsをインストールする $ curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash - $ sudo yum install -y nodejs $ node --version v12.16.3 $ npm --version 6.14.4 npmコマンドでインストール $ cd /var/www/main/html $ npm install npm ERR! code EPROTO npm ERR! syscall symlink npm ERR! path ../acorn/bin/acorn npm ERR! dest /var/www/main/html/node_modules/@gulp-sourcemaps/identity-map/node_modules/.bin/acorn npm ERR! errno -71 npm ERR! EPROTO: protocol error, symlink '../acorn/bin/acorn' -> '/var/www/main/html/node_modules/@gulp-sourcemaps/identity-map/node_modules/.bin/acorn' npm ERR! A complete log of this run can be found in: npm ERR! /home/vagrant/.npm/_logs/2020-05-21T06_27_22_323Z-debug.log エラーになる symlinkが使えない場合、「--no-bin-link」のオプションを付けるといいらしい $ npm install --no-bin-link npm WARN bootstrap@4.1.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself. npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself. added 7 packages from 115 contributors and audited 735 packages in 7.588s found 131 vulnerabilities (76 low, 8 moderate, 47 high) run `npm audit fix` to fix them, or `npm audit` for details $ npm run build > eccube@4.0.0 build /var/www/main/html > run-s build:moc sh: run-s: コマンドが見つかりません npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! eccube@4.0.0 build: `run-s build:moc` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the eccube@4.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/vagrant/.npm/_logs/2020-05-21T06_30_02_632Z-debug.log エラーになる node_modules を削除して、始めからやりなおすといいらしい Laravel-Mixコンパイル時のcode ELIFECYCLEエラーに対応する - Qiita https://qiita.com/ishizukih/items/9673e709832dacaa5155 $ rm -rf node_modules $ rm package-lock.json $ npm cache clear --force $ npm install --no-bin-link $ npm run build > eccube@4.0.0 build /var/www/main/html > run-s build:moc sh: run-s: コマンドが見つかりません npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! eccube@4.0.0 build: `run-s build:moc` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the eccube@4.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/vagrant/.npm/_logs/2020-05-21T06_37_31_405Z-debug.log 相変わらず同じエラーになる /home/vagrant/.npm/_logs/2020-05-21T06_37_31_405Z-debug.log の内容は以下のとおり
0 info it worked if it ends with ok 1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ] 2 info using npm@6.14.4 3 info using node@v12.16.3 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle eccube@4.0.0~prebuild: eccube@4.0.0 6 info lifecycle eccube@4.0.0~build: eccube@4.0.0 7 verbose lifecycle eccube@4.0.0~build: unsafe-perm in lifecycle true 8 verbose lifecycle eccube@4.0.0~build: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/var/www/main/html/node_modules/.bin:/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/opt/puppetlabs/bin:/home/vagrant/.local/bin:/home/vagrant/bin 9 verbose lifecycle eccube@4.0.0~build: CWD: /var/www/main/html 10 silly lifecycle eccube@4.0.0~build: Args: [ '-c', 'run-s build:moc' ] 11 info lifecycle eccube@4.0.0~build: Failed to exec build script 12 verbose stack Error: eccube@4.0.0 build: `run-s build:moc` 12 verbose stack spawn ENOENT 12 verbose stack at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18) 12 verbose stack at ChildProcess.emit (events.js:310:20) 12 verbose stack at maybeClose (internal/child_process.js:1021:16) 12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) 13 verbose pkgid eccube@4.0.0 14 verbose cwd /var/www/main/html 15 verbose Linux 3.10.0-1127.el7.x86_64 16 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "build" 17 verbose node v12.16.3 18 verbose npm v6.14.4 19 error code ELIFECYCLE 20 error syscall spawn 21 error file sh 22 error errno ENOENT 23 error eccube@4.0.0 build: `run-s build:moc` 23 error spawn ENOENT 24 error Failed at the eccube@4.0.0 build script. 24 error This is probably not a problem with npm. There is likely additional logging output above. 25 verbose exit [ 1, true ]
以下はEC2で作業したときのメモだが、やはりエラーで進められず ec2-user で以下を実行 $ curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash - $ sudo yum install -y nodejs $ node --version v12.17.0 $ npm --version 6.14.4 apache で以下を実行 $ node --version v12.17.0 $ npm --version 6.14.4 npmコマンドでインストール $ cd /var/www/main/html $ npm install npm ERR! correctMkdir failed to make directory /usr/share/httpd/.npm/_locks npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/share/httpd/.npm npm ERR! errno -13 npm ERR! npm ERR! Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which has since been addressed. npm ERR! npm ERR! To permanently fix this problem, please run: npm ERR! sudo chown -R 48:48 "/usr/share/httpd/.npm" エラーになったので、ディレクトリを作成して所有者を調整 # mkdir /usr/share/httpd/.npm # chown -R apache. /usr/share/httpd/.npm $ npm install gyp ERR! build error gyp ERR! stack Error: `make` failed with exit code: 2 gyp ERR! stack at ChildProcess.onExit (/var/www/main/html/node_modules/node-gyp/lib/build.js:262:23) gyp ERR! stack at ChildProcess.emit (events.js:315:20) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) gyp ERR! System Linux 4.14.173-137.229.amzn2.x86_64 gyp ERR! command "/usr/bin/node" "/var/www/main/html/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd /var/www/main/html/node_modules/node-sass gyp ERR! node -v v12.17.0 gyp ERR! node-gyp -v v3.8.0 gyp ERR! not ok Build failed with error code: 1 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.9.3 postinstall: `node scripts/build.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the node-sass@4.9.3 postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /usr/share/httpd/.npm/_logs/2020-05-27T06_00_31_503Z-debug.log エラーになったのでやりなおしてみる $ rm -rf node_modules $ rm package-lock.json $ npm cache clear --force $ npm install added 726 packages from 548 contributors and audited 726 packages in 25.499s 18 packages are looking for funding run `npm fund` for details found 14 vulnerabilities (2 low, 4 moderate, 8 high) run `npm audit fix` to fix them, or `npm audit` for details ┌──────────────────────────────────────────────────────────────┐ │ npm update check failed │ │ Try running with sudo or get access │ │ to the local update config store via │ │ sudo chown -R $USER:$(id -gn $USER) /usr/share/httpd/.config │ └──────────────────────────────────────────────────────────────┘ インストールできた $ npm run build npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! eccube@4.0.0 build:moc:sass: `gulp sass` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the eccube@4.0.0 build:moc:sass script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /usr/share/httpd/.npm/_logs/2020-05-27T06_08_12_615Z-debug.log ERROR: "build:moc:sass" exited with 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! eccube@4.0.0 build:moc: `run-s build:moc:*` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the eccube@4.0.0 build:moc script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /usr/share/httpd/.npm/_logs/2020-05-27T06_08_12_650Z-debug.log ERROR: "build:moc" exited with 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! eccube@4.0.0 build: `run-s build:moc` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the eccube@4.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /usr/share/httpd/.npm/_logs/2020-05-27T06_08_12_685Z-debug.log ビルドしようとするとエラーになる EC-CUBE4初心者のためのテンプレートカスタマイズ方法 | ホムペディア https://homupedia.com/eccube4-template-customize.html ■下層ページの作成(管理画面から作成) 管理画面の「コンテンツ管理 → ページ管理 → 新規作成」から作成できる ヘッダなどが表示されたページにしたければ、「レイアウト設定」で「下層ページ用レイアウト」などを選択する EC-CUBE4で新しくページを追加する方法 | ホムペディア https://homupedia.com/eccube4-create-pages.html レイアウトの利用 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/design_layout URLには「user_data」という文字が含まれるが、これは設定で他のものに変更できる EC-CUBE4でuser_dataを変更する - Qiita https://qiita.com/chihiro-adachi/items/3218275ea4fc6d485fe5 ■下層ページの作成(コントローラを用意して作成) ※未検証 ※既存ページとURLが重複するとエラーになるかも?キャッシュ問題でそう見えただけかも? Controllerのカスタマイズ - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/customize_controller コントローラを作成 html\app\Customize\Controller\TestPageController.php
<?php namespace Customize\Controller; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; use Symfony\Component\HttpFoundation\Response; class TestPageController { /** * @Method("GET") * @Route("/test") */ public function testMethod() { return new Response('Hello test page !'); } }
キャッシュを削除 $ cd /var/www/main/html $ bin/console cache:clear --no-warmup 以下にアクセスすると「Hello test page !」と表示される http://eccube4.local/test 引き続き、テンプレートファイルに対応させてみる html\app\Customize\Controller\TestPageController.php
<?php namespace Customize\Controller; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template; use Symfony\Component\HttpFoundation\Response; class TestPageController { /** * @Method("GET") * @Route("/test") * @Template("Test/index.twig") */ public function testMethod() { return ['message' => '下層ページの作成']; } }
html\app\template\default\Test\index.twig
<h3>Hello !</h3> <p>message={{ message }}</p>
以下にアクセスすると「Hello ! message=下層ページの作成」と表示される http://eccube4.local/test 以下のようにすると共通のbodyタグなどが反映される html\app\template\default\Test\index.twig
{% extends 'default_frame.twig' %} {% block main %} <h3>Hello !</h3> <p>message={{ message }}</p> {% endblock %}
ヘッダ・フッタ・サイドバーなどの反映方法は要調査。レイアウトの指定が必要そうだがどうするか レイアウト情報のデータベース登録が必須なら、プラグイン化する方がいいか データの参照など、引き続き以下を参考に進める Controllerのカスタマイズ - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/customize_controller ■下層ページの作成(プラグインとして作成) ※未検証 [EC-CUBE4] ヘッダー・フッター付きの新規ページを作成する方法→プラグイン化 - Qiita https://qiita.com/seiyaan/items/382e3d2107ca859c38ad ■管理画面内ページの作成 ※未検証 EC-CUBE4カスタマイズ - 4系で管理画面に2ステップで新規ページを作る方法 https://umebius.com/eccube/eccube4_create_new_admin_page/ EC-CUBE4カスタマイズ - 4系で管理画面に新規メニュー項目を追加する方法 https://umebius.com/eccube/ecceube4_insert_new_admin_menu/ ■会員情報に項目を追加 EC-CUBE4カスタマイズ - [4系] 新規会員登録画面に項目を追加する方法 https://umebius.com/eccube/eccube4-add-new-form-item-customer/ html\app\Customize\Entity\CustomerTrait.php を作成
<?php namespace Customize\Entity; use Doctrine\ORM\Mapping as ORM; use Eccube\Annotation\EntityExtension; /** * @EntityExtension("Eccube\Entity\Customer") */ trait CustomerTrait { /** * @var string|null * @ORM\Column(type="string", length=14, nullable=true) * @Eccube\Annotation\FormAppend( * auto_render=false, * type="\Symfony\Component\Form\Extension\Core\Type\TextType", * options={ * "required": false, * "label": "携帯電話番号", * "attr": {"placeholder": "例:09000000000"} * }) */ private $mobile_number; /** * @return string|null */ public function getMobileNumber() { return $this->mobile_number; } /** * @param string|null $mobile_number * @return CustomerTrait */ public function setMobileNumber($mobile_number) { $this->mobile_number = $mobile_number; return $this; } }
引き続き、コンソールで作業 $ cd /var/www/main/html $ bin/console cache:clear --no-warmup 以下に保存されているキャッシュがクリアされる html\var\cache $ bin/console eccube:generate:proxies 以下に、トレイトを認識させるためのプロキシファイルが作成される ファイル内の「use \Customize\Entity\CustomerTrait;」で、上記ファイルが読み込まれる html\app\proxy\entity\src\Eccube\Entity\Customer.php $ bin/console cache:clear --no-warmup $ bin/console eccube:schema:update --force --dump-sql 「[OK] Database schema updated successfully!」と表示され、 dtb_customerテーブルの最後に「mobile_number」が追加される これは「ALTER TABLE dtb_customer ADD mobile_number VARCHAR(14) DEFAULT NULL;」と同じ効果 なお「[OK] Nothing to update - your database is already in sync with the current entity metadata.」と表示された場合、先にキャッシュの削除を行っておく html\src\Eccube\Resource\template\default\Entry\index.twig を複製して html\app\template\default\Entry\index.twig を作成し、以下を追加する
<dl> <dt> {{ form_label(form.mobile_number, '携帯電話番号', { 'label_attr': { 'class': 'ec-label' }}) }} </dt> <dd> <div class="ec-telInput{{ has_errors(form.mobile_number) ? ' error' }}"> {{ form_widget(form.mobile_number) }} {{ form_errors(form.mobile_number) }} </div> </dd> </dl>
html\src\Eccube\Resource\template\default\Entry\confirm.twig を複製して html\app\template\default\Entry\confirm.twig を作成し、以下を追加する
<dl> <dt> {{ form_label(form.mobile_number, '携帯電話番号', { 'label_attr': { 'class': 'ec-label' }}) }} </dt> <dd>{{ form.mobile_number.vars.data }} {{ form_widget(form.mobile_number, { type : 'hidden' }) }} </dd> </dl>
html\src\Eccube\Resource\template\default\Mypage\change.twig を複製して html\app\template\default\Mypage\change.twig を作成し、以下を追加する
<dl> <dt> {{ form_label(form.mobile_number, '携帯電話番号', { 'label_attr': { 'class': 'ec-label' }}) }} </dt> <dd> <div class="ec-telInput{{ has_errors(form.mobile_number) ? ' error' }}"> {{ form_widget(form.mobile_number) }} {{ form_errors(form.mobile_number) }} </div> </dd> </dl>
これでユーザ側に携帯電話番号欄が追加される 引き続き、管理側も調整を行う html\src\Eccube\Resource\template\admin\Customer\edit.twig を複製して html\app\template\admin\Customer\edit.twig を作成し、以下を追加する
<div class="row mb-2"> <div class="col-3"> <span>{{ 'admin.common.mobile_number'|trans }}</span> <span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span> </div> <div class="col"> {{ form_widget(form.mobile_number) }} {{ form_errors(form.mobile_number) }} </div> </div>
管理画面のラベルを正しく表示させるには、以下のリソースファイルに文言を追加する (他にも追加が必要かもしれないが要調査) html\src\Eccube\Resource\locale\messages.ja.yaml
admin.common.mobile_number: 携帯電話番号
html\src\Eccube\Resource\locale\messages.en.yaml
admin.common.phone_number: Mobile Phone
これで管理側に携帯電話番号欄が追加される 引き続き、PDFなどの掲載内容も必要に応じて調整が必要かもしれない ■商品に項目の追加 ※未検証 【EC-CUBE4】商品規格に項目を追加し、バリデーションを入れる | クマひよ工房 https://kumahiyo.com/add-product-class-validation/ ■対応ステータスの追加 設定 → システム設定 → マスタデータ管理 → mtb_order_status でステータスを管理できる ただしステータス遷移なども定義が必要みたい 未検証だが、以下が参考になりそう EC-CUBE4で受注ステータスを追加する - Qiita https://qiita.com/chihiro-adachi/items/a7c518f49c0182f297fa
■プラグインの導入
プラグイン → プラグインを探す から「商品レビュー管理プラグイン」をインストール インストール完了のダイアログが表示されたら「完了」ボタンを押す プラグイン一覧画面に遷移するので、プラグインを有効化する
■プラグインの作成
■プラグインでページを作成 $ bin/console eccube:plugin:generate EC-CUBE Plugin Generator Interactive Wizard =========================================== name [EC-CUBE Sample Plugin]: > サンプルページプラグイン code [Sample]: > SamplePage ver [1.0.0]: > 1.0.0 [OK] Plugin was successfully created: サンプルページプラグイン SamplePage 1.0.0 以下の場所にプラグインの雛形が作成される html\app\Plugin\SamplePage ページ表示用にファイルを作成する html\app\Plugin\SamplePage\Controller\SampleController.php
<?php namespace Plugin\SamplePage\Controller; use Eccube\Controller\AbstractController; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template; use Symfony\Component\Routing\Annotation\Route; class SampleController extends AbstractController { /** * @Route("sample", name="sample") * @Template("@SamplePage/default/index.twig") */ public function index() { return []; } }
html\app\Plugin\SamplePage\Resource\template\default\index.twig
{% extends 'default_frame.twig' %} {% block main %} <p>サンプルページです</p> {% endblock %}
以下のコマンドでプラグインをインストールできる $ bin/console eccube:plugin:install --code=SamplePage 管理画面の「プラグイン → プラグイン一覧」の「ユーザー独自プラグイン」に、作成したプラグインが表示される 一覧に表示されている三角の「有効化」ボタンで、プラグインを有効化できる もしくは、以下のコマンドでプラグインを有効化することもできる $ bin/console eccube:plugin:enable --code=SamplePage プラグインを有効化すると、以下でプラグインによって作成されたページを表示できる http://eccube4.local/sample 一覧に表示されている四角2つの「無効化」ボタンで、プラグインを有効化できる もしくは、以下のコマンドでプラグインを無効化することができる $ bin/console eccube:plugin:disable --code=SamplePage ■ヘッダとフッタを表示 引き続き、プラグインの有効化時にページとレイアウトに関する情報がデータベースに登録されるようにする 以下のファイルを作成する このファイルはプラグインの有効化・無効化時に実行されるので、ここにページレイアウト登録のためのプログラムを記述する html\app\Plugin\SamplePage\PluginManager.php
<?php namespace Plugin\SamplePage; use Eccube\Entity\PageLayout; use Eccube\Plugin\AbstractPluginManager; use Eccube\Repository\LayoutRepository; use Eccube\Repository\PageLayoutRepository; use Eccube\Repository\PageRepository; use Symfony\Component\DependencyInjection\ContainerInterface; class PluginManager extends AbstractPluginManager { // 1: トップページ用レイアウト, 2:下層ページ用レイアウト const ADD_PAGE_LAYOUT_ID = 2; // ページ設定 const ADD_PAGE_NAME = "サンプルページ"; const ADD_PAGE_URL = "sample"; const ADD_PAGE_FILE_NAME = "SamplePage/Resource/template/default/index"; const ADD_PAGE_META_ROBOTS = "noindex"; // or null // 0: Controller不要, 2: Controller必要 const ADD_PAGE_EDIT_TYPE = 2; /** * プラグイン有効化時に走る * @param array $meta * @param ContainerInterface $container */ public function enable(array $meta, ContainerInterface $container) { $this->createPage($container); } /** * プラグイン無効化時・アンインストール時に走る * @param array $meta * @param ContainerInterface $container */ public function disable(array $meta, ContainerInterface $container) { $this->deletePage($container); } /** * ページ情報を挿入する dtb_page, dtb_page_layout * @param ContainerInterface $container */ private function createPage(ContainerInterface $container) { // dtb_page に存在しないことを確認する $pageRepository = $container->get(PageRepository::class); $pageFindResult = $pageRepository->findOneBy(["url" => $this::ADD_PAGE_URL]); if (is_null($pageFindResult) == false) return; // dtb_layout から下層ページ用レイアウトを取得する $layoutRepository = $container->get(LayoutRepository::class); $underLayout = $layoutRepository->findOneBy(["id" => $this::ADD_PAGE_LAYOUT_ID]); // dtb_page_layout の次のSortNoを取得する $pageLayoutRepository = $container->get(PageLayoutRepository::class); $LastPageLayout = $pageLayoutRepository->findOneBy([], ['sort_no' => 'DESC']); $nextSortNo = $LastPageLayout->getSortNo() + 1; // EntityManager準備 $em = $container->get('doctrine.orm.entity_manager'); $em->beginTransaction(); // INSERT INTO dtb_page $page = $pageRepository->newPage(); $page->setName($this::ADD_PAGE_NAME) ->setUrl($this::ADD_PAGE_URL) ->setFileName($this::ADD_PAGE_FILE_NAME) ->setEditType($this::ADD_PAGE_EDIT_TYPE) ->setMetaRobots($this::ADD_PAGE_META_ROBOTS); $em->persist($page); $em->flush($page); // INSERT INTO dtb_page_layout $pageLayout = new PageLayout(); $pageLayout->setLayout($underLayout) ->setLayoutId($underLayout->getId()) ->setPageId($page->getId()) ->setSortNo($nextSortNo) ->setPage($page); $em->persist($pageLayout); $em->flush($pageLayout); $em->commit(); } /** * ページ情報を削除 dtb_page, dtb_page_layout * @param ContainerInterface $container */ private function deletePage(ContainerInterface $container) { // dtb_page に存在することを確認する $pageRepository = $container->get(PageRepository::class); $page = $pageRepository->findOneBy(["url" => $this::ADD_PAGE_URL]); if (is_null($page)) return; // EntityManager準備 $em = $container->get('doctrine.orm.entity_manager'); $em->beginTransaction(); // DELETE FROM dtb_page WHERE インストール時にINSERTしたページ $em->remove($page); $em->flush($page); // DELETE FROM dtb_page_layout WHERE インストール時にINSERTしたページレイアウト $pageLayoutRepository = $container->get(PageLayoutRepository::class); $pageLayout = $pageLayoutRepository->findOneBy(["page_id" => $page->getId()]); if(is_null($pageLayout) === false){ $em->remove($pageLayout); $em->flush($pageLayout); } $em->commit(); } }
プラグインを無効化し、再度有効化する これによって、上記で作成したファイルの内容が実行される $ bin/console eccube:plugin:disable --code=SamplePage $ bin/console eccube:plugin:enable --code=SamplePage 以下を再読込すると、ヘッダやフッタが表示されている http://eccube4.local/sample ■既存ページに情報を表示 データの表示はEvent経由で行う必要があるみたい 以下が参考になりそう EC-CUBE4系のプラグインを開発してみた - Qiita https://qiita.com/yoshiharu-semachi/items/03817d6dd883b000348f 以下、実際に試したメモ プラグイン一覧 → サンプルページプラグイン → 設定 で「名前」に「テスト」登録しておく 以下にEntityが作成されていることを確認する C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Entity\Config.php 以下にRepositoryが作成されていることを確認する C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Repository\ConfigRepository.php 以下にFormが作成されていることを確認する(管理画面のフォームに項目を追加するためのもの?要確認) C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Form\Type\Admin\ConfigType.php 以下にControllerが作成されていることを確認する C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Controller\Admin\ConfigController.php 以下にEventが作成されていることを確認する C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Event.php Event.php の内容を以下のように編集する
<?php namespace Plugin\SamplePage; use Eccube\Event\TemplateEvent; use Plugin\SamplePage\Repository\ConfigRepository; use Symfony\Component\EventDispatcher\EventSubscriberInterface; class Event implements EventSubscriberInterface { /** * @var ConfigRepository */ protected $ConfigRepository; /** * ProductReview constructor. * * @param ConfigRepository $ConfigRepository */ public function __construct(ConfigRepository $ConfigRepository) { $this->ConfigRepository = $ConfigRepository; } /** * 配列のキーはイベント名、値は呼び出すメソッド名です。 * * @return array */ public static function getSubscribedEvents() { return [ 'Product/detail.twig' => 'StockShowTwig', ]; } /** * @param TemplateEvent $event */ public function StockShowTwig(TemplateEvent $event) { $twig = '@SamplePage/default/Product/stock_show.twig'; // addSnippet()関数で指定したテンプレートを<body>タグの下部に追加できます。 $event->addSnippet($twig); $Config = $this->ConfigRepository->get(); $parameters = $event->getParameters(); $parameters['pluginName'] = $Config->getName(); $event->setParameters($parameters); } }
以下のファイルを作成する C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Resource\template\default\Product\stock_show.twig
{# Style #} <style type="text/css"> #stock_show_area { padding: 0 0 14px 0; border-bottom: 1px dotted #ccc; } #stock_show_area p { font-size: 18px; } </style> <script> {# JQueryのinsertAfterメソッドを使いProduct/detail.twigの<div class="ec-productRole__tags">の直後に挿入 #} $(function() { $('#stock_show_area').insertAfter($('.ec-productRole__tags')); }); </script> {# 規格あり商品の場合 #} {% if Product.hasProductClass %} {# 規格なし商品の場合 #} {% else %} {% if Product.getStockMin > 0 and Product.getStockMin <= 100 %} <div id="stock_show_area"> <p>残り {{ Product.getStockMin }} 点です。ご注文はお早めに! by {{ pluginName }}</p> </div> {% endif %} {% endif %}
これで完成。商品在庫数が100個以下なら、商品詳細ページに「ご注文はお早めに!!」のメッセージが表示される 表示されなければキャッシュの可能性があるので、以下でキャッシュのクリアを試す $ bin/console cache:clear --no-warmup ※引き続き、登録項目の追加を試したい 「残り○点です」の基準値を管理画面から登録できるようにして、それをもとに画面に表示できるようにしたい
■テスト
※未検証
■AWSでの稼働
※未検証 意外に簡単!?最新EC-CUBEのAWSインストール方法 【ネットショップ構築最前線】 https://regolith.diezon.co.jp/ec11_aws.detail.html EC-CUBE4の立ち上げ〜AWSにデプロイするまで - ひろこま Hack Log https://www.mahirokazuko.com/entry/2020/01/03/235548 [備忘録] EC-CUBE4をnginx上で動かす | planet-green.com https://planet-green.com/eccube4-on-nginx/3235
■メモ
■仮登録と本登録 会員登録をすると、いったん仮登録状態になる 確認の旨のメールが送信され、メール内のURLをクリックすると本会員登録される 本会員登録されると、完了の旨のメールが送信される 仮登録の状態だと、ログインしようとしても 「ログインできませんでした。入力内容に誤りがないかご確認ください。」 のエラーになる ■未検証 ・プラグインでのページ作成とプラグインなしのページ作成を試す。データベース連動も含めて ・プラグインの導入を試す 「おすすめ商品管理プラグイン」は機能的に分かりやすそうだし、公式プラグインなので丁度いいかも ・バリデーションの挙動を確認する ・テンプレート内の form_widget や url は独自に定義されている? ・リポジトリは作らなくてもいい? ・Laravelのように、コンストラクタでサービスを受け取っている? EC-CUBE4 デザインカスタマイズ(あっさり解説) - Qiita https://qiita.com/kakuta_yu/items/d36f2e746b59f5db7557 EC-CUBE4 アーカイブ - U-Mebius https://umebius.com/eccube/category/ec-cube4/ EC-CUBE4カスタマイズ - [4系] 新規会員登録画面に項目を追加する方法 https://umebius.com/eccube/eccube4-add-new-form-item-customer/