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

やり直す場合

[設定] ▶ [アプリ] の「アプリと機能」からリセットし、コマンドで登録解除すると、最初からやり直せます。

登録解除

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 を連携させてみようと思います。