NetlifyのBuildを消費しない方法

blog-hero-imgローカル環境でBuildすることで、より速く、より安価にサイト運用ができます。

pen-icon2021.12.29

Profile Pic

この記事の筆者:三好アキ(ウェブエンジニア)


「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。



ローカルでBuildするメリット

当サイト(Gatsby + Netlify)はずいぶん前から、「ローカル環境でBuildした後にGithubへプッシュしてNetlifyに反映する」という流れで運用しています。

それは単純にこの運用方法の柔軟性が高いからですが、同時にNetlifyのBuild(無料プランで月当たり300分)の消費を抑えられるというメリットもあります。

今回はその方法を紹介します。

.gitignoreファイルの編集

ここではGitHub(もしくはGitLab)とNetlifyはすでに連携している想定で進めていきます。

.gitignoreファイルを開くと、通常はpublicbuildフォルダはgitにコミット/プッシュしない設定になっています。

これを#をつけてコメントアウトし、プッシュするようにします。

// .gitignore

# public

もしくは

# build

これでBuild後のファイルが格納されたpublicbuildフォルダも、GitHubにプッシュされるようになります。

Netlifyの設定変更

Netlifyの管理画面の上部メニューで、「Site settings」→「Build & deploy」と進みます。

「Build settings」欄で「Edit settings」ボタンを押し、下図のように「Build command」を空欄にしてSaveします。

これでプッシュをしても、これまでのようにNetlify上でBuildは実行されず、publicbuildフォルダの中身がサイトに反映されるようになります。

ローカルで作業をするプロセス

コードに変更を加えた後、gitへプッシュする前に、まずnpm run buildgatsby buildなどのBuildコマンドをターミナルで実行します。

これによって今回加えた変更の反映された最新のデータがpublicbuildフォルダに用意されます。

Build完了後、gitへプッシュします。

.gitignoreに加えた変更によってpublicbuildフォルダもプッシュされ、これがNetlifyへと反映されます。

ローカルですでにBuildを済ませている分、サイトへの反映時間が大幅に短くなっているのがわかると思います。

ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein

monoteinについての案内資料の無料ダウンロードはこちら。

「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。

無料相談