1. はじめに

今回は、自分自身への備忘録を兼ねて、Windows11 ＋ wsl2 開発環境構築、およびFintan（Fintan主催するTIS株式会社、テクノロジー＆イノベーション本部）さんが公開しているハンズオンコンテンツ（ToDoアプリのサンプル開発）を、お伝えしたいと思います

参考文献：WSL2をインストールして使うときの注意点
参考文献：SPA + REST API構成のサービス開発リファレンス
参考文献：ハンズオンコンテンツ
参考文献：GitHub：Fintan-contents/spa-restapi-handson

2. この記事を読んでできること

Windows11 にて wsl2 を用いた開発環境を構築することができるようになる

3. 注意事項

特になし

4. 必要なもの

Windows OS PC（Windows11を想定）
WindowsTerminal（ターミナルソフト）
Visual Studio Code（開発エディタ）

5. wsl2 の実行環境設定

WSL2をインストールして使うときの注意点を参照し、wsl2がインストールできる環境を設定する

6. WSLのデフォルトバージョンをWSL2に設定

WSLのデフォルトバージョンをWSL2にするを参照し、wslバージョンを「2」に設定する

7. ubuntu をインストールする

Linuxディストリビューションをインストールを参照し、wsl2環境に ubuntu をインストールする

8. Windows Terminal をインストールする

Windows Terminalを参照し、Microsoft Store 経由で Windows Terminal をインストールする

9. Windows Terminal から ubuntu コマンドプロンプトを表示

インストールした Windows Terminal を起動し、ubuntu のコマンドプロンプトを表示する

10. エクスプローラーから ubuntu ホームディレクトリへアクセス

エクスプローラーを起動し、\\wsl$\Ubuntu を開いて ubuntu ホームディレクトリへ直接アクセスする
必要に応じて、ネットワークドライブの割り当てを済ませる

11. ubuntu 初期設定（およそ5分）

ターミナルを起動し、コマンドプロンプトからコマンドを実行する

コマンドプロンプト

// Ubuntuバージョンの確認
# lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 22.04.2 LTS
Release:        22.04
Codename:       jammy

// アップデート（パッケージ一覧を更新、パッケージを更新）
$ sudo apt update && sudo apt upgrade -y

12. Node.js npm のインストール

ターミナルのコマンドプロンプトからコマンドを実行する
参考文献：Install Node.js 12 on Ubuntu

コマンドプロンプト

// アップデート（パッケージ一覧を更新）
$ sudo apt update

// 必要パッケージのインストール
$ sudo apt -y install curl dirmngr apt-transport-https lsb-release ca-certificates

// リポジトリの追加
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

// node.js npm のインストール
$ sudo apt -y install nodejs npm

// node.js バージョンの確認
$ node --version
v12.22.9

// npm バージョンの確認
$ npm --version
8.5.1

// 必要パッケージのインストール（gcc g++ make）
$ sudo apt -y install gcc g++ make

13. サンプルプロジェクトの作成＆実行

ターミナルのコマンドプロンプトからコマンドを実行する
hello-world.js ファイルの実行後に、ブラウザから http://127.0.0.1:3000/ へアクセスし、実行結果の Hello, World! を各院する

コマンドプロンプト

// projects ディレクトリの作成
$ mkdir ~/projects

// projects ディレクトリへ移動
$ cd ~/projects

// hello-world.js ファイルの作成
$ vi hello-world.js

// 作成ファイルの確認
$ ls -lah

// hello-world.js ファイルの実行
$ node hello-world.js
Server running at http://127.0.0.1:3000/

// 動作確認後、hello-world.js ファイルの停止
CTRL+C キーを押下

hello-world.js

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

14. JDKのダウンロード

OpenJDKの1つであるAdoptOpenJDKをダウンロード
AdoptOpenJDK 11
ファイル名：OpenJDK11U-jdk_x64_linux_hotspot_11.0.18_10.tar.gz
ダウンロード先：\\wsl$\Ubuntu\usr\local\src

15. JDKのインストール

ターミナルのコマンドプロンプトからコマンドを実行する
参考文献：グループウェアGroupSession導入

コマンドプロンプト

// 解凍先ディレクトリへ移動
$ cd /usr/local/src

// 解凍
$ sudo tar zxvf OpenJDK11U-jdk_x64_linux_hotspot_11.0.18_10.tar.gz

// 解凍結果の確認
$ ls -la
drwxr-xr-x  9 root root      4096 Jan 18 19:19 jdk-11.0.18+10

