Update: Alpine made a couple changes that affect this post, and a helpful comment below will clear up the issue(s) caused from that. Thanks Jonathan! I've also fixed the example code.
Update #2: It seems that Hot Module Reloading is currently borked with this in Windows. I'll post an update if/when that is fixed!
Update #3: If you're still experiencing issues, another comment below might get you back on track: HERE
Docker is Fantastic
I'm probably late to the party on this one, but I recently started using Docker as a part of my development workflow. I absolutely love it, and I feel that all developers should at least tinker with a basic tutorial somewhere. Trust me, it's a rabbit hole worth exploring!
But... There Was a Minor Hitch
While going through a some of my recent Gatsby and NextJS projects this week to "Dockerize" them, I noticed that there didn't seem to be much information readily available for making that happen.
Gatsby does offer a Docker setup within their repo (based on alpine:edge), but to be blunt: it seemed needlessly complicated and vague, and I could not make it work for my purposes. (I think it's only meant to serve a site, post-build.)
So, I decided to figure out how to create a custom one from an official node:alpine (latest) image... just something to use for a quick dev environment setup regardless of which computer I'm using. (If I wanted to deploy somewhere other than Netlify, I could quickly add an Nginx image/service and a super basic conf file.)
Problem Solved!
After hours of learning, research, and experimenting (and possibly some frustration), I present you with my version of a working Dockerfile! It will create a fully functional Docker image that installs all the required packages in Apline Linux (latest) for building Gatsby (and NextJS) sites and apps.
(Note: For NextJS sites, I simply change the final CMD and the port(s) to whatever I'm using for the site/app... usually 8080.)
Dockerfile.dev
FROM node:alpine
# Also exposing VSCode debug ports
EXPOSE 8000 9929 9230
RUN \
apk add --no-cache python make g++ && \
apk add vips-dev fftw-dev --update-cache \
--repository http://dl-3.alpinelinux.org/alpine/edge/community \
--repository http://dl-3.alpinelinux.org/alpine/edge/main \
&& rm -fR /var/cache/apk/*
RUN npm install -g gatsby-cli
WORKDIR /app
COPY ./package.json .
RUN yarn install && yarn cache clean
COPY . .
CMD ["yarn", "develop", "-H", "0.0.0.0" ]
docker-compose.yml
(Note the setting of GATSBY_WEBPACK_PUBLICPATH - this seemed to fix any HMR issues I was having when editing code.)
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=/
You'll probably want to throw a .dockerignore file into the project directory too, to ignore things like ./node_modules, ./cache, ./public, any .DS_Store files, etc. (Much like a .gitignore file.)
To run it, from the project's root directory run:
$ docker-compose up --build
After running that, I'm ready to work... whether I'm on my Macbook Pro or on my Windows desktop. Hopefully this helps you too!
Top comments (24)
Just a note for anyone else that reads this and runs into this error:
This is because alpine recently moved the vips-dev package from
edge/testingtoedge/community. See this issue for some context on thesharprepo: github.com/lovell/sharp/issues/1733To fix it, just change the repo URL in the post above from:
http://dl-3.alpinelinux.org/alpine/edge/testingtohttp://dl-3.alpinelinux.org/alpine/edge/community.Also, I had to change the
--no-cachein the second apk command to--update-cacheas is suggested in one of the referenced PRs off the above issue. So, your full dockerRUNcommand for APK installs would look like this (formatting changed):Hope that helps someone else. It had me stuck for a while. :-P
In addition, yarn fails for me with the latest node (for alpine or otherwise). So, I also had to change the
FROMline to fix it to the latest v8. E.g.,This doesn't work anymore. Also don't use edge, always pin down a stable version.
See more here: gitlab.alpinelinux.org/alpine/apor...
Change to version 3.10.
FYI: At the time of writing, Edge was the only option for this... and I really don't have time to keep this updated. Thanks for the heads up, I'll make another note at the top!
Here does not Work! Need to change python to python3. E.g.:
Awesome! Thanks for your super helpful comment, Jonathan! I'll be sure to make a note in the original post to see your comment.
Thanks for this :D
Very nice, thanks for putting this together, Daniel! One thing I really do encourage you is to define a
USER, see also Node/Docker best practices and for the background canihaznonprivilegedcontainers.info.Hi Michael, thanks for the comment!
Would this actually be necessary for use in a local development setup like this? This is definitely not being used for production, by any stretch of imagination.
Not working for me
Hey Konstantin!
Thanks for the message. It looks like they are now including Yarn with the lastest versions of Alpine:Node, and it's throwing an error trying to re-install it. I'll get it corrected in just a moment or two. 💜
Thank you
How you resolve this error?
How you resolve this error?
Thanks for sharing.
I have tried in ubuntu host and encountered this error.
It's hard to say, but it looks like you may not have the
gatsby-transformer-remarkplugin installed and configured?Sidenote, possibly relevant: If you add any new packages to your app, you will need to rebuild your image using
docker-compose build(ordocker-compose up --build)Thanks for your reply. It is weired. There is no problem when I run
docker-compose upin alpine linux host on VPS. Thanks anyway!Hi, Here the configuration that worked for me.
Then "serve" in package.json goes like this .
Hey Ernesto et all thanks for sharing,
When trying to run this i get stuck with the following error
"Recreating frontend_web_1 ... done
Attaching to frontend_web_1
web_1 | 2020-11-14T02:58:15: PM2 log: Launching in no daemon mode
web_1 | 2020-11-14T02:58:15: PM2 log: App [npm:0] starting in -fork mode-
web_1 | 2020-11-14T02:58:15: PM2 log: App [npm:0] online
web_1 | Usage: npm
web_1 | where is one of:"
that repeats itself until i get
"web_1 | 2020-11-14T02:58:24: PM2 log: App [npm:0] exited with code [1] via signal [SIGINT]
web_1 | 2020-11-14T02:58:24: PM2 log: Script /usr/local/bin/npm had too many unstable restarts (16). Stopped. "errored"
web_1 | 2020-11-14T02:58:25: PM2 log: 0 application online, retry = 3
web_1 | 2020-11-14T02:58:27: PM2 log: 0 application online, retry = 2
web_1 | 2020-11-14T02:58:29: PM2 log: 0 application online, retry = 1
web_1 | 2020-11-14T02:58:31: PM2 log: 0 application online, retry = 0
web_1 | 2020-11-14T02:58:31: PM2 log: Stopping app:npm id:0
web_1 | 2020-11-14T02:58:31: PM2 error: app=npm id=0 does not have a pid
web_1 | 2020-11-14T02:58:31: PM2 log: PM2 successfully stopped"
Any ideas?
Many thanks
Hi Daniel!
Thanks for sharing!
I just copy-pasted all two files , run docker-compose -up build
and got the error:
Step 6/9 : COPY ./package.json .
ERROR: Service 'web' failed to build: COPY failed: stat /var/snap/docker/common/var-lib-docker/tmp/docker-builder603792599/package.json: no such file or directory
After this message installation stopped.
May be you have an idea how to fix?
Based on that error, it looks like there was no
package.jsonfile found.Do you have the
Dockerfileanddocker-compose.ymlfiles in the root of your Gatsby project directory?Great post, thanks.
What's the command to run it?
No prob, Nick! Yeah, the code highlighting on this site isn't very visible, I know... you'll want to run:
docker-compose up(from your project's root directory) :)So can i use vscode to code in gatsby without installing gastby globally on my local machine?
How will you setup your docker for production deployment with continuous build when the user add new post in wordpress ?