エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

トップ > ブログ作成 > Vagrant上でGatsbyブログを編集・ビルド・デプロイしてみた

Vagrant上でGatsbyブログを編集・ビルド・デプロイしてみた

ブログ作成 Gatsby

はじめに

Gatsbyでブログを作ってみたい。前回に引き続き、スターターキットそのままのブログに少し編集を加えてみる。また、本番環境で使うコマンド「ビルド」と「サーブ」を試してみる。

この記事のゴール

  • 以下の仕組みを理解する。
    • アプリのビルド、デプロイ、ホットリロード
  • 以下を実践する。
    • ローカル環境でブログに変更を加える。
    • ローカル環境でブログをビルドし、localhostにデプロイしてみる

前回の記事

tomiko0404.hatenablog.com

前提

  • Vagrant/ubuntu18 上に環境構築
  • Node.js、Reactはインストール済み
  • gatsby-starter-blogスターターキットを利用

手動で記事を追加してみる

content/blog配下にay-page/index.mdを追加する。 中身はマークダウンで記載する。

最初の5行はgatsbyの記法（GraphQL記法？）とのこと。

---
title: ay-page　追加
date: "2022-02-05T22:12:03.284Z"
description: "ay-pageです"
---

## はじめに
ページを追加した。

### やりかた
`content/blog`配下に`ay-page/index.md`を追加した。

gatsby develop --host=0.0.0.0 を実行すると、localhost:8000/ay-page にアクセスできるようになる。

ページを追加
ページを追加

トップページにもリンクが追加された。

トップページ
トップページ

ビルド＆サーブ

以下のコマンドを実行すると、ビルドできる。 ビルドによりpublicフォルダ内にay-pageフォルダとindex.htmlが作成された。

$ gatsby build

以下のコマンドで、本番用サーバにデプロイできる。

$ gatsby serve

こちらのコマンドを実行するとlocalhost:9000にデプロイされた。

developとbuild / serveの違い

あまり正確ではないが今のところ以下のようなイメージ。

gatsby developはホットリロードが有効で、ローカルで開発するのに使う。メモリを大量に使う。

一方で、実際に商用に公開する際はgatsby buildにより作成したビルドファイルをgatsby serveで実行しておくだけなので、メモリは大きく利用しない。

おわりに

ローカルでビルド（gatsby build）とデプロイ（gatsby serve）まで実施した。

実際にブログとして利用する際には、ビルドから本番環境のWebサーバで実行するのが一般的らしい。

などを使えばクラウド上でビルドできるほか、GitHub Actionと連携すればGitにpushしたら自動的にビルド＆デプロイすることも可能らしい。

次回はこちらを試してみたい。

つづきの記事

tomiko0404.hatenablog.com