Laravelを使ったWebアプリケーションの開発環境を構築する 

__前提となる環境__

- OS: Windows 10 Pro (バージョン2004 ビルド19041.1052)
- CPU: Intel Core i7-10700
- RAM: 32.0 GB

Laravelを使ってみたいのだから、まずは公式サイトを見る。

https://laravel.com/

Windowsへのインストール手順はこれ。

https://laravel.com/docs/8.x#getting-started-on-windows

![web_laravel_install_on_windows.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/d1b5a6da-e495-c3cd-3ec9-6b9f098f411d.png)

`Docker Desktop` と `WSL2` をインストール必要があるようだ。リンク先に従って各自インストールする。
(英文を読むのがしんどいので、これくらいの量になったら素直に翻訳を使う。細かい誤訳がありそうだと気づいたら英文を読む。)

また

> Docker Desktop が WSL2 バックエンドを使用するように構成される必要があります

とのことなので、こちらもリンク先に従って設定する。


# Docker Desktop をインストールする

Download for Windowsからインストーラをダウンロードする。

https://www.docker.com/products/docker-desktop

インストール中に設定する項目がある。
`Install required Windows components for WSL 2` は、この後 WSL2 をインストールするのでチェックした。
`Add shortcut to desktop` はお好みで。
![install_docker_desktop_config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/faaba2a3-9497-1230-c616-8cea631b52d2.png)

Docker Desktopを起動すると、WSL2用の何かが自動で処理されたようだ。今のところはこれ以上何もしないでおく。

![docker_desktop_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/e3768bbc-94f3-37b3-af22-4c28362b8acf.png)


# WSL2 をインストールする

以下のページの手順に従ってWSL2をインストールする。

https://docs.microsoft.com/en-us/windows/wsl/install-win10

![install_docker_wsl2_en.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/9be745f8-7414-851c-897b-553ec94a8274.png)

英語しんどいなー、URLの一部を `en-us` から `ja-jp` に変えてみよう。

https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

Very good!

![install_docker_wsl2_jp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/45d44474-aef8-43f3-3d07-43da86e85146.png)

## WSLのインストール方法を選ぶ

URL: https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#simplified-installation-for-windows-insiders

手順によると、インストール方法は2つ。

- 簡略化されたインストール
- 手動インストール

`簡略化されたインストール` は、`wsl --install` 一撃でWSLが使えるようにする方法のようだ。
ただしプレビュービルドを使用するため、 Windows Insider Program に参加しなければならない。
Windowsは普通に使いたいので、なるべくWindows Insider Programに参加したくない。よって `手動インストール` を試してみる。
プレビュービルドが正式版となったら、 `簡略化されたインストール` でWSLが使えるようになるかもしれない。

## 手順 1 - Linux 用 Windows サブシステムを有効にする

URL: https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#step-1---enable-the-windows-subsystem-for-linux

PowerShellを管理者権限で実行する。
ちなみにキーボードだけでこれを行うには以下のようにする。

- Win + R でファイル名を指定して実行ダイアログを出す
- 名前: に powershell と入力し、Ctrl + Shift で Enter を押す

以下のコマンドを実行する。

```
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```

実行結果

```
PS C:\Windows\system32> dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

展開イメージのサービスと管理ツール
バージョン: 10.0.19041.844

イメージのバージョン: 10.0.19041.1052

機能を有効にしています
[==========================100.0%==========================]
操作は正常に完了しました。
```

> ここで、手順 2 に進み、WSL 2 に更新することをお勧めしますが、WSL 1 のみをインストールする場合は、マシンを 再起動 して、「手順 6 - 選択した Linux ディストリビューションをインストールする」に進むことができます。 WSL 2 に更新するには、マシンの 再起動を待ってから、次の手順に進みます。

WSL2をインストールしたいので、このまま次の手順に進む。

## 手順 2 - WSL 2 の実行に関する要件を確認する

URL: https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#step-2---check-requirements-for-running-wsl-2

> WSL 2 に更新するには、Windows 10 を実行している必要があります。

- x64 システムの場合:バージョン 1903 以降、ビルド 18362 以上。
- ARM64 システムの場合:バージョン 2004 以降、ビルド 19041 以上。
- 18362 より前のビルドは WSL 2 をサポートしていません。 Windows 更新アシスタントを使用して、お使いのバージョンの Windows を更新します。

> バージョンとビルド番号を確認するには、Windows ロゴ キー + R キー を押して、「winver」と入力し、 [OK] を選択します。 [設定] メニューで、最新の Windows バージョンに更新します。

![winver.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/49429203-b120-1f47-1e5a-139e46cb2aef.png)

バージョン1903以上、ビルド18362以上であることを確認した。
(手順2を手順1より先にやるべきだと思う…)


## 手順 3: 仮想マシンの機能を有効にする

URL: https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#step-3---enable-virtual-machine-feature

> WSL 2 をインストールする前に、"仮想マシン プラットフォーム" オプション機能を有効にする必要があります。 この機能を使用するには、コンピューターに仮想化機能が必要です。

