# WSL2をつかってMagento2環境を作る

Virtualbox-UbuntuにインストールしたMagento環境がどうにも重いので、 他の方法で環境を立ち上げたい。

今回はいいページがあったのでWSL2にインストールしてみた。 参考ページそのままなのだが、日本語で読みたい方にはこのページが参考になるかも。

参考にさせていただいたページはこちら。

How to Install Magento 2 on Windows WSL

今日の項目はこちら

下準備 Magentoのアクセスキーの発行

クリックすると入力を求められる。この入力はAccessKey発行の名前に使われる。

Magentoアクセスキー

やってみた！ ★WSL2上のubuntu を使った環境立ち上げ

1. WSLのUbuntu20の複製

WSLのubuntu20.4はすでに入れて使っていたので環境を分けたい。 MicrosoftStoreのLinuxインストールは同じものを複数インストールできないので、自分のWSL上のubuntu20.4をエクスポート＆インポートすることで複製する。

2. 複製したWSL上のubuntu環境でWebの手順にしたがって環境構築を進める

3. Install Nginx ,MariaDB,PHP

Nginx のインストール

WSL上のubuntuにnginxをインストールした際、ホストOS(Windows）側からブラウザアクセスしたい場合は、localhostではないことに注意。 WSL上のubuntuでは当然localhostに当たるのだが、WSLはguiがないのでcurlで確認すると正しく応答が返ってくることがわかる。

curl http://localhost

WSLのマシンのIPアドレスを確認するには、WSL上のubuntuに入り、ip aコマンドでアドレス一覧を見る。 eth0のinetを見ることでIPv4アドレスを確認することができる。 ホスト(Windows)マシンのブラウザに先ほど確認したIPアドレスを使ってブラウザでアクセスするとnginxが動いていることが確認できる。

nginxインストール成功

続いて MariaDBのインストール

インストール後に データベースを保護するパスワードを設定する。 面倒だったのでrootとおなじものにしてしまった。 本来は当然変えた方がいい。

```
sudo mysql_secure_installation
```

設定変更後はDBにログインできることを確認する

```
sudo mysql -u root -p
```

続いてPHPを入れる

```
sudo apt install php-fpm php-common php-mysql php-gmp php-curl php-intl php-mbstring php-xmlrpc php-gd php-xml php-cli php-zip php-soap php-bcmath
```

設定したパラメータは以下の通り

```
file_uploads = On
allow_url_fopen = On
short_open_tag = On
memory_limit = 1024M
cgi.fix_pathinfo = 0
upload_max_filesize = 100M
max_execution_time = 360
date.timezone =   "設定なし"
```

メモリは足りないという話があるので、参照したサイトより多めにしておいた。

4. Create Magento Database

まずMariaDBにログイン。

```
sudo mysql -u root -p
```

magento用のデータベースを作成して、データベースのユーザを作る ここでは"magentodbuser"とした。 パスワードも合わせて設定する。"new_pasword_here" の部分。

```
CREATE DATABASE magentodb;
```
```
CREATE USER 'magentodbuser'@'localhost' IDENTIFIED BY 'new_password_here';
```

magentodbuserに権限を与える この場合、新しく作ったmagentodbに対するすべての権限を与えることになる。

```
GRANT ALL ON magentodb.* TO 'magentodbuser'@'localhost' WITH GRANT OPTION;
```
```
FLUSH PRIVILEGES;
EXIT;
```

5. Download Magento

元のページだとここでMagentoDLのためのアカウント取得の記述があるが、前述の部分で取得済みだと思うので割愛。

composerが必要になるので、curl,git,composerを入れる。

```
sudo apt install curl git
curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin --filename=composer
```

nginxのルートディレクトリに移動し、GithubからMagentoパッケージを落としてくる。 落とすときのリリースの説明ページのリンクが間違ってる（drupalになってる） Magentoのリリース関係は以下のＵＲＬで確認できる。 https://devdocs.magento.com/guides/v2.3/release-notes/ v2.3のところが各バージョンに対応。 今回は2.3系の最新であるv2.3.7を使いたい。

```
cd /var/www/
sudo composer create-project --repository=https://repo.magento.com/ magento/project-community-edition magento
````
composerのレポジトリ指定は、 
[Adobeのページ](https://devdocs.magento.com/guides/v2.4/install-gde/composer.html)に例がある。

```
sudo composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.7 magento
```

こんな感じになる。最後のmagentoはインストールするディレクトリの名前になる。 つまり、今 /var/www/にいるから、/var/www/magento/となる。

username とパスワードが聞かれるので、最初に準備しておいたkeyを設定する。 username = public key password = private key

インストール時に設定することリスト

```
cd /var/www/magento
sudo bin/magento setup:install --base-url=http://example.com/ --db-host=localhost --db-name=magentodb --db-user=magentodbuser --db-password=db_user_password_here --admin-firstname=Super --admin-lastname=Admin --admin-email=admin@example.com --admin-user=admin --admin-password=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1
```

公式のドキュメントはこちら。 https://devdocs.magento.com/guides/v2.4/install-gde/composer.html#install-magento

```
bin/magento setup:install \
--base-url=http://localhost/magento2ee \
--db-host=localhost \
--db-name=magento \
--db-user=magento \
--db-password=magento \
--admin-firstname=admin \
--admin-lastname=admin \
--admin-email=admin@admin.com \
--admin-user=admin \
--admin-password=admin123 \
--language=en_US \
--currency=USD \
--timezone=America/Chicago \
--use-rewrites=1
```

自分に合わせて書き換え

```
cd /var/www/magento
sudo bin/magento setup:install --base-url=http://localhost/magento/ --db-host=localhost --db-name=magentodb --db-user=magentodbuser --db-password="DBユーザのパスワード" --admin-firstname=Super --admin-lastname=Admin --admin-email"メールアドレス" --admin-user=admin --admin-password="アドミンのパスワード" --language=en_US --currency=USD --timezone=Asia/Tokyo --use-rewrites=1
```

6. ElasticSearch

インストール時に問題が起きるときはElasticSearchをここで無効化となっている。 上記コマンドで特にエラーのも起きてないからこれでよいのかな？

7. Configure Nginx VirtualHost

nginxのvirtualhostファイルを編集する。

```
sudo nano /etc/nginx/site-available/magento
```

nano で編集することになっているが折角WSLでwindowsとつながっているのだから、該当箇所をVSCodeでwindows側で開いて普通に編集できる。

```
upstream fastcgi_backend {
server unix:/run/php/php7.4-fpm.sock;
}

server {
    listen 80;
    listen [::]:80;

    server_name  example.com www.example.com;
    index  index.php;

    set $MAGE_ROOT /var/www/magento;
    set $MAGE_MODE production;

    access_log /var/log/nginx/example.com-access.log;
    error_log /var/log/nginx/example.com-error.log;

    include /var/www/magento/nginx.conf.sample;
}

```

ここのポイントはserver_name . 当然インストールしたときの名前でなければつながらない。今回インストールしたときはローカルIPアドレス（WSLで割り当てられたIPアドレス）をそのまま書いたのでhttp://172.xxx.yyy.dddみたいなアドレスになっていた。

保存した後、シンボリックリンクの追加と、nginxの再起動を行う。

```
sudo ln -s /etc/nginx/sites-available/magento /etc/nginx/sites-enabled/
sudo service nginx restart
```

これで接続！とおもったら動かない。。 502 bad gateway!

困ったので、nginxのログを見てみる。 ログは前述した設定で書いたところ（/var/log/nginx/配下）に保存されている。 IPアドレスはたまたまなので都度違う。

```
2021/07/23 23:01:55 [error] 18211#18211: *2 upstream sent too big header while reading response header from upstream, client: 172.31.192.1, server: 172.31.201.55, request: "GET / HTTP/1.1", upstream: "fastcgi://unix:/run/php/php7.4-fpm.sock:", host: "172.31.201.55"
2021/07/23 23:01:55 [error] 18211#18211: *2 upstream sent too big header while reading response header from upstream, client: 172.31.192.1, server: 172.31.201.55, request: "GET /favicon.ico HTTP/1.1", upstream: "fastcgi://unix:/run/php/php7.4-fpm.sock:", host: "172.31.201.55", referrer: "http://172.31.201.55/"

```

どうもヘッダがでかすぎるというので、googleで magento2 ngix 502 bad gateway too big header とかで検索してみる。

[How to Solve 502 Bad Gateway error in Nginx Magento 2?](https://magento.stackexchange.com/questions/243248/how-to-solve-502-bad-gateway-error-in-nginx-magento-2)

これを見ると、fastcgi_buffer とproxy_bufferのサイズを大きくしろとある。

とりあえずfastcgi_bufferだけ変更してみる。 /etc/nginx/nginx.conf

```
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
```

nginxをrestart. でた！

MagentoLuna起動画面

Magentoの管理画面

管理画面のアクセス先がわからない・・・ インストールした時に表示が出ているらしい。 見落とさないように注意。

コンソールをたどると installation date...の後に xxxxxは適当に生成されるみたい。