Reactで作成したアプリをApache環境にデプロイする

localhostにアクセスするのとは違ってデプロイまでを疑似的に行うことで仕組みの理解を少しでも進められたらなと思ったのでやってみます。
実際に自分で手を動かすと、「へーっ」て納得感が増しますね。
画面表示するところまでとなります。

ソースは編集せず、よく見る画面（下記画像）を表示させるところまでをゴールにします。

前提

WSL2のUbuntu環境に入れたApacheにデプロイします。
yarnが使える環境を準備してください。

手順

アプリをビルド

$ sudo apt update
$ cd ~
$ nvm use 14
$ npx create-react-app sample-app --template typescript
$ cd sample-app
$ yarn build

Apacheを導入し、念のため初期画面を表示

$ sudo apt install apache2
$ sudo apachectl start
$ ip addr

http://xxx.xxx.xxx.xxx(←上記で確認したIPアドレス、ポートは80です)
以下の画面が表示されることを確認。

$ sudo apachectl stop
$ cd /var/www/html
$ sudo mv index.html indexBackUp.html
$ sudo cp  -pR ~/sample-app/build/* ./
$ sudo apachectl start

再び、Apache導入時に確認したURLにアクセスする

最初に示した以下の画面が表示されたら正しくデプロイ出来ている。

おまけ

reactのアプリをデプロイすると、

• index.html
• css
• js
• json
• img

おおまかに上記のファイル、ディレクトリが作られる。SPAなのでhtmlは一つですね。

現場で、typeScriptを使っているので、typeScriptを使える状態でアプリを作りましたが、
今回の記事にはまったく意味がありません。。。