日曜日の朝3時に目が覚めてしまいましたので、React のWebサイトを新規に立ち上げて遊んでました。

Dockerのubuntu:20.04コンテナで、インストールしてWeb画面を表示するところまでの簡単な手順です。

1. 前提

Windows に Docker Desktop をインストールしました。

2. ubuntu コンテナの起動

コンテナの起動に際して、ポートフォワーディングが必要なのですが、Docker Desktop の画面でやり方がわからなかったため、docker run コマンドで実行しました。コマンドプロンプトを起動して、以下のコマンドを実行します。

> docker run -p 8080:8080 -it ubuntu:20.04 /bin/bash

3. nodejsのインストール

こちらを参考にしつつ、以下のコマンドでインストールします。

> apt update
> apt install nodejs npm

4. React App の作成

シンプルに Create React App を使いました。

> npx create-react-app my-app
> cd my-app

5. ビルド

追加の実装は何もしてないのですが、プロダクションビルドを実行します。

> npm run build

これで、追加で build ディレクトリが作成されました。

6. Webサーバのインストール

手短に http-server をインストールします。ただし、執筆時点の最新版（v14.0.0）だと、表示時にエラーが出てしまうので、古いバージョンで比較的ダウンロード数が多い v0.12.3 にしました。（セキュリティパッチなどが当たっていない可能性があるので、本番用としては使えないですね）

> npm install -g http-server@0.12.3

7. サーバーの実行

ビルドされたファイルがあるディレクトリで、コマンドを実行します。

> cd build
> http-server

8. ブラウザで表示する

ホストOS (Windows) 側でブラウザを立ち上げて、 localhost:8080 にアクセスします。




無事に表示されました。