Gatsby.js導入事始め | 鯖缶オープンソースがけ

Vue.jsをやったので、新規技術”Nuxt.js”を用いて蔵書管理ウェブアプリを作ってみたいと思ったけど、いろいろ調べてたらReactベースのGatsby.jsがいいのではなんて思い始めたのでテスト導入してみることにしたが、今の所うまくいってない。ので、いろいろ試しながらここを書き足し続けている。

前提
やったこと
参考文献

前提

・OSX 10.14.6 (Mojave)
・npm 6.14.10 (6.14.6からアップデートした)
・Gatsby CLI 2.18.0

やったこと

npmアップデート

いきなりGatsbyの導入をやったけど、npmが古いって怒られたのでアップデートした。とはいってもこれではアップデートできなかったので一旦アンインストールして入れ直した。

SHELL:（だめだったやつ）
$ npm install -g npm

めっちゃエラー出た

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/cliui/node_modules/strip-ansi
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/cliui/node_modules/ansi-regex
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/co
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/dot-prop
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/configstore
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/gentle-fs
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/fast-deep-equal
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/get-caller-file
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/bin-links
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/ini
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/invert-kv
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/json-schema-traverse
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/ajv
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/lcid
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/mem/node_modules/mimic-fn
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/nice-try
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/npm-registry-fetch
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/os-locale/node_modules/cross-spawn
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/p-defer
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/map-age-cleaner
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/os-locale/node_modules/execa
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/p-is-promise
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/mem
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/os-locale
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/p-try
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/p-limit
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/p-locate
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/locate-path
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/find-up
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/rc/node_modules/minimist
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/require-main-filename
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/har-validator
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/wrap-ansi/node_modules/string-width
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/wrap-ansi
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/cliui
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/yargs-parser
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/yargs/node_modules/y18n
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/yargs
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/libcipm
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/libnpx
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/meant
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/npm-audit-report
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/npm-user-validate
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/opener
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/cliui/node_modules
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/mem/node_modules
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/os-locale/node_modules
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/wrap-ansi/node_modules
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/rc/node_modules
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/yargs/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules/npm/node_modules/cliui/node_modules/strip-ansi
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/cliui/node_modules/strip-ansi'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/cliui/node_modules/strip-ansi'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules/npm/node_modules/cliui/node_modules/strip-ansi'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/***/.npm/_logs/2021-01-29T16_02_59_414Z-debug.log

検索ワードがどれかわからなかったのと結局めっちゃ難しそうだったのでアンインストールしてインストーラ使ってインストールした。

SHELL:（うまくいったやつ、まずは削除）
$ npm uninstall -g npm

ダウンロードサイト→https://nodejs.org/ja/download/

SHELL:
$ npm --version
6.14.10

Gatsby.js導入？

SHELL:
$ npm init gatsby
create-gatsby version 0.4.0

###some questions###

TypeError: Cannot read property 'plugins' of undefined
    at /Users/nao/.npm/_npx/4057/lib/node_modules/create-gatsby/lib/index.js:1:202961
    at Array.map (<anonymous>)
    at exports.run (/Users/***/.npm/_npx/4057/lib/node_modules/create-gatsby/lib/index.js:1:202939)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

いみがわからない

仕方ないので解法を調べていたところ、gatsby-cliなるものがあると知ったので、そちらを試してみることにした。生のgatsby.jsと何が違うんだ…

Gatsby-CLI導入

SHELL:
$ npm install -g gatsby-cli

なんかたくさん非推奨が出てきたけど終わったっぽい。Successって出てるし大丈夫やろ

なんだか情報を送信してるっぽいので、機能をオフにするには…のコマンドを叩いてみた

SHELL:
$ gatsby telemetry --disable
Telemetry collection disabled

$ gatsby --version
Gatsby CLI version: 2.18.0

多分導入に成功したので、テストサイトを作るところからまずは始めてみようかと思います。

プロジェクト作成

プロジェクトを始めるにはgatsby newで始められるっぽいのでこれで作成していきます。

SHELL:
# gatsby new my-site
info Creating new site from git:
https://github.com/gatsbyjs/gatsby-starter-default.git

Cloning into 'my-site'...
remote: Enumerating objects: 29, done.
remote: Counting objects: 100% (29/29), done.
remote: Compressing objects: 100% (27/27), done.
remote: Total 29 (delta 2), reused 11 (delta 0), pack-reused 0
success Created starter directory layout
info Installing packages...
info Preferred package manager set to "npm"

npmが自動的に選択されましたね。（参考サイトではyarnとnpmが選択できたっぽい）

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd my-site
  gatsby develop

どうやらディレクトリを移動してdevelopコマンドを叩くと起動するのかな？
叩いてみたところvueのserveみたいな情報がたくさん並んだのち、localhost:8000でプレビューできることが表示されたので確認してみる異にする。やってることはだいたいVue-CLIとあまり変わらないような気がするので少し安心。

You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 6.340s