// root ユーザーにスイッチ
$ sudo su

// .bash_profileにパスを追加
# echo "JAVA_HOME=/usr/local/src/jdk-11.0.18+10" >> /root/.bash_profile

# echo "PATH=\$JAVA_HOME/bin:\$PATH" >> /root/.bash_profile

# echo "export PATH" >> /root/.bash_profile

// 設定を反映
# source /root/.bash_profile

// java バージョンを確認
# java -version
openjdk version "11.0.18" 2023-01-17
OpenJDK Runtime Environment Temurin-11.0.18+10 (build 11.0.18+10)
OpenJDK 64-Bit Server VM Temurin-11.0.18+10 (build 11.0.18+10, mixed mode)

// root から抜ける
# exit

// 一般ユーザーの .bash_profileにパスを追加
$ echo "JAVA_HOME=/usr/local/src/jdk-11.0.18+10" >> ~/.bash_profile

$ echo "PATH=\$JAVA_HOME/bin:\$PATH" >> ~/.bash_profile

$ echo "export PATH" >> ~/.bash_profile

// 一般ユーザーで 設定を反映
$ source ~/.bash_profile

// 一般ユーザーで java バージョンを確認
$ java -version
openjdk version "11.0.18" 2023-01-17
OpenJDK Runtime Environment Temurin-11.0.18+10 (build 11.0.18+10)
OpenJDK 64-Bit Server VM Temurin-11.0.18+10 (build 11.0.18+10, mixed mode)

16. Mavenのダウンロード

Maven 3.6 をダウンロード
参考文献：Index of /maven/maven-3/3.6.3/binaries
ファイル名：apache-maven-3.6.3-bin.tar.gz
ダウンロード先：\\wsl$\Ubuntu\home\pi
※「pi」は各自のユーザー名に読み替え

17. Mavenのインストール

ターミナルのコマンドプロンプトからコマンドを実行する
参考文献：【なんでも研究日誌】Ubuntu20.04にMavenをインストールする

コマンドプロンプト

// root ユーザーにスイッチ（※ハイフン付き）
$ sudo su -

// ダウンロード先ディレクトリへ移動
# cd /opt

// Mavenファイルを移動（※「pi」は各自のユーザー名に読み替え）
# mv /home/pi/apache-maven-3.6.3-bin.tar.gz* ./

// ファイルの確認
# ls -la
d-rw-r--r--  1 pi   pi   9506321 Feb 24 09:32 apache-maven-3.6.3-bin.tar.gz
-rw-r--r--  1 pi   pi         0 Feb 24 09:33 apache-maven-3.6.3-bin.tar.gz:Zone.Identifier

// 解凍
# tar zxvf apache-maven-3.6.3-bin.tar.gz

// 解凍結果の確認
$ ls -la
drwxr-xr-x  6 root root    4096 Feb 24 09:34 apache-maven-3.6.3

// リネーム
# mv /opt/apache-maven-3.6.3 /opt/apache-maven

// リネームの確認
# ls -la
drwxr-xr-x  6 root root    4096 Feb 24 09:34 apache-maven

// java のパスを確認
# which java
/usr/local/src/jdk-11.0.18+10/bin/java

// .bash_profileにパスを追加
# vi ~/.bash_profile

// 編集後の内容
JAVA_HOME=/usr/local/src/jdk-11.0.18+10
PATH=$JAVA_HOME/bin:$PATH:/opt/apache-maven/bin
export JAVA_HOME
export PATH

// 設定を反映
# source /root/.bash_profile

// mvn バージョンを確認
# mvn --version
Apache Maven 3.6.3 (cecedd343002696d0abb50b32b541b8a6ba2883f)
Maven home: /opt/apache-maven
Java version: 11.0.18, vendor: Eclipse Adoptium, runtime: /usr/local/src/jdk-11.0.18+10
Default locale: en, platform encoding: UTF-8
OS name: "linux", version: "5.15.79.1-microsoft-standard-wsl2", arch: "amd64", family: "unix"

// root から抜ける
# exit

// 一般ユーザーの .bash_profileにパスを追加
$ vi ~/.bash_profile

// 編集後の内容
JAVA_HOME=/usr/local/src/jdk-11.0.18+10
PATH=$JAVA_HOME/bin:$PATH:/opt/apache-maven/bin
export JAVA_HOME
export PATH

// 一般ユーザーで 設定を反映
$ source ~/.bash_profile

