はじめに

とにかくかんたんにできる。初めてGitHubにpushするより断然かんたん。

BLOGは長くなったが失敗のしようがない手順になっているのでぜひともやってほしい。

Netlify-CLIの公式Docは次(英語)

Get started with Netlify CLI | Netlify Docs

インストール

まずはNetlify-CLIをインストール

npm i netlify-cli -g

※このパッケージはグローバルにインストールする

インストール後に次のコマンドラインを打つだけでヘルプが参照できる。

netlify

認証

まずは自分のアカウントと紐付ける必要がある。

次のコマンドを入れる

netlify login

※ちなみによくできておりnetlify logih(最後がhになっている)のようにスペルを間違えてもサジェスト機能で動作する。

自動でブラウザが立ち上がる

ここでブラウザが止まってしまう場合はコマンドラインをctrl+cで停止して、やり直したら正しく次へ移行できた。

ログイン後次の画面が出るのでAuthorizeをクリック。

次の表示で完了。ブラウザは閉じて良い。

とてもかんたん。

※この解説は次のURLにていつでもオーソライズを切ってアクセスを遮断できるとのこと。セキュリティ面の配慮だ。

User settings | Applications

ローカルでビルドしておく

gatsbyの場合はgatsby build

初期設定ならnpm run buildのほうが良いかも(オプションを自動でつけてくれる)

※ビルド時間短縮については軽く下部の余談で触れておく

デプロイする

デプロイするディレクトリ内で次のコマンド

netlify deploy

次の質問が帰ってくる

This folder isn't linked to a site yet
? What would you like to do? (Use arrow keys)
> Link this directory to an existing site
  +  Create & configure a new site

Netlify内にはいくつもサイトを展開できるので、どのサイトと連携するかのダイアログだ。

今回は**「既存のサイトを上書きする形でデプロイ」**なので

Link this directory to existing siteを選択

次の質問

? How do you want to link this folder to a site? (Use arrow keys)
> Use current git remote origin (https://github.com/{各自のGitHubリンク})
  Search by full or partial site name
  Choose from a list of your recently updated sites
  Enter a site ID

どの方法でリンクするかという質問。

私のBLOGは既にGitHubとリンクしてあるので一番上を選択。

名前やIDを使ってリンクすることもできる模様。

IDはSite settings > Site information > API IDとのこと。

なお、上記２つの質問があるのは初回のみ。２回目以降はnetlify deployだけでデプロイが実行される

デプロイ開始

たったこれだけでデプロイが開始する。速い。

フォルダ構成等の設定を一切する必要がなかった。gatsby.jsだからだろうか？GitHubで連携済みのため？

アップロード中NetlifyにログインするとDeploy Preview Uplodingとなっている

サイトが更新されてない？ ＞ 仮サイトです

上の画像でわかるがあくまで「Deploy Preview」としてデプロイされる。

つまり仮更新なので仮のサイトをまずはチェックする。

先程のコマンド後のメッセージを読むと次が表示されている

Logs:              ここにログURL
Website Draft URL: ここに仮サイトのURL

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
netlify deploy --prod

上の仮サイトのURLをクリックする(VSCodeはCTRL+クリック)と仮のサイトができているので正しいか確認する。

本番サイトを更新

最後に次のコマンドで先程の仮サイトを本番のサイトに移行する

netlify deploy --prod

以上で完了！

Netlify側のbuild設定をオフにする

このままではGitHubにpushしたときもNetlifyがビルドしてしまうと思われる。

というわけでNetlify側のビルドはオフにしよう。

Site Settingsをクリック

Build & deployをクリック

BuildsがActiveならNetlify側のビルドが入っているのでEdit settingsをクリックしてオフにする

Stop buildsにチェックしてからSave

これでNetlifyはビルドしなくなる。

以上！かんたん！

非常に完結で手間が少ない。だれでも直ぐに利用可能

しかもデプロイに消費されるビルド時間が0秒(ただし要検証)で、しかもサイトのプレビューまでできるのでかなり便利になったと思う。

この先はこれを使っていこうと思う。

以下余談

ここからは余談。興味がある人だけどうぞ。

なぜローカルでビルドしたいのか

Gatsby.jsはサイトが大きくなるに従ってビルド時間が増える傾向がある。

現在はビルド短縮プラグインもあるが内部パッケージをアップデートするたびに完全ビルドが必要になる。

私の環境ではサイトが大きくなりすぎてNetlifyの1回のビルド制限(15分)を超えることが度々発生するようになったためローカルビルドへ移行する。

ローカルビルドが必要になる基準

過去の経験から1日1記事程度のBLOGを1,2年運用であればおそらくビルドはNetlifyにまかせてしまっても良い。

しかし私のサイトはZBrushの解説により画像が異様に多く、これにビルド時間が取られてしまっているのでローカルビルドが必要になった。

Netlifyのビルド時間制限は月300minまで。1回あたり15minを超えても強制終了されるので目安にする。

これまでに試したローカルビルド方法

これまでGatsby.jsをローカルでビルドしてデプロイする方法はPublicをそのままGitHubにアップロードしてしまう方法。

こうするとNetlify側がそれをコピーしてデプロイするという処理であったが、どういうわけか最近その方法ではうまくデプロイできないという状況を確認した。

詳しくはわかっていないがGatsbyに関するビルドアルゴリズムが変わったからではないだろうか。

ビルド時間短縮オプション

私のnpm run buildは次のコマンドとなっている(package.json内に記載)

"build": "cross-env GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages",

これは差分ビルドによりビルド時間を短縮するコマンドだ。cross-envも別途インストールが必要。

次は古い記事

【Netlify x Gatsby.js】ビルド時間を短縮！差分だけビルドする機能(Incremental Builds)を導入するテスト！

netlify-cli経由でbuild時間消費する？

ビルド時間を見てみると先程のデプロイは表示されてないので恐らくビルド時間は0秒換算だと思われる。

GitHubにアップロードしたものをNetlify側でコピーしてもらう方式(裏技)の時はここだけで5分ほど消費されていたのでこれはかなりメリットだ。