Gridsomeを触ってみたメモ


JAMstackでVue.js以上Nuxt.js未満なCMS?のイメージのGridsomeを触ってみたのでメモ。

v14で試そうと思ったらうまくいかなかったのでv12にして試したら上手く行きました。（後述）

https://gridsome.org/docs/

## チュートリアルをなぞってみる

### コマンドラインツールのインストール

```
$ npm i -g @gridsome/cli
```

ここが既に重い印象。（ネガ

### ブログプロジェクトを作成

```
$ gridsome create n0bisuke-app
```

### ここでsharpのビルドエラー

```
$ gridsome create n0bisuke-app
```

内部でsharpという画像のリサイズとかをしてくれるモジュールを使ってるみたいで、このモジュールがNode.js v14だとビルドが通らなかったです。

> https://www.npmjs.com/package/sharp

```
省略

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`で起動しました。

![](https://i.gyazo.com/5169dd9ff7e60551276ad5da4943b401.png)

## ビルド

以下のコマンドでビルドができます。 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
```

> ![スクリーンショット 2020-05-21 2.17.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/7dabd701-d55c-d9f3-5cfc-73e348291024.png "スクリーンショット 2020-05-21 2.17.08.png")

## vercelでデプロイ

[公式ドキュメント](https://gridsome.org/docs/deploy-to-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を見てなのか判断してくれます。