【Gatsby.js】Docker ComposeでGatsby.jsの環境を構築してみた
はじめに
こんにちは、がんがんです。皆さん、いかがお過ごしですか。
私の方は帰鹿してからずっと在宅作業を行っており、そろそろメリハリや環境の増強を今まで以上に真剣に行っていかなければならないと思っているところです。
そろそろ自宅のSwitchさんを真剣に稼働させていく時期なのかもしれません(DL版であつ森買いたい感ある)。
さて、そんな私ですが所属する学生団体ではどちらかとR&D的なことをメインで行っております。
今回からWordpressのリプレイス検討として、Gatsby.js + Wordpressについて調査を行っていこうと思います。
目的
なぜGatsby.jsなのか
Gatsby.jsはReact.jsをベースに構築され、GraphQLを活用したSSG(静的サイトジェネレータ)です。公式サイトはこちらです。
www.gatsbyjs.org
Gatsbyを使用しようと思った理由は大きく以下の2つです。
1. React.jsをペースにしている 2. Wordpressとの連携を想定したスターターが用意されているから
1つ目にReact.jsをベースにしていることです。普段React.js / Next.jsを触れる機会が多いので、
現在の知見を活かすことができ、なおかつReact.jsのレベルが上げられることを踏まえてGatsby.jsを使いたいと思いました。
2つ目にWordpressとの連携が容易なことです。
Wordpressの管理画面は非常に優秀なので、あれを再度構築するのは非常に大変です。そのため、管理画面が優秀なWordpressとの連携用スターターが用意されていることも検討材料の1つです。
www.gatsbyjs.org
環境構築
いつものごとくDockerfile、docker-compose.ymlを用意していきます。
nodeのバージョンは公式のTutorialに合わせてnode:10を使っています。
また、alpineだときちんと実行しなかったので今回は普通のバージョンを使っておきます(後ほどalpineで確認します)。
| Dockerfile |
FROM node:10.19.0
WORKDIR /usr/src
RUN npm i -g npm \
&& npm i -g gatsby-cli \
&& rm -rf /var/lib/apt/lists/*
| docker-compose.yml |
version: '3'
services:
app:
build: .
image: poc/gatsby-wordpress:dev
ports:
- 8000:8000
volumes:
- .:/usr/src
tty: true
stdin_open: true
command: /bin/sh
公式に沿ってHello Worldを行う
公式のチュートリアルに沿ってHello Worldを行います。
www.gatsbyjs.org
# gatsby --version ╔════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ Gatsby collects anonymous usage analytics ║ ║ to help improve Gatsby for all users. ║ ║ ║ ║ If you'd like to opt-out, you can use `gatsby telemetry --disable` ║ ║ To learn more, checkout https://gatsby.dev/telemetry ║ ║ ║ ╚════════════════════════════════════════════════════════════════════════╝ Gatsby CLI version: 2.11.11
次に、Hello Worldを実行します。Gitのインストールを忘れずにいきたい(alpineではじめ死んだ)。インストール時の質問はyarn or npmの選択程度でした。
# gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
インストールが完了したら実際に実行してみます。
# cd hello-world # yarn develop (# gastby develop)
実行結果はこんな感じです。
Docker使用時の注意点
公式にも書かれていますが、DockerやVMで使用するためには--host=0.0.0.0を付ける必要があるようです。
www.gatsbyjs.org
