Windows10でLaravel ×Vite×React×TypeScript×WSL2の環境構築（初学者向け）

動作環境

• Windows10 Home
• VSCode 1.75.1
• Docker Desktop 4.16.3 (96739)
• Ubuntu 22.04.1 LTS（WSL2にインストール）
• Laravel Framework 10.1.3
• PHP 8.2.3
• React 18.2.0
• TypeScript 4.9.5
• Vite 4.1.4
  ※VSCodeはインストールされている前提で進めます。

環境構築の流れ

• 手順1. WSL2のインストール
• 手順2. Ubuntuの設定
• 手順3. Docker Desktopのインストール
• 手順4. Laravelのインストール
• 手順5. sailコマンドのエイリアス設定
• 手順6. Reactのインストール
• 手順7. TypeScriptのインストール
• 手順8. Ubuntu上のソースをVSCode編集する
• 手順9. viteの設定
• 手順10. index.blade.phpの作成
• 手順11. Index.tsxの作成
• 手順12. web.phpの設定
  ※今回は特にLaravelのスターターキットなどはインストールしません。

対象となる方

• 取り敢えず爆速でLaravel×React×TypeScriptの開発環境を作りたい方
• 環境構築？面倒！！早くソース書きたい！！という方

手順1. WSL2のインストール

1.　Windows上でWindows+xキーを押下後に、aキーを押下し、PowerShellを起動します。
2.　PowerShellにて、下記コマンドを実行します。

PowerShell

wsl --install

下記画像のようになればインストール完了です。
3.　pcを再起動します。

4.　再起動後Linux 用 Windows サブシステムと仮想マシン プラットフォームが有効になっていることを確認しましょう。

手順2. Ubuntuの設定

1.　Windows上でWindows+sキーを押下してください。
2.　検索項目にUbuntuと入力し、Ubuntuを起動してください。
3.　ユーザ名とパスワードの設定を求められるので、入力してください。
　　　※パスワードは入力しても表示されないので的確に入力
4.　下記画像のようになれば正しく設定されています。

注意！
この時入力した、ユーザ名とパスワードは後の工程で使いますので、メモなどお願いします。

5.　WSL2が有効になっているかを確認しましょう！
6.　PowerShellで下記コマンドを叩いてください。

PowerShell

wsl -l -v

下記画像のように表示されれば正しく設定できています。

手順3. Docker Desktopのインストール

1.　下記URLにて、Windows用のDocker Desktopをインストーラーの指示に従ってインストールしてください。
https://docs.docker.com/desktop/install/windows-install/

2.　インストールが完了したら「Close」を押下してください。

3.　Docker Desktopを起動すると、規約画面が表示されるので、問題なければ「Accept」を押下してください。

4.　Settings > Resource > WSL Integrationを開いてください。
5.　下記画像のように設定し「Apply & restart」を押下してください。

6.　エクスプローラーを開き\\wsl$\を入力してください。
7.　docker-desktop、docker-desktop-data、Ubuntuが見れることを確認してください。

手順4. Laravelのインストール

1.　エクスプローラーを開き\\wsl$\を入力してください。
2.　Ubuntu配下のhomeディレクトリを開きます。
　　　※手順2. Ubuntuの設定 で設定したユーザ名のディレクトリが作成されているかと思います。

3.　ユーザ名のディレクトリ内に移動し、任意のディレクトリを作成します。
　※今回は「Laravel」という名前で作成してみました。

4.　Ubuntuを起動し、先ほど作成した「Laravel」ディレクトリまで移動します。

5.　下記コマンドを入力しLaravelをインストールします。（結構かかるので、お茶でもして気長に待ちましょう）
　　　※example-appの部分はプロジェクト名なので、好きなお名前にしてください。

curl -s https://laravel.build/example-app | bash

下記画像のように、途中でUbuntuのパスワードを求められます。
6.　手順2. Ubuntuの設定で設定したパスワードを入力してください。
7.　入力して「Enter」キーを押下してください。

下記メッセージが表示されたら、OKです！

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

