Reactで作成したブラウザアプリをサーバーに置くのに苦労した話

このポスト

初めて、Reactでブラウザアプリを作成し、ローカルでの一通りの機能を試し、いざサーバーに置こうとしたら苦労した話。

問題の始まり

プロジェクトを置いてあるフォルダで、
npm run build
を実行し、buildフォルダ内に作成されたファイル群を、サーバー上の公開用のフォルダに置いた。でもアクセスしても画面は真っ白。

問題の解決方法: .htaccessファイルの編集

いくつかのページを見ると、サーバーの.htaccessファイルの編集と、build前にpackage.jsonファイルの編集が必要だとのこと。
.htaccessファイルは

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /TraceViewer/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule . /TraceViewer/index.html [L]
</IfModule>

とした。これはchat GPTの言うなり。

問題の解決方法: package.jsonファイルの編集

package.jsonファイルには、
"homepage": "https://serverDomainName/TraceViewer"
のように付け加えろとのこと。

Visual Studio Codeでpackage.jsonファイルを編集、そして保存のためにコマンド+S(ここ！)。buildして得られたファイルをアップロード。しかし、ブラウザでアクセスしても画面は真っ白のまま。

悪戯に時が流れていく。とその時、package.jsonファイルをテキストエディットで開いてみたら、"homepage":の行がない！ちゃんと保存したはずなのに、保存されていない。

調べてみると、ファイルの所有者がシステムになっており、保存できていなかった。Visual Studio Codeではこのようなときにエラーメッセージは出ないらしい。
以下のようにして、ファイルの所有者を変更。

sudo chown [ユーザー名]:[グループ名] package.json

なお自分のユーザー名とグループ名は、

id -un
id -gn
```で調べられるとのこと。

これで所有者を変更。そして権限を変更。
```bash
chmod 755 filename

このあと再度

run npm build

してファイルをアップロード。無事に表示されました。

教訓

ファイルはちゃんと保存できたか確認しましょう。
Visual Studio Codeでは、ファイルタブの右端に白丸が表示(↓)されている時は保存されていません。