Gatsby.jsをDocker立ち上げて、Apacheで動かしてみた件

Gatsby.jsには本番用にbuildしたファイルを確認する確認用サーバを立ち上げるコマンドもあるので、開発段階ではわざわざApacheを使う必要はないのですが、Apacheで動かしたくてやってみたらわりとサクッといけてしまって、調子乗って開発もDockerでやろうとしたら激ハマりしたので備忘録です。

※ gatsbyjs/gatsby-dockerとかaripalo/gatsby-dockerとかは上手くいかなかったです。。。。

一応コードはGithubに置いておきます。

node_modulesが使えないって怒れる

npm run develop -- --host 0.0.0.0でエラー発生
Error: 'darwin-x64' binaries cannot be used on the 'linuxmusl-x64' platform. P lease remove the 'node_modules/sharp/vendor' directory and run 'npm install'.

Error in "/app/node_modules/gatsby-transformer-sharp/gatsby-node.js": 'darwin-x64' binaries cannot be used on the 'linuxmusl-x64' platform. Please remove the 'node_modules/sharp/vendor' directory and run 'npm install'.

Error: 'darwin-x64' binaries cannot be used on the 'linuxmusl-x64' platform. P  lease remove the 'node_modules/sharp/vendor' directory and run 'npm install'.
  
  - libvips.js:68 Object.hasVendoredLibvips
    [app]/[sharp]/lib/libvips.js:68:13
  
  - constructor.js:7 Object.<anonymous>
    [app]/[sharp]/lib/constructor.js:7:22
  
  - v8-compile-cache.js:178 Module._compile
    [app]/[v8-compile-cache]/v8-compile-cache.js:178:30
  
  - loader.js:1220 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1220:10
  
  - loader.js:1049 Module.load
    internal/modules/cjs/loader.js:1049:32
  
  - loader.js:937 Function.Module._load
    internal/modules/cjs/loader.js:937:14
  
  - loader.js:1089 Module.require
    internal/modules/cjs/loader.js:1089:19
  
  - v8-compile-cache.js:159 require
    [app]/[v8-compile-cache]/v8-compile-cache.js:159:20
  
  - index.js:3 Object.<anonymous>
    [app]/[sharp]/lib/index.js:3:15
  
  - v8-compile-cache.js:178 Module._compile
    [app]/[v8-compile-cache]/v8-compile-cache.js:178:30
  
  - loader.js:1220 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1220:10
  
  - loader.js:1049 Module.load
    internal/modules/cjs/loader.js:1049:32
  
  - loader.js:937 Function.Module._load
    internal/modules/cjs/loader.js:937:14
  
  - loader.js:1089 Module.require
    internal/modules/cjs/loader.js:1089:19
  
  - v8-compile-cache.js:159 require
    [app]/[v8-compile-cache]/v8-compile-cache.js:159:20
  
  - safe-sharp.js:127 Object.<anonymous>
    [app]/[gatsby-plugin-sharp]/safe-sharp.js:127:11
  

not finished load plugins - 0.758s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-default@0.1.0 develop: `gatsby develop "--host" "0.0.0.0"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the gatsby-starter-default@0.1.0 develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-06-10T05_34_45_971Z-debug.log

原因： LambdaでSharpを使用するときにエラーが発生する

解決方法： Lambda用を使う

ドキュメントに普通に対処方法が書いてありました。

Dockerfile

# 変更
# FROM node:alpine
FROM lambci/lambda:build-nodejs12.x
EXPOSE 8000

WORKDIR /app
COPY app/ $WORKDIR
RUN npm cache clean --force && \
    npm install

# 追加
RUN rm -rf node_modules/sharp
RUN npm install --arch=x64 --platform=linux --target=10.15.0 sharp

CMD ["npm", "run", "develop", "--", "--host", "0.0.0.0" ]

Gatsbyなんて知らないよって怒られる

> gatsby-starter-default@0.1.0 develop /app
> gatsby develop "--host" "0.0.0.0"

sh: gatsby: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! gatsby-starter-default@0.1.0 develop: `gatsby develop "--host" "0.0.0.0"`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the gatsby-starter-default@0.1.0 develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-06-10T13_29_48_570Z-debug.log

##原因： 何も考えずにホスト側のnode_modulesをDockerコンテナにマウントしていた
Gatsby云々ではなくnode_modulesの理解度の問題でした

解決方法： ホスト側のnode_modulesとDockerコンテナを同期しない

こっちの方の方が何をしているか分かりやすいですが、こっちの方の方が簡潔（個人的感想）なので、自分は後者にしました。

docker-compose.yml

version: '3'

# 追加
volumes:
  node_modules:

services:
  dev:
    build: .
    tty: true
    restart: always
    volumes:
      - ./app:/app
  
      # 追加
      - node_modules:/app/node_modules
    
    ports:
      - "3000:8000"

Apache

便利なプラグインがあったので使用。

AndreasFaust/gatsby-plugin-htaccess

buildするとpublicディレクトリが作成されるのでまるっとApacheのドキュメントルート直下にマウント

ちゃんとconf追加した方が良いですが、動作確認程度ならいいかなと。。。

docker-compose.yml

version: '3'
services:
  prod-apache:
    image: httpd:alpine
    volumes:
        - ./app/public:/usr/local/apache2/htdocs
    ports:
      - "8080:80"

TODO

・Nginxでもやりたい