どうもこんばんわ。成人おめでとうございます。
成人式は中学校楽しくなかったので行きませんでした。
本題
Netlify
でどうやってもビルドが通らなくなってしまった、、
環境
なまえ | あたい |
---|
Next.js | 13.1.1 |
React | 18.2.0 |
Node.js | v18.13.0 (14系から更新した) |
どうやっても Netlify でビルドできなくなってしまった、、、
目次機能を追加したらNetlify
の環境でビルドできなくなりました。
手元ではビルドできるのに、、
目次を取得するためにjsdom
でHTMLをパースしてるのが悪いんか?若干メモリ多く使う+処理時間も長くなるけど...不足するほどではないはず、なぜ?
調べても出てこない、、ので良い機会だと思いGitHub Actions
に移行しようかと思います。
GitHub Actions -> Netlify
なんて何番煎じかよって話ですが一応残しておきます。
(ちなみに)やったこと
手元ではビルドできるので。Netlify
ってエラーログ見せてくれるのかな
package-lock.json
の削除
Node.js
を14.x
から18.x
へアップデート
以上試しましたがダメでした。
GitHub Actions #とは
ほかみて
タグ名 GitHub Actions
Netlify側のビルドを止める
これはサイトの詳細ページへ進み、Site settings
を押して、Build & deploy
を押し、Stopped builds
を押します。
必要な値を集める
GitHub Actions で利用する環境変数(アクセストークンみたいなやつ)を用意します。
NETLIFY_AUTH_TOKEN
アカウントページのApplications
へ進み、New access token
を押します
コピペして適当な場所に控えておきます。(メモ帳とか)
NETLIFY_SITE_ID
これはサイトの詳細ページへ進み、Site settings
を押して、Site ID:
の値をコピーします。ちょうどコピーボタンが出てますね。
GitHub Actions から参照できるように 環境変数 に追加する
Secretsの中にあるActionsを押します。
そしたら、以下の名前で環境変数を作成します。
New repository secret を押すことで環境変数の追加ができます。
なまえ | あたい |
---|
NETLIFY_AUTH_TOKEN | New access token の値 |
NETLIFY_SITE_ID | Site ID: の値 |
GitHub Actions を組む
ここから空のyaml
ファイルが作成できるので
あとは以下を参考に作ってください。
以下の値は環境によっては違うので、yaml
調整してください!
なまえ | あたい |
---|
ビルドコマンド | npm run deploy |
成果物保存先 | ./out |
ビルドコマンド、成果物保存先フォルダ名とかは各自違うと思うので
コミットして実行する
コミットします。push
がトリガー?されるのでGitHub Actions
も動くと思います。
成功しました。やったぜ~~~
それにしても長いな、、、どうしようこれ
おまけ
手動実行ボタン
ここ
Markdownに貼り付けるステータスバッジ?バッヂ?
Create status badge
からMarkdown
をコピーできます
おわりに1
もしかしたら記事が多すぎたせいかもしれないです。少ない場合は以前通りNetlify
でビルドできるかもしれないです。
おわりに2
目次機能のために生成したHTMLからh1,h2...を取得するために、HTMLパーサーにかけてるんですけど、これのせいで多分ビルド時間が伸びてしまった、、、
(10分以上かかる。GitHub Actions
、パブリックリポジトリの場合は無料だけど長いのはちょっと、、)
jsdom
じゃなくてUnified
でいい感じに処理するべきなのかな。
(最初はUnified
が吐き出す構文木をパースしてたけど、あとあとメンテすることを考えるとJS の Document
みたいな感じのAPIが使いやすいかなと思い切り替えたんですよね、、、)
以上です。数値型への変換はparseInt
よりNumber
が良いって言ってました。