ローカル環境にEC-CUBEを構築する

# 初めに

　Hardeningというセキュリティの競技会でEC-CUBEを使用したECサイトを使用したので、これからも参加するときに役に立つと思いローカル環境に構築しました。初めはLinuxかUbuntuに構築しようと考えていましたが、記事の投稿や商品の値段変更、出品などの方法を確認したかっただけでXAMPPを使う方が簡単そうだったのでXAMPPを使用しました。いつかLAMP環境にも構築してまとめます。

# 用意するもの XAMPP環境

・**xampp**

https://www.apachefriends.org/jp/download.html

　XAMPPを起動してApacheとMySQLのを起動確認をしてください。エラーが発生するようでしたら再度インストールしなおしてください。また、XAMPPは非常に壊れやすいので丁寧に扱ってください。本当にすぐ壊れるからね...
 
 　終了後に画像のエラーが発生する場合は、``xampp-control.ini``というファイルにフルコントロール権限を付与してください。それでエラーは発生しなくなります。
 
![スクリーンショット 2024-10-23 231036.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/25c2bc8a-4e6a-274e-1c19-26129231a0ba.png)


・**composer**

https://getcomposer.org/download/

　``Composer-Setup.exe``をダウンロードし実行してください。 　
　画面の指示に従うだけで完了です。

・**Command Prompt**

Windowsにデフォルトであるターミナルとは違い昔ながらのCommand Pronptを使用します。

***準備する方法***
①歯車マークの「設定」→「システム」→「開発者向け」まで行く
②「ターミナル」のところを「Windowsコンソールホスト」を選択し、閉じる
③検索バーより「コマンドプロンプト」を検索
④昔ながらの「コマンドプロンプト」が通常通り起動すれば成功

***【ターミナルではなくCommand Pronptを使用する理由】***
①win11の仕様変更にともない、強制的にターミナルというソフトを通して「コマンドプロンプト」が起動していた
②そのターミナルにて、日本語入力などを行うとフリーズするバグ的なものが存在する模様

# インストール

準備ができたらいよいよEC-CUBEインストールに入ります。基本的には、以下のサイトを基にインストールを進めていきますが、一部の情報が不十分であったため、補足して進めたいと思います。

https://doc4.ec-cube.net/quickstart/command_install

## １.xamppのphp.iniを変更する
　コメントアウトを削除しphpの拡張モジュールを有効化する作業になります。
 
　「C:\xampp\php\php.ini」をテキストツールで開き、「;extension=intl」で検索（Ctrl+F）します。検索出来たらこの一文から「;（セミコロン）」を削除し、上書き保存を行います。

　``http://localhost/dashboard/phpinfo.php``で有効化されているか確認することが出来ます。コメントアウトし上書き保存したあとはApacheの再起動をしてください。
 
 ![スクリーンショット 2024-10-23 210601.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/a2e742a2-9d22-fbdb-f4c4-f5f641fda05a.png)

　有効化ができたら画像のように「intl」のエントリが新しく追加されます。

　＊intlについては下記サイトにて詳細が書かれています。
 
 https://www.php.net/manual/ja/intro.intl.php
 
## ２.composer.pharファイルを生成する

　ディレクトリ移動後にcomposer.pharファイルを生成する以下のコマンドを実行しcomposer.pharファイルを生成します。このファイルがないとcomposerのコマンドが使用できないので必ず実行し、生成してください。
 
~~~:ディレクトリ移動
C:\Users\ユーザー名>cd ../..

C:\>cd xampp/htdocs

C:\xampp\htdocs>
~~~

~~~.pharファイルの生成
php composer.phar -V
curl -sS https://getcomposer.org/installer | php
~~~

上記コマンドを実行すると以下が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/5f50453f-e8c8-c3c8-296e-10f607d9ec28.png)

エラー文が出ているので少々見ずらいですが、難しいことはしていません。

**１．**``php composre.phar -V``　を実行し、ディレクトリ内にcomposer.pharがディレクトリ内にあるかを確認する。

:::note info
comoser.pharファイルの確認ができたら以下のコマンドは実行しなくて大丈夫です。
:::
**２．**``Could not open input file: composer.phar``が表示されればファイルがないため``curl -sS https://getcomposer.org/installer | php ``を実行しcomposer.pharファイルを生成。


***補足***
　エラーが出ていても問題はないのですが、毎回出てくるのはうっとおしいのでエラーを消す方法です。画像のエラーを消したい場合は、xamppのコントロールパネルを開き、ApacheのConfigをクリック。そして画像の青で囲まれたPHP(php.ini)を開く（開くアプリは何でも大丈夫）。

![スクリーンショット 2024-10-23 101919.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/8b7a15f8-a641-87a5-a72b-3eb268e1cd33.png)

　開けたら Ctrl + f コマンドで検索バーがでてくるのでそこに、``;extension=openssl``を入力し検索する。画像のように見つけたら``;``を追記したらエラー文が出てこなくなるはずです。
![スクリーンショット 2024-10-23 102347.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/ec23aac2-9f93-4cc6-9101-8ebc33d08f4c.png)


## ３．rootユーザのパスワード設定
　xamppはデフォルトでrootユーザのパスワードが設定されていないので設定します。ec-cube側の設定で接続するデータベースのユーザにパスワードを設定していないとデータベースとの接続ができません。
 

　**１．**``http://localhost/phpmyadmin/index.php``を表示
　**２．** ユーザアカウント→root/localhostを選択し上部にある Change Password を選択
　**３．** 任意のパスワードを設定。例 0000
　**４．** 再読み込みすると画像のエラーが表示されます。これは設定ファイルでパスワードを設定していないため接続ができていないエラーです。設定ファイルは``xampp\phpMyAdmin\config.inc.php``に記されています。

