<h1 id="h8dd41f636f">gatsby build</h1> 本番環境のサーバで<code>gatsby build</code>したらエラーが出ました。 <pre><code> ERROR

UNHANDLED REJECTION spawn ENOMEM



 Error: spawn ENOMEM

 - child_process.js:358 ChildProcess.spawn
 internal/child_process.js:358:11

 - index.js:204 module.exports
 [project]/[imagemin-pngquant]/[execa]/index.js:204:26

 - index.js:52 input
 [project]/[imagemin-pngquant]/index.js:52:13

 - index.js:71 Function.module.exports.buffer
 [project]/[imagemin]/index.js:71:31

 - process-file.js:198 pipeline.toBuffer.then.sharpBuffer
 [project]/[gatsby-plugin-sharp]/process-file.js:198:105

</code></pre> 調べてみるとメモリが足りないエラーのようです。 画像のサムネイルを生成してるときに止まりやすいみたい。 本番環境はメモリちょっとしかないので、まぁしかたないのかな。 スワップメモリで対応します。 スワップファイルを作成してパーミッションを設定します。 <pre><code># fallocate -l 2G /swap
# chmod 600 /swap</code></pre> スワップスペースにします。 <pre><code># mkswap /swap</code></pre> スワップを有効にします。 <pre><code># swapon /swap</code></pre> これでとりあえず`gatsby build`が通るか確認。 OKなら再起動後もスワップファイルを保持します。 <pre><code># echo "/swap none swap sw 0 0" | tee -a /etc/fstab</code></pre> 以上です。

gatsby buildでメモリが足りないエラー

<h1 id="h22a4067eb8">Gatsbyとは</h1>GatsbyはReactをベースにしていてとにかく爆速なのが売りのようです。基本的なプロジェクトのStarterが用意されていて、機能を追加したいときはPluginを追加していく、という感じです。やりたいことに対してPluginがないときはどうすればいいのでしょうか...。自分で作るのかな？ Reactのみで作成したアプリケーション(SPA)では、SEOの観点から少し難があります。head内のmetaタグを動的に変えるには<a href="https://github.com/nfl/react-helmet" target="_blank" rel="noopener noreferrer">react-helmet</a>を使いますが、JavaScriptが実行される必要があり、ページアクセス時に取得されるHTMLには反映されず、正しくインデックスされるのか疑問です。 Gatsbyでは公開前にbuildし各ページを生成しておくので、その辺もいい感じに対応してくれています。 <h3 id="h3d4c031cb2">Gatsbyのメリット</h3><ul><li>とにかく速い</li><li>外観が100%自由に作成できる</li><li>ブラウザから編集できない</li><li>ReactアプリよりSEOに強い気がする</li></ul> <h3 id="h17d34280d9">Gatsbyのデメリット</h3><ul><li>速すぎる</li><li>フロントエンドの知識がいる気がする</li><li>ビルドの流れがよくわからない</li><li>CLIが使えないとだめ</li></ul> <h1 id="h64aacec53f">Gatsbyを使う</h1> なにはともあれGatsbyを使うには`gatsby`コマンドが必要なので使えるようにします。 <pre><code>[shell]
# npm i -g gatsby-cli</code></pre> <code>-cli</code>をつけないとGatsby本体が来ちゃうので気を付けてください。 ブログのベースは<a href="https://github.com/gatsbyjs/gatsby-starter-blog" target="_blank" rel="noopener noreferrer">gatsby-starter-blog</a>です。 <pre><code>[shell]
// gatsby new [プロジェクト名] [ベースのダウンロード先]
# gatsby new blog-starter https://github.com/gatsbyjs/gatsby-starter-blog</code></pre> <code>blog-starter</code>ディレクトリができるので、移動して<code>develop</code>コマンドでブラウザからアクセスできます。 <pre><code>[shell]
# cd blog-starter
# gatsby develop
// http://localhost:8000</code></pre> もし、ローカルLANからアクセスする場合は以下のオプションをつけます。 <pre><code>[shell]
# gatsby develop -H 192.168.1.2 -p 8000
// http://192.168.1.2:8000</code></pre> <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/83991fdc9fb64088b8b8cd1cbc039ae1/gatsby_how-to-use_blog-starter-sample.png" alt=""> <h2 id="he76eaaf984">プロジェクトディレクトリの構成</h2> プロジェクトディレクトリの構成は以下のような感じになっています。 <pre><code>[text]
├─ content // コンテンツ置き場
│&nbsp;&nbsp; ├─ assets // 画像ファイル
│&nbsp;&nbsp; └─ blog // 記事ファイル
├─ gatsby-browser.js
├─ gatsby-config.js // プロジェクトの設定ファイル
├─ gatsby-node.js // developやbuildの時に実行される
├─ LICENSE
├─ node_modules
├─ package.json
├─ package-lock.json
├─ public
├─ README.md
├─ src // ページ構成のファイル
│&nbsp;&nbsp; ├─ components
│&nbsp;&nbsp; ├─ pages
│&nbsp;&nbsp; ├─ templates
│&nbsp;&nbsp; └─ utils
└─ static
 ├─ favicon.ico
 └─ robots.txt</code></pre> <code>./content/blog</code>以下に置いたファイルが自動的にルーティングされます。 <code>gatsby develop</code>や<code>gatsby build</code>を行うと<code>./src</code>以下のファイルを読み込んで各ページが自動的に生成されます。 <h2 id="h9dcc071ccd">デプロイ</h2> Gatsbyプロジェクトのデプロイ方法はいくつかありますが、ここでは一般的なLinuxサーバで配信する場合の実行方法を紹介します。 デプロイには今回は<a href="http://pm2.keymetrics.io/" target="_blank" rel="noopener noreferrer">pm2</a>を使います。開発サーバとデプロイするサーバが別の場合には<code>gatsby-cli</code>もインストールします。(Nodeアプリをデーモン化する方法は他にも<a href="https://github.com/foreverjs/forever" target="_blank" rel="noopener noreferrer">forever</a>などがあります。) <pre><code>[shell]
