REACTプロジェクトで生成したstatic htmlをサブディレクトに公開する話
reactにてFrontendを構築して、公開しようかなと思った
シンプルにbuildして成果物をアップすればOKかな
なんて思っていましたが、サブディレクトリだったらダメだったのですよ。とほほ
設定を変えればOKだったので、メモしておきます
プロジェクトの作成からstatic html buildまで
はじめに、REACTのプロジェクトの作成方法から書いておきます。
プロジェクトの作成
REACTの作成はシンプルにコマンドでOKです
$ npx create-react-app project1 --template typescript
ここのproject1の箇所をディレクトリ名です。
つまりは.でも作成可能です
※ プロジェクト名は手動で書き換えてください
動作確認
プロジェクトの作成するとそのまま動作を確認します…
$ npm start
ブラウザで http://localhost:3000/ にアクセスすればサンプルページが表示されます
はい、
buildしてstatic htmlを生成する
このままだとサーバに配置できないのでstatic htmlを作成します
$ npm run build
...
File sizes after gzip:
46.59 kB build/static/js/main.c117e0da.js
1.77 kB build/static/js/453.171ddc7f.chunk.js
513 B build/static/css/main.f855e6bc.css
....
的にbuildディレクトリに生成されます。
書いていませんがbuildディレクトリ内に index.htmlが生成されます
成果物を評価する
buildディレクトリのhtmlファイルを開いてもダメなので成果物の評価にwebserverを使います
ってかbuildのメッセージに書いていますね
...
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
するとサンプル画面が表示されます
[ダメ] そのまま成果物を公開します
このbuild内の内容をWebサーバに公開します!
https://www.mmpp.org/react_sample/ng
はい、ダメです。
404ってことで参照できないことです
要調査…書くのをめんどくさいので結果だけ書くと
/staticを参照しています。
今回、サブディレクトに公開しているので/staticではなく/react_sample/ng/static が参照先になります
サブディレクトに公開する
はい、本題です。
サブディレクトに公開する方法はproject設定のhomepageを編集すればOKです
package.json に以下の設定を書ききます
"homepage": "./",
… もうちょっと出すと…
{
"name": "static-page",
"version": "0.1.0",
"private": true,
"homepage": "./",
"dependencies": {
とnameと同じ階層に追加します
はい、成果物を生成してアップすると
https://www.mmpp.org/react_sample/test1
無事に画像付きのReact成果物ができました
終いに
今回は超シンプルにReactのプロジェクトの作成とサブディレクトリに公開する方法をメモしておきました