Vagrant上でGatsbyブログのひな型を作成した
はじめに
せっかくReactを勉強していることもあり、Gatsbyでブログを作成してみたい。（完成しないかもしれないけど…）
本記事では、まずはスターターキットを利用して、型だけ作ってみる。
この記事のゴール
前提・環境
- Vagrant/ubuntu18 上に環境構築
- Node.js、Reactはインストール済み
前提の環境構築の参考記事：
Linux仮想環境：Vagrantの立ち上げ方メモ - エンジニアを目指す日常ブログ
Node.js インストール方法メモ - エンジニアを目指す日常ブログ
Gatsbyのインストール
以下のコマンドでインストールする。
$ npm install -g gatsby-cli
インストール時に躓いたエラー①
インストール後、
$ gatsby -help
を実行するとエラーが発生した。
Node.jsのバージョンを変更して対処した。
インストール時に躓いたエラー②
Vagrantを使っている場合、ローカルとフォルダを共有して使うことが多いと思うが、ローカルと共有しているフォルダでnpm installをするとエラーが起きることが多いようである。
参考： Reactアプリ（または React×TypeScriptアプリ）を作る方法メモ - エンジニアを目指す日常ブログ
ローカルと共有しているworkspaceフォルダの外で作業を実施したら問題なかった。
共有できないのは不便だが、以下のVSCode機能を使うと不便さはある程度解消できる。 tomiko0404.hatenablog.com
参考
Vagrantfileに以下のように記載するとフォルダを共有できる。
config.vm.synced_folder "./workspace", "/home/vagrant/workspace"
プロジェクトの作成
以下のコマンドを実行し、スターターキット（テンプレート）からプロジェクトを作成する。
$ npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog
スターターキットはGatsby Starters: Library | Gatsbyから選ぶことができる。
今回はgatsby-starter-blogというスターターキットを利用した。 www.gatsbyjs.com
プロジェクト作成時に躓いたエラー
プロジェクト作成時にメモリ不足エラーが発生。 Vagrantの設定値を変更して対処。 tomiko0404.hatenablog.com
試しに起動してみる
以下のコマンドを実行する。
$ gatsby develop --host=0.0.0.0
Vagrantなどの仮想マシンを利用していない場合は単純にgatsby developで良いそうだが、Vagrantの場合は--host=0.0.0.0のオプションが必要らしい。
参考： Part 1: Create and Deploy Your First Gatsby Site | Gatsby
0.0.0.0はホスト全体をさすそうだが、なぜこのオプションが必要なのかは勉強不足でよくわかりません。
127.0.0.1とlocalhostと0.0.0.0の違い - Qiita
※なぜかgatsby developコマンドで実行し、ブラウザでlocalhost:8001を開くとサイトが表示される不思議もあり。
試しにアクセスしてみる
以下のようなメッセージが出てくるので、
You can now view gatsby-starter-blog in the browser. ⠀ Local: http://localhost:8000/ On Your Network: http://XX.XX.XX.XX:8000/ ⠀ View GraphiQL, an in-browser IDE, to explore your site's data and schema ⠀ Local: http://localhost:8000/___graphql On Your Network: http:/XX.XX.XX.XX:8000/___graphql ⠀ Note that the development build is not optimized. To create a production build, use gatsby build
※On Your Networkの内容は伏字にした。
ブラウザでlocalhost:8000にアクセスするとブログが表示される。
実行停止する
ここでは単に、通常のReactでいうnpm startした状態のようで、ctrl+cで実行を停止すればサイトも表示できなくなる。
記事を編集してみる
再び$ gatsby develop --host=0.0.0.0を実行し、content/blog/hello-world/index.mdを書き換えてみる。
gatsby-developでは開発用にホットリロードが有効になっている。
おわりに
インストールを乗り越えた。 今後は少し中身を編集してみて、仕組みを勉強する。
