08.02.2019 в 07:24

Моя настройка докера для GatsbyJS (и NextJS)

Фантастический Docker

Вероятно, я опоздал на вечеринку по этому поводу, но недавно я начал использовать Docker как часть моего рабочего процесса разработки. Мне это очень нравится, и я чувствую, что все разработчики должны по крайней мере ознакомится с базовым руководством. Поверьте мне, это кроличья нора, которую стоит изучить!

Но ... была небольшая заминка

Проходя через несколько моих недавних проектов Gatsby и NextJS на этой неделе, чтобы «докеризовать» их, я заметил, что есть не так много информации, доступной для этого.

GatsbyJS предлагает установку Docker в своем репозитории (основанную на alpine: edge), но, скажем прямо, это казалось излишне сложным и расплывчатым, и я не мог заставить его работать в моих целях. (Я думаю, что это только для обслуживания сайта, после сборки.)

Итак, я решил выяснить, как создать пользовательский контейнер из официального узла: образ Apline Linux... просто что-то, что можно использовать для быстрой настройки среды разработки независимо от того, какой компьютер я использую. (Если бы я захотел развернуть что-то кроме Netlify, я мог бы быстро добавить образ/сервис Nginx и супер базовый файл конфигурации.)

Задача решена!

После нескольких часов обучения, исследований и экспериментов (и, возможно, некоторого разочарования) я представляю вам свою версию работающего Dockerfile! Он создаст полнофункциональный образ Docker, который установит все необходимые пакеты в Apline Linux (последней версии) для создания сайтов и приложений Gatsby (и NextJS).

(Примечание: для сайтов NextJS я просто изменяю финальный CMD и порт (ы) на то, что я использую для сайта / приложения ... обычно 8080.)

Dockerfile

FROM node:alpine

# Также выставляем порты отладки VSCode
EXPOSE 8000 9929 9230
RUN \
 apk add --no-cache python make g++ && \
 apk add vips-dev fftw-dev --no-cache --repository http://dl-3.alpinelinux.org/alpine/edge/testing --repository http://dl-3.alpinelinux.org/alpine/edge/main && \
 rm -fR /var/cache/apk/*

RUN npm install -g gatsby-cli yarn

WORKDIR /app
COPY ./package.json .
RUN yarn install && yarn cache clean
COPY . .
CMD ["gatsby", "develop", "-H", "0.0.0.0" ]

docker-compose.yml

Обратите внимание на настройку GATSBY_WEBPACK_PUBLICPATH - похоже, это исправило любые проблемы с HMR, которые возникали у меня при редактировании кода.

version: '3'
services:
 web:
   build:
     context: .
     dockerfile: Dockerfile.dev
   ports:
     - "8000:8000"
     - "9929:9929"
     - "9230:9230"
   volumes:
     - /app/node_modules
     - .:/app
   environment:
     - NODE_ENV=development
     - GATSBY_WEBPACK_PUBLICPATH=/

Вы, вероятно, захотите добавить файл .dockerignore в каталог проекта, чтобы игнорировать такие вещи, как ./node_modules, ./cache, ./public, любые файлы .DS_Store и т.д. (Очень похоже на файл .gitignore.)

Так что теперь я могу просто запустить docker-compose из каталога моего проекта, и я готов работать ... на моем Macbook Pro или на рабочем столе Windows. Надеюсь, это вам тоже поможет!

568