// 一般ユーザーで mvn バージョンを確認
$ mvn --version
Apache Maven 3.6.3 (cecedd343002696d0abb50b32b541b8a6ba2883f)
Maven home: /opt/apache-maven
Java version: 11.0.18, vendor: Eclipse Adoptium, runtime: /usr/local/src/jdk-11.0.18+10
Default locale: en, platform encoding: UTF-8
OS name: "linux", version: "5.15.79.1-microsoft-standard-wsl2", arch: "amd64", family: "unix"

18. Visual Studio Code をインストールする

Visual Studio Code をダウンロードするを参照し、Windows11環境に Visual Studio Code をインストールする

18. DockerおよびDocker Composeのインストール

ターミナルのコマンドプロンプトからコマンドを実行する
参考文献：Ubuntu22.04へDockerとDocker Compose v2 をインストール
参考文献：【Linux初心者向け】WSL2環境のUbuntu22.04にDockerをインストールする
参考文献：Install Docker Desktop on Windows

コマンドプロンプト

// ホームディレクトリに移動
$ cd

// 依存パッケージインストール
$ sudo apt update
$ sudo apt install ca-certificates curl gnupg lsb-release

// Dockerの公式GPGキーを追加（およそ5分）
$ sudo mkdir -p /etc/apt/keyrings
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

// docker.gpgファイルの確認
$ ls -la /etc/apt/keyrings/docker.gpg
-rw-r--r-- 1 root root 2760 Feb 24 12:48 /etc/apt/keyrings/docker.gpg

// Dockerリポジトリ登録
$ echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg]  https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"  | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

// Docker Engineのインストール
$ sudo apt update
$ sudo apt install docker-ce docker-ce-cli containerd.io

// dockerのバージョン確認
$ docker --version
Docker version 23.0.1, build a5ee5b1

// ibtablesの整合性の確保（wsl2＆ubuntu22.04環境で必要なdocker操作）
$ sudo update-alternatives --set iptables /usr/sbin/iptables-legacy
$ sudo update-alternatives --set ip6tables /usr/sbin/ip6tables-legacy

// dockerサービスの起動
$ sudo service docker start

// dockerの動作確認
$ sudo docker run hello-world
Hello from Docker!

// sudoなしでdocker実行できるようにする
// dockerグループの確認
$ cat /etc/group | grep docker
docker:x:999:

// dockerグループの追加（※「pi」は各自のユーザー名に読み替え）
$ sudo gpasswd -a pi docker

// dockerグループの確認
$ cat /etc/group | grep docker
docker:x:999:pi

// ソケットファイルのパーミッションの確認
$ ls -la /var/run/docker.sock
srw-rw---- 1 root docker 0 Feb 24 12:59 /var/run/docker.sock

// ソケットファイルのパーミッションを変更
$ sudo chmod 666 /var/run/docker.sock

// dockerサービスの起動状況を確認
$ service docker status
 * Docker is running

// sudoなしでdockerの動作確認
$ docker run hello-world
Hello from Docker!

// Docker のリポジトリからCompose をインストール
$ sudo apt install docker-compose-plugin

// docker composeのバージョン確認
$ docker compose version
Docker Compose version v2.16.0

// docker-compose のパスを確認
$ ls -la /usr/libexec/docker/cli-plugins
-rwxr-xr-x 1 root root 70525240 Feb  2 02:47 docker-buildx
-rwxr-xr-x 1 root root 47312896 Feb 10 04:47 docker-compose
-rwxr-xr-x 1 root root 12611584 Dec 16 07:25 docker-scan

// root ユーザーにスイッチ（※ハイフン付き）
$ sudo su -

// .bash_profileにパスを追加
# vi ~/.bash_profile

// 編集後の内容
JAVA_HOME=/usr/local/src/jdk-11.0.18+10
PATH=$JAVA_HOME/bin:$PATH:/opt/apache-maven/bin:/usr/libexec/docker/cli-plugins
export JAVA_HOME
export PATH

// 設定を反映
# source /root/.bash_profile

// docker-compose の確認
# which docker-compose
/usr/libexec/docker/cli-plugins/docker-compose

// root から抜ける
# exit

// 一般ユーザーの .bash_profileにパスを追加
$ vi ~/.bash_profile

// 編集後の内容
JAVA_HOME=/usr/local/src/jdk-11.0.18+10
PATH=$JAVA_HOME/bin:$PATH:/opt/apache-maven/bin:/usr/libexec/docker/cli-plugins
export JAVA_HOME
export PATH

