サイトレシピ(1) 開発環境構築

May 27, 2020

linux gatsby 

Alpine Linux上にdocker-composeにより、Gatsbyの開発環境をインストールします。 githubへのアクセスは確立済みとし、dockerおよびdocker-composeは導入済みと仮定します。

ディレクトリ構成

gatsby_working
├── docker-compose.yml
├── Dockerfile
└── app

gatsby_working/app 内に開発環境一式が展開されます。

Gatsbyには、StarterとよばれるGatsbyサイトの初期テンプレートが多数用意されています。 数あるStarterの中から好みのものを選び、それをカスタマイズして自分のサイトを構築していくのが、基本的なサイト構築の流れです。 当サイトは、gatsby-starter-blogというStarterを使用しました。

まずは、作業ディレクトリを作成し、そこに、githubからgatsby-starter-blogを取得します。

$ mkdir ~/gatsby_working
$ cd ~/gatsby_working
$ git clone https://github.com/gatsbyjs/gatsby-starter-blog.git 
$ mv gatsby-starter-blog app

取得した、appディレクトリがサイトの初期状態となります。

docker-compose.yml, Dockerfile, .dockerignoreを以下の内容で作成します。

docker-compose.ymlのポート番号を適宜書き換えて、

gatsby_working/docker-compose.yml
version: '3'
services:
  gatsby:
    build: .
    volumes:
      - /usr/src/app/node_modules
      - ./app:/usr/src/app
    ports:
      - "8000:8000"
    tty: true
    restart: always

Dockerfileはこのままでいけるでしょう。

gatsby_working/Dockerfile
FROM node:15.3.0-alpine3.10
WORKDIR /usr/src/app
EXPOSE 8000
RUN apk update && \
    apk --update add git python2 make g++ vips-dev fftw-dev --no-cache && \
    rm -fR /var/cache/apk/* && \
    npm install -g gatsby-cli

COPY ./app .
RUN npm install
CMD ["gatsby", "develop", "--host", "0.0.0.0" ]
gatsby_working/.dockerignore
node_modules

以上が揃ったら、

$ cd ~/gatsby_working
$ docker-compose up -d --build

以上でgatsby-starter-blogによるサイト構築が完了。 構築時のログを確認する。

$ cd ~/gatsby_working
$ docker-compose logs gatsby

動作確認

http://ホスト名:8000/

Written by questions6768 who lives in Uji, Kyoto.