github pagesにreactアプリをデプロイして少しハマった話
自己紹介サイトをgithub pagesで作ろうと思って、ついでにreactアプリでやってみようと思ってやってみた。 いくつかハマったので備忘録として残しておく。
ちなみにサイトはこちら。。
デプロイ
gh-pages
インストール
アプリ実装後、デプロイのためにgh-pagesというgithub pagesにデプロイできるnpmパッケージがあり、こいつをインストールする。
$ npm install gh-pages --save-dev
package.json
その後だいたいの紹介ページでpackage.jsonへデプロイ用に以下のように設定する記述があり、その通りやる。
"scripts": {
(略)
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"homepage": "https://{user name}.github.io/{repository name}",
ちなみに自分はwebpackで組んでいるため、npm run buildで実行されるコマンドを下記のように設定した。
"scripts": {
"build": "webpack --mode production",
(略)
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
デプロイコマンド実行
(yarn使ってる人)
$ yarn deploy
(npmの人)
$ npm run deploy
すると自分は以下のようなエラーに。。
$ yarn deploy (略) ENOENT: no such file or directory, stat '/Users/ybalexdp/src/github.com/ybalexdp/ybalexdp.github.io/build' error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
なるほど、そもそもgh-pagesコマンドで指定しているbuildってなんだと思ってたけど、ディレクトリがないというエラーですか。
ではbuildディレクトリを作って再度実行と・・
$ yarn deploy (略) The pattern in the "src" property didn't match any files. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
コケた。。
色々ググってみたが同じとこで困っている感じの記事もあったが、解決しておらず。
git - The pattern in the "src" property didn't match any files" React.js - Stack Overflow
srcがどのファイルにもマッチしないというのがよくわからず、試行錯誤した結果、指定しているディレクトリがindex.htmlが格納されているディレクトリじゃなかろうかと思い立ち、下記に修正。
"scripts": {
(略)
"predeploy": "npm run build",
"deploy": "gh-pages -d ."
},
"homepage": "https://{user name}.github.io/{repository name}",
すると、、通った！
react-router-domによる直接URL指定の404
今回公開したサイトはトップページと/aboutを設けています。この際にreact-router-domを利用してルーティングしているのですが、直接/aboutにアクセスすると404になります。
ローカルはwebpack-dev-serverで組んでいるのでhistoryApiFallbackを設定することで解決できます。
webpack.config.js
devServer: {
historyApiFallback: true
},
しかし、github pagesにデプロイする際にyarn deploy時にwebpackコマンドでのbuildを指定しており、かつwebpack-dev-serverだとデプロイ後にアクセスできなくなっていたので、こいつは使えませんでした。
色々調べると、こんなものがありました。
github.com
READMEのタイトルがSingle Page Apps for GitHub Pagesですからもうバッチリです。
詳細な使い方はREADMEを読んでいただければと思いますが、自分がやったのは以下二つの手順です。
まず公開されている404.htmlを自身のリポジトリのルートディレクトリに配置。この際自身のトップページのURLの階層に応じてファイル内のsegmentCountの値をいじる必要があります。
自分はルートの階層で公開(ybalexdp.me)しているため0となります。例えばybalexdp.me/topなどであれば1となります。
もう一つは公開されているindex.htmlの以下を自身のindex.htmlのheadタグ直前に配置します。
<!-- Start Single Page Apps for GitHub Pages --> (略) <!-- End Single Page Apps for GitHub Pages -->
以上で直接トップページ以外のURLへアクセスした際に想定しているページへリダイレクトしてくれます。
証明証が有効にならない
github pagesは無償でHTTPSサポートしてくれます。手順としては公式を見ていただければと思います。
ただ自分が実施した際に、アクセスすると証明書が有効になるまでラグがあるのかセキュリティリスクの警告ページが出ました。
これも色々調べたら一晩くらい放置すると有効になるという記事が散見されたので放置して見たら普通にアクセスできました ^ ^;