// 一般ユーザーで 設定を反映
$ source ~/.bash_profile

// 一般ユーザーで docker-compose の確認
# which docker-compose
/usr/libexec/docker/cli-plugins/docker-compose

19. Git のインストール

Windows11環境にGitをインストールして操作したい場合は、We bring the awesome Git SCM to Windows からWindows11環境にGitインストールしてください
wsl2 Ubuntu をお使いの方は、gitコマンドがインストール済みかと思いますので、特段作業は必要なしです
参考文献：We bring the awesome Git SCM to Windows

コマンドプロンプト

// git のパスを確認
$ which git
/usr/bin/git

// git のバージョンを確認
$ git --version
git version 2.34.1

20. ハンズオン資料のダウンロード

ターミナルのコマンドプロンプトからコマンドを実行する
参考文献：ハンズオン資料のダウンロード

コマンドプロンプト

// ホームディレクトリに移動
$ cd

// ハンズオン資料のリポジトリをクローン
$ git clone https://github.com/Fintan-contents/spa-restapi-handson.git

// サンプルアプリケーションのリポジトリをクローン
$ git clone https://github.com/Fintan-contents/example-chat.git

// クローン結果を確認
$ ls -la
drwxr-xr-x 10 pi   pi   4096 Feb 24 12:02 example-chat
drwxr-xr-x  7 pi   pi   4096 Feb 24 12:02 spa-restapi-handson

20. ハンズオンプロジェクトの作成

ターミナルのコマンドプロンプトからコマンドを実行する

コマンドプロンプト

// ホームディレクトリに移動
$ cd

// プロジェクトの雛形をコピー
$ cp -pr ~/spa-restapi-handson/starter-kit ./

// プロジェクトディレクトリをリネーム
$ mv ./starter-kit ./todo-app

// プロジェクトディレクトリを確認
$ ls -la
drwxr-xr-x  4 pi   pi   4096 Feb 24 12:02 todo-app

$ ls -la ./todo-app
drwxr-xr-x 5 pi pi 4096 Feb 24 12:02 backend
drwxr-xr-x 5 pi pi 4096 Feb 24 12:02 frontend

F1. フロントエンドアプリの起動

ターミナルのコマンドプロンプトからコマンドを実行する
参考文献：フロントエンドのアプリを起動する

コマンドプロンプト

// frontendディレクトリに移動
$ cd ~/todo-app/frontend

// frontendディレクトリを確認
$ ls -la

// 依存モジュールをインストール
$ npm install

// フロントエンドアプリを起動
$ npm start

// ブラウザが自動で起動し、「Hello, world」が表示されることを確認

// フロントエンドアプリを終了
CTRL + C キー押下

B1. バックエンドアプリの起動

ターミナルのコマンドプロンプトからコマンドを実行する
参考文献：バックエンドのアプリを起動する

コマンドプロンプト

// frontendディレクトリに移動
$ cd ~/todo-app/backend

// backendディレクトリを確認
$ ls -la

// Docker ComposeでPostgreSQLをDockerコンテナで起動
$ docker-compose -f docker/docker-compose.dev.yml up -d

// コンテナ起動を確認
$ docker-compose -f docker/docker-compose.dev.yml ps
NAME                IMAGE               COMMAND                  SERVICE             CREATED             STATUS              PORTS
docker-postgres-1   postgres:12         "docker-entrypoint.s…"   postgres            44 seconds ago      Up 42 seconds       0.0.0.0:5432->5432/tcp, :::5432->5432/tcp

// Jettyを`localhost:9080`で起動
$ mvn jetty:run
[INFO] Started ServerConnector@523ade68{HTTP/1.1,[http/1.1]}{0.0.0.0:9080}
[INFO] Started @12874ms
[INFO] Started Jetty Server

// バックエンドアプリの動作確認
// ブラウザを起動し、`http://localhost:9080/api/test` にアクセスする
// リクエストに対するレスポンス結果`{status: "ok"}`が表示されることを確認

// ブラウザが自動で起動し、「Hello, world」が表示されることを確認

// バックエンドアプリJettyを終了
CTRL + C キー押下

// Docker ComposeでPostgreSQLをDockerコンテナで停止
$ docker-compose -f docker/docker-compose.dev.yml down

// コンテナ停止を確認
$ docker-compose -f docker/docker-compose.dev.yml ps

F2. ToDo管理アプリの実装開発