仮想化機能はたぶん使えるからヨシ！
管理者権限で開いた PowerShell で以下のコマンドを実行。

```
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```

実行結果

```
PS C:\Windows\system32> dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

展開イメージのサービスと管理ツール
バージョン: 10.0.19041.844

イメージのバージョン: 10.0.19041.1052

機能を有効にしています
[==========================100.0%==========================]
操作は正常に完了しました。
```

> お使いのマシンを 再起動 して WSL のインストールを完了し、WSL 2 に更新します。

ここで再起動する。


## 手順 4 - Linux カーネル更新プログラム パッケージをダウンロードする

URL: https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#step-4---download-the-linux-kernel-update-package

パッケージ直リン

https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

> インストールが完了したら、次の手順に進み、新しい Linux ディストリビューションをインストールする際の既定のバージョンとして WSL 2 を設定します。 (新しい Linux インストールを WSL 1 に設定する場合は、この手順をスキップしてください)。

WSL2をインストールしたいので、このまま次の手順に進む。

## 手順 5 - WSL 2 を既定のバージョンとして設定する

URL: https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#step-5---set-wsl-2-as-your-default-version

管理者権限で開いた PowerShell で以下のコマンドを実行。

```
wsl --set-default-version 2
```

実行結果

```
PS C:\Windows\system32> wsl --set-default-version 2
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください
```

## 手順 6 - 選択した Linux ディストリビューションをインストールする

URL: https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#step-6---install-your-linux-distribution-of-choice

> Microsoft Store を開き、希望する Linux ディストリビューションを選択します。

開発用としてポピュラーと思われる Ubuntu を選択。バージョンは現時点で最新のLTSである 20.04 とした。

![msstore_ubuntu2004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/53c51bfa-31fb-b9df-d5f0-ae7a8c71a8ff.png)

インストールが完了したらスタートメニューから `Ubuntu 20.04 LTS` を起動する。
Ubuntuのユーザ名とパスワードを指定したらUbuntuが使えるようになる。

![wsl2_ubuntu2004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/beccea28-090b-b24c-73af-6faa1efeec01.png)

# DockerデスクトップがWSL2バックエンドを使用するように構成されていることを確認する

Docker Descktopを起動し、設定を確認する。
赤線部のチェックボックスがオンになっていればOK。(Ubuntu-20.04 はお好みで)

![docker_desktop_setting_general.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/bede4cd6-f816-cb8b-63e3-96ad45b5e4e2.png)

![docker_desktop_setting_resources.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/3877bcee-7030-93ec-e45a-ff6339579cb9.png)


# Laravelをインストールする

WSL2で実行しているUbuntuにLaravelをインストールする。

https://laravel.com/docs/8.x#getting-started-on-windows

```
curl -s https://laravel.build/example-app | bash
Unable to find image 'laravelsail/php80-composer:latest' locally
latest: Pulling from laravelsail/php80-composer

(略)

Thank you! We hope you build something incredible. Dive in with: cd example-app && ./vendor/bin/sail up
```

```
cd example-app
./vendor/bin/sail up
```

初回の `./vendor/bin/sail up` は時間がかかる。コーヒーでも淹れて待とう。
しばらくすると以下のようなログが出るようになる。必要なファイルが揃い、開発用のサーバが実行中となっている。

```
meilisearch_1   | [2021-07-05T06:47:43Z INFO  actix_web::middleware::logger] 127.0.0.1:54944 "GET /health HTTP/1.1" 200 22 "-" "Wget" 0.000044
meilisearch_1   | [2021-07-05T06:48:13Z INFO  actix_web::middleware::logger] 127.0.0.1:54948 "GET /health HTTP/1.1" 200 22 "-" "Wget" 0.000056
```

http://localhost/ にアクセスする。

![web_laravel_top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/05f67989-924f-d9e3-07fd-2f6028e88616.png)

ちゃんと開発用サーバにアクセスできている。

```./vendor/bin/sail up``` は Ctrl + C 終了できる。
終了処理を待つため少し時間がかかるが、お行儀よく待ったほうが良さそう。
(もう一度 Ctrl + C すると強制終了)

```
^CGracefully stopping... (press Ctrl+C again to force)
Stopping example-app_laravel.test_1 ... done
Stopping example-app_mailhog_1      ... done
Stopping example-app_mysql_1        ... done
Stopping example-app_selenium_1     ... done
Stopping example-app_redis_1        ... done
Stopping example-app_meilisearch_1  ... done
```

Visual Studio Code と Remote Development 拡張機能をインストールしていれば、ターミナルで ```code .``` とコマンドを入力すると任意のLaravelプロジェクトを開くことができる。
変更は即座に反映され、ターミナルもUbuntuのファイルシステムを参照している。便利。

```
cd example-app
code .
```

![vscode_remote.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23642/49a3e952-034b-5c65-0454-9e99935ce064.png)