WSL2でReactの開発環境を作ってみた

Webアプリを開発するとき、バックエンドを**Django**、フロントを**React**、とするのはよくある構成と思います。
既存Reactアプリケーションの改修に迫られたため、Windowsの**WSL2**をローカルの開発環境として試したときの手順メモです。

# 開発環境構築

## WSL2 新規インストール
今回は、Windows10 の最新ビルドに WSL2 の **Ubuntu20.04** をインストールします。
Windows10 の古いビルドでは、仮想マシンプラットフォームを有効にしたりと、もう少し手順が煩雑になるのですが、最新ビルドでは基本、`wsl --install`だけで完了します。これは Windows11 でも同様かと思います。

Windowsの仮想化技術のひとつであるHyper-Vアーキテクチャ（WSL2もこれに含まれる）と、VirtualBoxやAndroidエミュレータを共存させるので無ければ「Windowsハイパーバイザープラットフォーム」を有効にする必要はありません。


PowerShellから次のコマンドを入力していきます。

```:WSLのアップデート
wsl --update
```

```:インストールできるディストロの確認
wsl -l -o

NAME               FRIENDLY NAME
Ubuntu             Ubuntu
Debian             Debian GNU/Linux
kali-linux         Kali Linux Rolling
SLES-12            SUSE Linux Enterprise Server v12
SLES-15            SUSE Linux Enterprise Server v15
Ubuntu-18.04       Ubuntu 18.04 LTS
Ubuntu-20.04       Ubuntu 20.04 LTS
OracleLinux_8_5    Oracle Linux 8.5
OracleLinux_7_9    Oracle Linux 7.9
```

Ubuntu22.04 は、本記事執筆時点においてはStore経由でインストールできるようです。

```:既定の確認
wsl --status
```

```:必要に応じて既定のディストロとバージョンを変更
wsl --set-default Ubuntu-20.04
wsl --set-default-version 2
```

```:インストール
wsl --install
```

```:確認
wsl -l -v
```

## やり直す場合
[設定] ▶ [アプリ] の「アプリと機能」からリセットし、コマンドで登録解除すると、最初からやり直せます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236222/50988bf9-25b8-ea10-3a96-21889846450e.png)

```:登録解除
wsl --unregister Ubuntu-20.04
```

## ビルド環境作成
Ubuntuのターミナルから行います。

### 基本設定
まず、いつもの初期設定です。

```
sudo -i
apt update && apt upgrade
apt install -y language-pack-ja
update-locale LANG=ja_JP.utf8
```

続いて、WSLのディストリビューションごとの設定ファイルを記述します。

2022年9月にWSLがsystemdをサポートしたのでその有効化、resolv.confの自動生成を無効化します。
`default=root`を追加したのは、VSCodeと連携する際に Permission denied のエラーを回避するためです（あくまで一時的に立てるサーバなので、セキュリティよりも利便性を優先してrootの直ログインを認める）。

```:/etc/wsl.conf
[boot]
systemd=true
[network]
generateResolvConf=false
[user]
default=root
```

ここで一度、PowerShellから`wsl --shutdown`で完全にシャットダウンし、ネームサーバのアドレスを設定します。

```:/etc/resolv.conf
nameserver XXX.XXX.XXX.XXX
```

### Node.jsのインストール
Ubuntuの公式リポジトリからインストールするとエラーになったので、パッケージのインデックスファイルを更新します。
この手順では`npm`も同時にインストールされます。

```
curl -sL https://deb.nodesource.com/setup_18.x | bash -
```

```
apt install -y nodejs
node -v
```

このプロジェクトでは基本的に`yarn`を使うので、`npm`でインストールします。

```
npm install -g yarn
yarn -v
```

続いて`n`をインストールします。

```
npm install -g n
n --version
```

```:最新の安定版バージョンを確認して適用
n --stable

n stable
n --version
```

ここでは`n`を使いましたが、Node.jsのバージョンを切り替えるツールは`nvm`を始めとして他にもありますので、好きなものを使えば良いと思います。

また、この辺りで仮想マシン全体をバックアップしておくと、同種案件を請ける際にも手間が省けます。

```:エクスポート
wsl --export Ubuntu-20.04 Ubuntu-20.04.20230104.tar
```

# ソースコードの取得とビルド
環境が整ったのでビルドしてみましょう。

なお、バックエンド側は **Dockerfile** が提供されていたので、`docker build`でイメージを作成し、`docker run`でイメージをコンテナとして実行するだけです（本記事では割愛します）。

## ソースコードの取得
組織のリモートリポジトリから、自分のローカルリポジトリにコピーし、必要に応じて作業用のブランチを切ります。
アクセストークンはGitHubで予め作成しておきます。

```
git config user.name [名前]
git config user.email [メールアドレス]
git clone https://[PersonalAccessToken]@github.com/[Organization]/[RepositoryName].git
```

## ビルド
リポジトリには`yarn.lock`ファイルが含まれていたので、`yarn`または`yarn install`、`npm i`で依存パッケージをインストールします。
各環境用に設定する`.env`ファイルはリポジトリに無かったので、予め作成しておきます（*REACT_APP_URL_API* をローカル環境に向けるだけ）。

では、ビルドしましょう！

```
cd プロジェクトルートディレクトリ
yarn build
```

*ERR_OSSL_EVP_UNSUPPORTED* のエラーになったので、Node.jsをダウングレードします。

```:ダウングレード可能なバージョン情報を確認
n ls-remote --all
```

```:バージョン16のlatestをインストール
n 16.19.0
```

このNode.jsバージョンでビルドが成功しました。実行してみます。

```
yarn start
```

Windows上でブラウザが自動起動し`http://localhost:3000`に接続されて無事アプリが表示されました。
必要な改修を行いリビルド、ローカルで動作確認。
CI/CDパイプラインの最終ステージは自動化されていないので、buildディレクトリを手動でS3バケットにデプロイして完了です。

今後も改修の頻度が増えるようであれば GitHub Actions と Amazon S3 を連携させてみようと思います。