# npm i -g pm2</code></pre> プロジェクトディレクトリ内にpm2の設定ファイルを配置します。 <pre><code>[yml:pm2config.yml]
name: blog
script: gatsby serve</code></pre> json形式で<code>.json</code>ファイルにしても構いません。 以上で準備が整いました。 <pre><code>[shell]
# gatsby build
# pm2 start pm2config.yml --name 'blog'</code></pre> これで、デフォルトの設定であれば9000番ポートに公開されます。Webサーバを別で立てている場合はプロキシを通してください。 記事を更新したい時は、<code>content</code>ディレクトリにコピーしてから<code>gatsby build</code>を実行すればOKです。

Gatsbyを使う

<h1 id="h9473f11ee3">WordPressをやめてGatsbyを導入した</h1>相変わらず始めてはやめを繰り返してまた放置していたブログを再開することにしたのはいいけど、再開するにあたってどうにもWordPressを使う気にはなりませんでした。 つまるところブログというのはテキスト編集なのだけど、WordPressはあんまり純粋なテキスト編集に向いていない気がする。リロードの度にいちいち画面が瞬くのも気になる。 一番はWordPressの編集アプリがGutenbergになって初期のころ、編集画面に画面の半分がフォームで隠れるバグがあって満足に記事の投稿ができなくなったのが大きいかも。もちろんGutenbergはベータだったのだけどね。 CMSはWordPressだけじゃないので、他のCMSも試してみたが、PHP系にはちょっと気にいるものはなかったかな。 そのとき見つけたのが<a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">Gatsby</a>で、前にも一度触ったことがあったけど試してみることにした。

GatsbyをWordPressの代わりに使ってみる

<h2 id="hebe98a0e3b">Gatsby開発コマンド</h2>Reactベースの静的サイトジェネレータのGatsbyで通常の開発コマンドでローカルLAN上でアクセスできなかったのでメモ。<pre><code>[shell]
# gatsby develop</code></pre>すると、<code>http://localhost:8000/</code>にてアクセスできるが、ローカルサーバで開発し他のPCからアクセスなどはできない。この場合は以下のコマンドでローカルLAN上に展開できる。<pre><code>[shell]
# gatsby develop -H ローカルIPアドレス -p ポート番号</code></pre> <code>192.168.1.2</code>で開発している場合は以下のようになる。<pre><code>[shell]
# gatsby develop -H 192.168.1.2 -p 8000</code></pre>

ゆったりWeb手帳

気になったことをのんびり書くよ