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

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

※ [gatsbyjs/gatsby-docker](https://github.com/gatsbyjs/gatsby-docker)とか[aripalo/gatsby-docker](https://github.com/aripalo/gatsby-docker)とかは上手くいかなかったです。。。。

[一応コードはGithubに置いておきます。](https://github.com/the1031hiroto/docker_gatsby)

# `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用を使う 
[ドキュメントに普通に対処方法が書いてありました。](https://github.com/lovell/sharp/blob/master/docs/install.md#aws-lambda)

```Dockerfile: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コンテナを同期しない
[こっちの方](https://www.creationline.com/lab/29422)の方が何をしているか分かりやすいですが、[こっちの方](https://qiita.com/suin/items/e53eee56da23d476addc)の方が簡潔（個人的感想）なので、自分は後者にしました。

```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](https://github.com/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でもやりたい