CODEWITHSUNDEEP
dockernginxdocker-composegatsby
Peteris
Peteris

Reputation: 3756

Nginx server not running with Gatsbyjs default Docker image

I have a working gatsbyjs project that doesn't run from the official Docker image.

This is the Dockerfile:

FROM gatsbyjs/gatsby:latest
ADD public/ /pub

(the compiled website is at public/ and I've confirmed the index.html renders the website correctly)

I also tried the official Dockerfile, which didn't work:

FROM gatsbyjs/gatsby:onbuild

I'm running this from docker-compose as follows:

version: '3'

services:
  website:
    build: .
    ports:
      - "80:80"

Nginx returns a "500 Internal Server Error".

I'm following the official tutorial here.

Upvotes: 2

Views: 1623

Answers (1)

lvthillo
lvthillo

Reputation: 30743

It seems like the onbuild image isn't rebuilt when the latest image is updated, which causes docker to pull an outdated version of the base image. You can better ignore the onbuild image and take the latest. Here you can find the details.

To test if the latest image works.

First I tried to run a container from the image:

$ docker run -d -p 80:80 gatsbyjs/gatsby:latest

This works. Nginx is running here.

$ curl localhost
<html>
<head><title>404 Not Found</title></head>
<body bgcolor="white">
<center><h1>404 Not Found</h1></center>
<hr><center>nginx</center>

Delete the container.

I'll install gatsby globally

$ npm install --global gatsby-cli

Now I cloned a basic gatsbyjs site from here.

$ git clone https://github.com/gatsbyjs/gatsby-starter-hello-world.git
$ cd gatsby-starter-hello-world\

I'll build the site (as desribed in your doc). $ npm install $ gatsby build

Now I've a public/ repository. This is what the image with the :onbuild tag expects.

LICENSE  README.md  node_modules/  package-lock.json  package.json  public/  src/

Now I can write my Dockerfile in the git repo. i'll use the latest tag (not onbuild) which means I have to write my own COPY or ADD step. It contains:

FROM gatsbyjs/gatsby:latest
COPY public/ /pub

I'll build the docker image

$ docker build -t my-site .
Sending build context to Docker daemon  2.791MB
Step 1/2 : FROM gatsbyjs/gatsby:latest
 ---> 21fc487ad83e
Step 2/2 : COPY public/ /pub
 ---> 87f5ea1018ee
Removing intermediate container fd35cace6ef0
Successfully built 87f5ea1018ee
Successfully tagged my-site:latest

And finally I can start a docker container from the image.

$ docker run -d -p 80:80 my-site

Now I can curl my localhost:80

$ curl localhost
$<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><link rel="preload" href="/component---src-pages-index-js-3a9c8c6504e39c44af75.js" as="script"/><link rel="preload" href="/path---index-a0e39f21c11f6a62c5ab.js" as="script"/><link rel="preload" href="/app-fcd7d98e3197e34ce021.js" as="script"/><link rel="preload" href="/commons-eef92a68af65d2662677.js" as="script"/><style id="gatsby-inlined-css"></style></head><body><div id="___gatsby"><div data-reactroot="" data-reactid="1" data-react-checksum="-122217258"><div data-reactid="2">Hello world!</div></div></div><script id="webpack-manifest">/*<![CDATA[*/window.webpackManifest={"231608221292675":"app-fcd7d98e3197e34ce021.js","35783957827783":"component---src-pages-index-js-3a9c8c6504e39c44af75.js","142629428675168":"path---index-a0e39f21c11f6a62c5ab.js"}/*]]>*/</script><script>/*<![CDATA[*/!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var..

Upvotes: 3

Related Questions