🏠

package.jsonのhomepageフィールド

2022/05/24に公開

npm

tech

homepageフィールドの意味

package.jsonのhomepageフィールドについてまとめる。

npmの公式ドキュメントには、以下のように記されている。

homepage
The url to the project homepage.
Example:
　　"homepage": "https://github.com/owner/project#readme"

つまり、「開発しているプロジェクトのホームページへのURL」を設定する項目である。

ビルドログでの説明

Create React Appで作成したWebアプリをAWSのAmplifyにデプロイし、npm run buildが実行された時のログには以下のように書かれている。

2022-05-22T05:45:02.381Z [INFO]: 646.4 KB (+1.22 KB)  build/static/js/2.7e391aaa.chunk.js
2022-05-22T05:45:02.381Z [INFO]: 13.52 KB (+2.16 KB)  build/static/js/main.c31e35c4.chunk.js
                                 777 B (-5 B)         build/static/js/runtime-main.18d35f5b.js
                                 The project was built assuming it is hosted at /.
                                 You can control this with the homepage field in your package.json.

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

「このプロジェクトは/でホストされていると仮定してビルドされています。package.jsonのhomepageフィールドで制御することができます。」とのこと。
homepageをいじらなければ、生成されたbuildフォルダをWebサーバのドキュメントルート(/)に配置するということ。つまり、/以外でホストしたいのなら、homepageを編集してね、ということ。

Create React Appでの説明

Create React Appの公式ドキュメントには、以下のように記されている。

By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json, for example:
"homepage": "http://mywebsite.com/relativepath",

「デフォルトでは、Create React Appはアプリがサーバのルートでホストされていると仮定してビルドを生成します。これを上書きするには、package.jsonに

package.json

"homepage": "http://mywebsite.com/relativepath",

と指定します。」とのこと。npm run buildを実行したときに出るメッセージと同じことを言っている。

また、

If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json:
"homepage": ".",
This will make sure that all the asset paths are relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.

「History APIのpushState()メソッドやクライアントサイドルーティングを使用しない場合は、アプリの配信元URLを指定する必要はありません。その代わりに、package.jsonにこの情報を記述します。

package.json

"homepage": ".",

これにより、全てのアセットのパスがindex.htmlからの相対パスとなります。これで、アプリを再ビルドすることなく、http://mywebsite.com から http://mywebsite.com/relativepath や http://mywebsite.com/relative/path に移動することができるようになります。」とも書かれている。
History APIのpushState()メソッドについては以下が分かりやすい。

GitHub Pagesにデプロイする時にもhomepageフィールドを設定するよう書かれている。

Open your package.json and add a homepage field for your project:
"homepage": "https://myusername.github.io/my-app",

おわりに

stackoverflowでも、以下のようなhomepageフィールドに関する質問が結構あった。

package.jsonの数あるフィールドのうち、たった一つのフィールドでも調べるといろいろと発見があることを学んだ。

homepageフィールドの意味

ビルドログでの説明

Create React Appでの説明

おわりに

Discussion