ExpressにstaticなReactアプリを配置する方法 (改)

はじめに

先日作ったExpressアプリの改造です。

このときの課題として、Reactアプリを、サーバーアプリのpublicの直下に置く方法しかわからなかったのですが、フォルダを掘れたのでその内容です。
上の記事では、②-3のあたりの話。

最終系

public/scatter-app-build 以下に、丸っとコピーしています。

routes/index.jsだけの話

routes/index.js

router.get('/', function(req, res, next) {
  // res.sendFile("index.html");  // 削除
  res.sendFile("index.html", {  // ①追加
    root: path.join("public","scatter-app-build"),
  });
});
// ↓②追加
router.use(express.static(path.join("public","scatter-app-build")));

①の追加分があるrouter.get()の目的は、URLで/とリクエストが来た場合は、index.htmlを返すよということ。なのでここで、デフォルトのpublic/index.htmlから、public/scatter-app-build/index.htmlを返すよう変更します。
参考：Express 4.x - API リファレンス（Express公式）

②の関数は、URLで/以下でファイル名を指定された場合に見に行くファイル群のこと。たとえば、http://～～～/favicon.icoを頂戴って言われたら、どのファイルを渡す？という設定。ここでは、/～と最上位の直下で呼び出されるときは、public/scatter-app-build/～のファイルを返してということ。http://～～～/favicon.icoと言われたら、public/scatter-app-build/favicon.icoとなります。
これは、public/scatter-app-build/index.htmlの中から、.jsファイルやら.cssファイルを呼び出しているので、その時に行きます。逆にいうと、②の関数がないと、.jsとか.cssがない（読み込めない）となります。

以上です。

ついで話

今後、別のアプリもこのExpressに載せたくなった場合、http://～/以下は入口として、http://～/scatter-app/で今のアプリ、http://～/another-app/で別のアプリ、とかやりたくなります。
その場合も今回の話が生きて、②の関数の書き方を変えて対応します。

やり方は２つあって、１つは、

index.js

// public以下を階層ごと全部公開する
router.use(express.static("public"));

として、public以下の構造を、全部公開すること。まぁこれもありのケースも多そう。

もう１つは、このURLの場合はこのフォルダ、このURLの場合は別のこっち、という方法。第一引数に、"このURLの場合は～"というのを追加します。

index.js

// アプリごとに公開するフォルダを指定する
router.use("/scatter-app", express.static(path.join("public","scatter-app-build")));
router.use("/another-app", express.static(path.join("public","another-app-build")));

どちらもやりたいときはありそうではあります。

参考：Express での静的ファイルの提供（Express公式）

階層を分けた場合、追加でやらないといけないこと

URLのルーティングはそれでいいんですが、Reactアプリでbuildされる、index.htmlは、/～.jsを読むようになってます。http://～/scatter-app/index.htmlのファイルを開けても、そのjsファイルが/から始まるということは、http://～/～.jsを見にいっちゃうという問題。
./～.jsになっててくれれば、http://～/scatter-app/～.jsを読んでくれるので、./にする＝相対パスにする設定が必要です。

方法は、Reactアプリのpackage.jsonに、homepage: "./"を追加するだけ。

package.json

{
  "name": "scatter-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "main": "index.html",
・・・略・・・
}

もし厳格にやりたければ、scatter-app/とかにすればいいのかもしれないけど、アプリの設定でサーバーのURLを書くのは嫌な気分です。なのでカレント以下を見てねという相対パス設定がよいと、思います。

まとめ

少しずつ、Expressさんとも仲が良くなってきた気がします。恰好悪くてもとりあえず作って出し、改善点があったら直していくというスタンスで、どんどんアウトプットしていこうと思います！

今思ってる改善点は、Renderを使った今のサイトは、15分アクセスしないと次回起動時に数十秒かかるので、Next.jsの一部にしたいなーという点。
今回気づいた相対パスの設定があるので、できそうな感触です。

ではまた。