ウェブアプリのデプロイ

さて、テストアプリケーションができたので、実際にサーバーに設置して動くかどうか試してみる。

$ npm start

で実行すると、ローカルのhttpサーバーが立ち上がり、http://localhost:3000/でアプリにアクセスされる。

これはテスト用のものなので、ビルドするには

$ npm run build

で、まとめられたファイルが作成されるはずである。

buildフォルダの中に、ファイルが作成された。

ここで、build/index.htmlをローカルで開いてみたが、ページが真っ白で何も表示されない。

また、ロリポップのサーバー上に置いてみてもやはり真っ白で何も表示されない。

やっぱりhttpサーバーだけじゃ動かない？？

build/index.htmlのソースコードを見ると下記の様になっている。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>React App</title>
    <script defer="defer" src="/static/js/main.ec2d2994.js"></script>
    <link href="/static/css/main.e6c13ad2.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

これを見るとjsとかpngのリンクが/始まりのリンクになっているので問題が生じているように見える。

ということは、jsがきちんと読み込まれれば、httpサーバーでも動く気がする。

試しにロリポップサーバーのトップに置いてみたら普通に動いた。

しかし、トップページは普通にページがあるので、ここで動作されると困る。そこで、フォルダを切ることができないか？

前回使ったchatGPTに追加の質問を実施することにした。

ビルドのときにルート位置を/ではなく/app/にすることはできますか？

Reactアプリケーションのビルド時に、ルート位置を/ではなく/app/に設定することは可能です。このように設定すると、ビルドされたアプリケーションは/app/以下に配置されます。

設定方法は、Reactアプリケーションのpackage.jsonファイル内のhomepageフィールドを編集することで行います。具体的には、package.jsonファイルに次のようにhomepageフィールドを追加します。
{
  "name": "your-app-name",
  "version": "1.0.0",
  "homepage": "/app/",
  ...
}
この設定を行った後に、通常通りnpm run buildコマンドを実行すると、ビルドされたアプリケーションは/app/以下に配置されます。その後、Webサーバーでこのディレクトリを公開すれば、アプリケーションを/app/以下のパスでアクセスできるようになります。

注意点として、homepageフィールドで設定したパスと実際の公開パスが一致している必要があります。つまり、Webサーバーでアプリケーションを公開する際にも/app/以下に配置する必要があります。

なるほど。そこに記載すればよいのか。ということで、ここにアプリ名のフォルダ名(st-func-webとした)を記載して再ビルドを行う。

これで、st-func-webにアクセスしてみたら、無事に表示された！

しかし、ページの切り替えをすると、ページが表示されるものの、アドレスバーのアドレスは/がルートであるアドレスになってしまう。

ということでまた質問してみる。

下記コードで、rootのurlが/ではなく/app/のときはどう記載すればよいですか？

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

// Components
import Home from './Home';
import Calculator from './Calculator';

const App: React.FC = () => {
  const [calcMode, setCalcMode] = useState<'sum' | 'product'>('sum');

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/calc">Calculator</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/calc" element={<Calculator calcMode={calcMode} setCalcMode={setCalcMode} />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

rootのURLを/app/に変更したい場合は、<Router>コンポーネントにbasenameプロパティを追加して、/app/を指定します。以下は修正したコードです。
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

// Components
import Home from './Home';
import Calculator from './Calculator';

const App: React.FC = () => {
  const [calcMode, setCalcMode] = useState<'sum' | 'product'>('sum');

  return (
    <Router basename="/app">
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/calc">Calculator</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/calc" element={<Calculator calcMode={calcMode} setCalcMode={setCalcMode} />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;
この修正により、<Router>が/app/を基準としてルーティングを行います。例えば、<Link to="/">Home</Link>は/app/にアクセスするためのリンクになります。