8.　先ほどLaravelをインストールしたexample-appディレクトリに移動してください。
9.　下記コマンドを叩いてください。

Ubuntu

./vendor/bin/sail up -d

10.　ひとまずLaravelがきちんとインストールできてるか動作確認しましょう！
ブラウザのURL入力部にlocalhostと入力して、Laravelのindex画面が表示されれば成功です！👍

手順5. sailコマンドのエイリアス設定

/vendor/bin/sailコマンドを都度都度呼び出すのは面倒なのでエイリアスを設定します。

1.　下記コマンドを入力し、ファイルを開いてください。

Ubuntu

vim ~/.bashrc

2.　「i」キーを押下し、INSERTモードに切り替えます。
3.　下記コードを入力してください。

Ubuntu

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

4.　「Esc」キーを押下してください。
5.　:wqと入力して「Enter」キーを押下し、保存して終了します。
6.　.bashrcに記述したものをすぐ反映させたいので、下記コマンドを叩いてください。

Ubuntu

source ~/.bashrc

7.　反映されているか確認のため、下記コマンドを叩いてください

Ubuntu

sail php --version

phpのバージョンが表示されれば、エイリアス設定成功です👍

手順6. Reactのインストール

必要なパッケージのインストールします。
1.　example-appディレクトリ内で、下記コマンドを叩いてください。

Ubuntu

wsl --install

Reactを使用するのに必要なモジュールをインストールします。
2.　下記コマンドを叩いてください。

Ubuntu

sail npm install -D react react-dom @types/react @types/react-dom
sail npm install -D @vitejs/plugin-react

手順7. TypeScriptのインストール

example-appディレクトリ内で、下記コマンドを叩いてください。

Ubuntu

sail npm install -D typescript
sail npx tsc --init --jsx react-jsx

手順8. Ubuntu上のソースをVSCode編集する

1.　VSCodeの拡張機能であるWSLをインストールします。
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

2.　Ctrl+Shift+pを押下し、コマンドラインを立ち上げます。
3.　New WSL Windowを入力し、一番上の選択肢を選んでください。

すると新しいVSCodeのウィンドウが開き、WSL上で動いているUbuntuに接続した状態になります。

4.　Ctrl+kを押下後、Ctrl+oを押下し、対象のプロジェクトを開いてください。

手順9. viteの設定

vite.config.jsファイル拡張子をvite.config.tsにリネームして下記のように編集します。

vite.config.ts

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; 

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss', 
                'resources/ts/Index.tsx'
            ],
            refresh: true,
        }),
        react(), 
    ],
    server: {
        hmr: {
            host: 'localhost', 
        },
    },
});

警告
下記コードがないと、localhostにアクセスすると画面が真っ白になります。
詳細はGithubのissueにて、ご覧ください。
https://github.com/laravel/vite-plugin/issues/28

vite.config.ts

    server: {
        hmr: {
            host: 'localhost', 
        },
    },

手順10. index.blade.phpの作成

views ディレクトリ内に index.blade.php を作成します。

resouces/views/index.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        @viteReactRefresh
        @vite(['resources/sass/app.scss', 'resources/ts/Index.tsx'])
    </head>
    <body>
        <div id="index"></div>
    </body>
</html>

手順11. Index.tsxの作成

resourcesディレクトリ内に ts ディレクトリを追加し、その中に Index.tsx を作成します。

resouces/ts/Index.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';

 const Index:React.FC=()=>{
    return(
        <div>
            Hello World!!!
        </div>
    );
 }

 const container = document.getElementById('index');
 if (container) {
   const root = createRoot(container);
   root.render(<Index />);
 }

手順12. web.phpの設定

返却するviewファイルをwelcomeからindexに修正します

web.php

Route::get('/', function () {
    return view('index');
});

ブラウザのURL入力部に「localhost」と入力して、 Hello World!!!と表示されれば成功です！

まとめ

Laravel Sailを使用するとサクッと開発環境を作れちゃいますね！
Laravel9からMixがViteに置き換わったので、フロントの開発効率が上がりそうですね！
後々、ESLintとPrettierの導入も記事にしようかと思います。