mottox2 blog

GatsbyJS v2 はじめの一歩 (4) gatsby buildとデプロイ

bloggatsby

今までの記事
GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ
GatsbyJS v2 はじめの一歩 (2) 実際にページを作る
GatsbyJS v2 はじめの一歩 (3) ページにスタイルを当てる


前回、styled-componentsでページにスタイルを当てました。今回は今まで作ったものをインターネットで公開するための作業をします。

buildでHTMLを生成

一般的に、プログラミングでものを作るときには、デバッグ用の開発環境と公開用の本番環境を用意します。開発環境は開発者向けにエラーログをそのまま表示したり、様々なデバッグのための機能が含まれています。一方、本番環境では閲覧に必要なものだけを含めるために動作速度も一般的に早くなります。
今までgatsby developと入力していたものはGatsbyJSが用意している開発環境でした。環境時の文法に誤りがあったりするとエラーが表示されたり、ファイルを更新するだけでブラウザがリロードしてくれるなど開発に便利なものがてんこ盛りでした。しかし、デプロイすることを考えると上のようなエラー表示や、自動リロードは不要です。そこで用意するのが本番環境です。

GatsbyJSは静的サイトジェネレータと呼ばれるツールに分類されていて、最終的に出力されるのはhtmlファイル+JSファイルです。これを出力するためのコマンドがgatsby buildです。
gatsby buildを実行するとpublicディレクトリ以下に次のようなファイル群が生成されます。

デプロイ

gatsby buildでファイルを用意しましたが、それだけではインターネットに公開したことにはなりません。どこかのサーバーにホスティングする必要があります。この「サーバーにファイルを配置する作業」をデプロイと呼んでいます。デプロイは日本語訳として「配置」になっていますが、個人的には「反映」の方がしっくりときています。

サーバーは自分で用意することも出来るのですが、今回はNetlifyというサービスでホスティングしてもらいます。Netlifyは静的サイトのホスティングに特化したサービスです。登録も簡単で無料で利用出来る筆者の推しサービスです。

会員登録を済ませると、Netlifyにホスティングしているアプリケーション一覧に遷移するので、右上の「New site from Git」をクリックしましょう。

deploy0.png (491.5 kB)

Gitをホスティングしているサービスの選択を要求されるので「GitHub」を選択(①)、デプロイしたいアプリケーションのリポジトリを選択しましょう。(②)


deploy1.png (295.2 kB)


deploy2.png (373.5 kB)

リポジトリを選択するとBuild CommandとPublish directoryの入力欄に遷移します。
Build Commandはデプロイする際に実行して欲しいコマンドで、今回は「npm run build」を入力します。ビルド時に静的HTMLを生成するためです。
Publish directoryは公開するディレクトリです。「publish」を入力しましょう。これはnpm run buildで生成されるディレクトリです。

deploy3.png (318.6 kB)

以上を入力するとデプロイの設定終了です。設定が完了するとアプリケーションにランダムに名前がつけられ(今回は「compassionate-benz-765c64」です。)、名前に対応するURLが生成されます。
ここでそのURLを入力すると、アプリケーションが無事デプロイされているはずです。

deploy5.png (441.6 kB)

B!
tips

Google Chromeスクショ術

技術同人誌やブログを書く上で外せないのがスクリーンショットを取ることです。 同人誌を5冊書いていく経験の中で慣れてきたので、自分がスクリーンショットを撮る時に使っている方法を紹介します。 > C

chrome
event

技書博で「SlackApps開発ガイド」を頒布します

7/27に大田区産業プラザPiOで行われる技術書同人誌博覧会(技書博)に「つのぶえ出版」としてサークル参加します。 今まで「つのぶえ出版」としてはGatsbyとNetlifyの本を4冊だしていまし

event

Ginza.jsでNext.jsをNetlifyで配信するLTをしてきた

2019/5/22にPlaidさんのオフィスで行われたGinza.js #1にLT枠で参加してきました。 前から、Plaidさんの会場は一面芝というのをTwitterで観測しており、今回初めてお邪魔

ltnetlifyreactnextjs