![スクリーンショット 2024-10-23 141115.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/23041908-3de0-d7e7-1210-9aae7c1b6914.png)

　**５．** 設定ファイルを開き22行目にある``''``の空白になっている場所に先ほど設定したパスワードを設定します。私は``0000``で設定したので``0000``を入力し上書き保存します。``http://localhost/phpmyadmin/index.php``に戻り再読み込みするとデータベースに接続できます。
 
![スクリーンショット 2024-10-23 134426.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/7617138b-5076-1024-afbe-cf3ee323bcb4.png)



## ４．EC-CUBEインストール

**１．** インストールするディレクトリへ移動
~~~:ディレクトリ移動
C:\Users\ユーザー名>cd ../..

C:\>cd xampp/htdocs

C:\xampp\htdocs>
~~~

**２．** composer.pahrのバージョンアップ
~~~
php composer.phar selfupdate --2
~~~
　バージョンアップをしないとec-cubeディレクトリを生成するコマンドが実行できないため必ず実行してください。

**３．** 以下コマンドを実行しec-cubeディレクトリを生成
~~~
php composer.phar create-project ec-cube/ec-cube ec-cube "4.1.x-dev" --keep-vcs
~~~
　"4.1.x-dev"のところをダウンロードしたいバージョンに書き換えてください。私は"4.3"でダウンロードしたので"4.3"で導入したい方は以下のコマンドをコピーし実行してください。
 ~~~
 php composer.phar create-project ec-cube/ec-cube ec-cube "4.3" --keep-vcs
 ~~~
 
## ５．データベース接続を設定する

　データベースと接続するために使用するデータベースの情報を入力します。設定するには``.env``を編集します。インストールしたディレクトリにありますが、隠しファイルなので設定で表示させてください。それでも表示されない場合は再度EC-CUBEをインストールしてください。
 
 ![スクリーンショット 2024-10-23 212835.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/7b8b61ff-1a05-3fb4-d9dc-0ee1bba309a0.png)

　ファイルを開いたら18行目の``DATABASE_URL``を
 　``DATABASE_URL=mysql://root:0000@localhost:3306/ec-cube``
　に変更してください。違うユーザを使用する場合やファイル名が違う場合は合わせて変更してください。ただし、パスワードは設定していないと接続エラーが発生するので必ず設定してください。
 
 　次に26行目の``DATABASE_CHARSET=utf-8``の後ろに``mb4``つ付けてください。文字化けを防ぎます。


## ６．データベース生成

　データベースを生成するために必要な設定をすべて完了したのでデータベースを生成します。こちらは公式開発ドキュメントにあるコマンドをそのまま打ちます。

 ~~~
# (optional) データベース削除
bin/console doctrine:database:drop --force

# データベース作成
bin/console doctrine:database:create

# (optional) スキーマ削除
bin/console doctrine:schema:drop --force

# スキーマ生成
bin/console doctrine:schema:create

# 初期データ生成
bin/console eccube:fixtures:load
 ~~~

　スキーマ生成のコマンドを実行すると
 
 ![スクリーンショット 2024-10-23 214819.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/bae141a2-1b60-44fd-45ee-ecb0b9136b1a.png)

　画像の警告文が出力されますが、これは開発者向けの警告です。このメッセージは、今から実行しようとしている操作が本番環境で行うのにはリスクがあり、予期しない問題やダウンタイムを引き起こす可能性があることを示している警告文なので問題ありません。
 
　初期データ生成のコマンドまで実行するとデータベースに新たにec-cubeが生成されています。
　データベースにて確認ができたら``localhost/ec-cube``を検索し、ec-cubeの画面がでたら完了です。エラーが発生する場合はデータベースの接続情報の入力間違い、ユーザにパスワードを設定していない、パスワードを設定しているが接続情報に入力していない、といったミスがほとんどです。設定を見直してみてください。AIエラー文をコピペして聞いてみるのもいいです。AIに聞く場合は初めに
 
 　「windowsにxamppを使用してコマンドラインからec-cubeを構築しようとしています。そこで「作業内容」中に「エラー文」が出ました。エラー内容と対処方法を教えて下さい」
  
  といった風に聞くと良い回答を得られます。もっと具体的に書けばより精度の高い回答を得られるかもしれませんね。

## ７．管理画面ログイン
　``localhost/ec-cube``にて確認ができれば続いて管理画面へのログイン作業に入ります。通常のインストール方法はインストール後初期設定画面でデータベースや店舗情報の設定を入力する画面が表示されますが、今回の方法だとデータベースの設定を終わらせているのか分かりませんが、初期設定画面が表示されないので管理画面に初期設定をせずにログインすることが出来ます。管理画面のURLは``localhost/eccube/admin``と通常の画面のURLの後ろに``admin``と追加するだけです。
 
 ![スクリーンショット 2024-10-23 224237.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/3c53ad96-5895-794b-d926-0878e4e0efcd.png)

　ログインIDは「admin」パスワードは「password」が初期設定となっています。何度かエラーでログインできませんでしたが、Apacheの再起動などをしたりしてログインを試してみてください。いつかログインできるはずです。ログインできたら管理画面が開かれます。

![スクリーンショット 2024-10-23 224225.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835880/a8ccd3ea-26c0-5eae-cefc-2e6019cc1d6e.png)

　これでインストール作業はすべて終了です。

# まとめ
　思っていたよりも手順が多く、時間がかかってしまいましたが無事に構築でき、出品や記事の投稿の方法の確認等、確認したかった内容を確認することができ良かったです。


# 参考にしたサイト

https://shirakawaroom.com/2022/04/25/post-platform-140/

https://leveliving.com/tec/php/ec-cube/config/

https://qiita.com/loach/items/551b1a65bc8ef5dd6529