Gatsby + Netlifyでデプロイがエラーになる時

Gatsby + Netlifyでデプロイがエラーになる時JavaScript

今流行り(?)のGatsby + Contentful + Netlify + GitHubという構成でブログサイトを作っていたところ、netlifyの方にデプロイしてもエラーが出て失敗するということがあったので、自分なりに対処法をまとめました。

 

スポンサーリンク

Gatsby + Netlifyでデプロイがエラーになった原因

先に結論を書いておくと、package.jsonの"name"の部分に日本語を入れていたことが原因でした。

英語だけにしたらちゃんとデプロイできました。たったこれだけです。

この"name"というキーにはURLに使える文字列しか指定できないとか大文字は指定できないとか、いくつかルールがあるみたいですね。プロジェクトの名前だと思ってたけどただ名前を入れればいいってわけじゃないみたいです。

 

あと、これは関係あるかわかりませんが、package.jsonにあった"private": trueという部分も念のため削除しました。

これがあるとモジュールの公開ができないとか、オープンソースにできないとかそんな感じのことが書いてあった(けど正直よくわからなかった)のでとりあえず削除しておきました。

僕はgatsby-starter-blogで始めたのでこういうのが入っていたのかも。

 

Gatsby + Netlifyでデプロイしたときのエラーログ

Netlifyにデプロイしたときのデプロイログ(エラーログ)を載せておきます。エラーログの方はnetlifyのサイトで確認できます。

長くなってしまうので関係ない部分は端折ってます。あとサイト名は出したくないので適当な名前にしてます。

4:40:22 AM: Build ready to start
...
省略
...
4:40:45 AM: ────────────────────────────────────────────────────────────────
4:40:45 AM:   Netlify Build                                                 
4:40:45 AM: ────────────────────────────────────────────────────────────────
4:40:45 AM: ​
4:40:45 AM: ❯ Version
4:40:45 AM:   @netlify/build 10.2.0
4:40:45 AM: ​
4:40:45 AM: ❯ Flags
4:40:45 AM:   apiHost: api.netlify.com
4:40:45 AM:   cacheDir: /opt/build/cache
4:40:45 AM:   deployId: 606621a6e2230f3b550b708c
4:40:45 AM:   mode: buildbot
4:40:45 AM:   testOpts:
4:40:45 AM:     silentLingeringProcesses: ''
4:40:45 AM: ​
4:40:45 AM: ❯ Current directory
4:40:45 AM:   /opt/build/repo
4:40:45 AM: ​
4:40:45 AM: ❯ Config file
4:40:45 AM:   No config file was defined: using default values.
4:40:45 AM: ​
4:40:45 AM: ❯ Context
4:40:45 AM:   production
4:40:45 AM: ​
4:40:45 AM: ────────────────────────────────────────────────────────────────
4:40:45 AM:   1. Build command from Netlify app                             
4:40:45 AM: ────────────────────────────────────────────────────────────────
4:40:45 AM: ​
4:40:45 AM: $ npm run build
4:40:45 AM: npm ERR! Invalid name: "日本語名のブログ"
4:40:45 AM: npm ERR! A complete log of this run can be found in:
4:40:45 AM: npm ERR!     /opt/buildhome/.npm/_logs/2021-04-01T19_40_45_331Z-debug.log
4:40:45 AM: ​
4:40:45 AM: ────────────────────────────────────────────────────────────────
4:40:45 AM:   "build.command" failed                                        
4:40:45 AM: ────────────────────────────────────────────────────────────────
4:40:45 AM: ​
4:40:45 AM:   Error message
4:40:45 AM:   Command failed with exit code 1: npm run build
4:40:45 AM: ​
4:40:45 AM:   Error location
4:40:45 AM:   In Build command from Netlify app:
4:40:45 AM:   npm run build
4:40:45 AM: ​
4:40:45 AM:   Resolved config
4:40:45 AM:   build:
4:40:45 AM:     command: npm run build
4:40:45 AM:     commandOrigin: ui
4:40:45 AM:     environment:
4:40:45 AM:       - CONTENTFUL_ACCESS_TOKEN
4:40:45 AM:       - CONTENTFUL_SPACE_ID
4:40:45 AM:     publish: /opt/build/repo/public
4:40:45 AM: Caching artifacts
...
省略
...

34行目にnpm ERR! Invalid name: "日本語名のブログ"って書いてありますね。ここがエラーの原因だったわけです。

僕はてっきり33行目の$ npm run buildの辺りがおかしいのかと思ってNetlifyのBuild SettingsのBuild commandをgatsby developに変えたりなんか色々してましたが全然関係なかったみたいですね…。

 

まとめ

ググっても全然出てこなかった(そりゃそうだ)ので記事にしてみました。

それとちょっとしたtipsですが、エラーログを全部Google翻訳すると原因の特定がしやすいと思います。

今回のこのエラーもGoogle翻訳して気づいたので、エラーの原因を特定するときに全部翻訳するっていうのは結構良いやり方なのかもしれませんね。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる