JAMstackでVue.js以上Nuxt.js未満なCMS?のイメージのGridsomeを触ってみたのでメモ。
v14で試そうと思ったらうまくいかなかったのでv12にして試したら上手く行きました。（後述）
チュートリアルをなぞってみる
コマンドラインツールのインストール
$ npm i -g @gridsome/cli
ここが既に重い印象。（ネガ
ブログプロジェクトを作成
$ gridsome create n0bisuke-app
ここでsharpのビルドエラー
$ gridsome create n0bisuke-app
内部でsharpという画像のリサイズとかをしてくれるモジュールを使ってるみたいで、このモジュールがNode.js v14だとビルドが通らなかったです。
省略
info sharp Using cached /Users/n0bisuke/.npm/_libvips/libvips-8.8.1-darwin-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=14.2.0 runtime=node arch=x64 libc= platform=darwin)
gyp info it worked if it ends with ok
gyp info using node-gyp@5.1.0
gyp info using node@14.2.0 | darwin | x64
省略
取り急ぎNode.js v12を利用したらビルドが通りました。
ローカル起動
プロジェクト内で以下のコマンドで起動します。
$ gridsome develop
DONE Compiled successfully in 4292ms 2:10:48
Site running at:
- Local: http://localhost:8080/
- Network: http://192.168.2.100:8080/
Explore GraphQL data at: http://localhost:8080/___explore
http://localhost:8080で起動しました。
ビルド
以下のコマンドでビルドができます。 distフォルダが出来上がるのでこれをそのままどこかに載せれば良いみたいです。
$ gridsome build
Gridsome v0.7.14
Initializing plugins...
Load sources - 0s
Create GraphQL schema - 0.03s
Create pages and templates - 0.05s
Generate temporary code - 0.04s
Bootstrap finish - 2.22s
Compile assets - 8.7s
Execute GraphQL (3 queries) - 0s
Write out page data (3 files) - 0s
Render HTML (3 files) - 0.27s
Process files (0 files) - 0s
Process images (9 images) - 1s
Done in 12.38s
vercelでデプロイ
公式ドキュメントにもありますが、
プロジェクトのルートでvercelコマンドを実行するだけでした。カンタン。
$ vercel
対話式で聞かれますが全てエンターで大丈夫でした。↓ログです。
Set up and deploy “~/Documents/ds/3_prototypes/n0bisuke-app”? [Y/n] y
? Which scope do you want to deploy to? n0bisuke
? Link to existing project? [y/N] n
? What’s your project’s name? n0bisuke-app
? In which directory is your code located? ./
> Upload [====================] 99% 0.0sAuto-detected project settings (Gridsome):
- Build Command: `npm run build` or `gridsome build`
- Output Directory: dist
- Development Command: gridsome develop -p $PORT
? Want to override the settings? [y/N] n
🔗 Linked to n0bisuke/n0bisuke-app (created .vercel and added it to .gitignore)
🔍 Inspect: https://vercel.com/n0bisuke/n0bisuke-app/fx37uus5b [3s]
✅ Production: https://n0bisuke-app.now.sh [copied to clipboard] [41s]
📝 Deployed to production. Run `now --prod` to overwrite later (https://zeit.ink/2F).
💡 To change the domain or build command, go to https://zeit.co/n0bisuke/n0bisuke-app/settings
distフォルダに移動してからかなぁとか思ってましたがルートの位置で大丈夫です。vercel側がdistフォルダを見てなのかpackage.jsonを見てなのか判断してくれます。