参考文献：ToDo管理の実装を参考に、ToDo管理アプリの実装開発を進める
その際、プログラムファイルの編集には、Visual Studio Code エディタを用いると効率的な開発がおこなえる
参考文献：ToDo管理の実装
エクスプローラーから \\wsl$\Ubuntu\home\pi を開き、todo-app フォルダを右クリックし「その他のオプション表示」をクリックする

「Code で開く」をクリックし、Visual Studio Code エディタで、todo-app フォルダ内にアクセスする

左縦ペインから編集対象のファイルを編集し、「CTRL + S」でファイルを保存する

参考文献：ToDo管理の実装を参考に、うまく src/App.tsxファイルを編集できればTodoアプリの見た目（フロントエンド）が変更できると思います

参考文献：ToDo管理の実装を参考に、src/App.cssファイルも編集できればTodoアプリの見た目（フロントエンド）をさらに変更できると思います

21. おわりに

いかがでしたでしょうか？Windows11 ＋ wsl2 開発環境の構築をすることができたのではないかと思います
引き続き参考文献：ハンズオンコンテンツを参考に、フロントエンドアプリ、REST API、バックエンドアプリの開発を進めれば、ToDo管理アプリの開発を体験することができると思います、時間はかかるかもしれませんがちょっとずつ開発体験を進めることで大きな学びがえられると思います
今回の記事が、みなさまの学習の参考になれば幸いです

2023/2/24 TAKAHIRO NISHIZONO

22. 謝辞

Fintan（Fintan主催するTIS株式会社、テクノロジー＆イノベーション本部）さんへ、素敵なハンズオンコンテンツを公開いただき感謝いたします

23. 追記その1：Windows11 ＋ wsl2 環境でsystemctlコマンド（systemdコマンド）を有効にする

wsl2 Ubuntu 22.04環境では、systemctlコマンドの代わりにserviceコマンドが当初有効になっていました
Linux系の開発では、systemctlコマンドの方が馴染みがあると思いますので、wsl2環境でのsystemctlコマンド有効化をお伝えします
参考文献：Windows 10 or 11 （WSL2）のUbuntuでsystemctlを利用する方法（systemdをPID1で動作させる方法）
参考文献：Windows11 WSL2 で Ubuntu 標準の systemd を使ってみた
参考文献：WSL2+Ubuntu22.04に標準で入ったsystemdを試す
参考文献：WSL2のUbuntu 22.04でSystemdでDockerを起動させる

wsl2コマンドプロンプト

// wsl.conf ファイルを新規作成し編集
$ sudo vi /etc/wsl.conf

// wslを閉じる
$ exit

wsl.confファイル

[boot]
systemd=true

powershellコマンドプロンプト

// wslをシャットダウン（コマンドでwsl再起動が面倒の場合は、PC自体を再起動させた方が早いかもしれません）
PS C:\> wsl --shutdown

// wslを起動
PS C:\> wsl

// wslを閉じる
$ exit

// powershellを閉じる
PS C:\> exit

wsl2コマンドプロンプト

// systemdプロセスの起動を確認
$ ps -ae | grep systemd
      1 ?        00:00:00 systemd
    413 ?        00:00:00 systemd-journal
    441 ?        00:00:00 systemd-udevd
    468 ?        00:00:00 systemd-resolve
    525 ?        00:00:00 systemd-logind
    961 ?        00:00:00 systemd


// サービス起動に失敗しているサービスがないことを確認
$ systemctl list-units | grep -i 'failed failed'

// docker.serviceのステータスを確認（systemctlコマンドが使えることを確認）
$ systemctl status docker
● docker.service - Docker Application Container Engine
     Loaded: loaded (/lib/systemd/system/docker.service; enabled; vendor preset: enabled)
     Active: active (running) since Fri 2023-02-24 18:01:22 JST; 6min ago

24. 追記その2：フロントエンド開発時の備忘録

フロントエンド開発時の動作確認では、開発前のバックエンドアプリの代わりとして「モックサーバ」を起動してから、フロントエンドアプリの起動をおこない、フロントエンドアプリの動作確認をする必要があるようです
参考文献：モックサーバの起動
参考文献：フロントエンドのアプリを起動する

コマンドプロンプト

// モックサーバの起動
$ cd ~/todo-app/frontend
$ docker-compose -f docker/docker-compose.api-mock.yml up

// フロントエンドのアプリを起動（別のターミナルでコマンド実行するとよさそうです）
$ cd ~/todo-app/frontend
$ npm start