Update images in docker hub about gatsby-docker

[shicholas]

nice, thanks @ekeih fwiw here's my Dockerfile using Nginx.

ARG GATSBY_ACTIVE_ENV=production


FROM node:12-buster AS build

RUN yarn global add gatsby-cli
ARG GATSBY_ACTIVE_ENV
ENV GATSBY_ACTIVE_ENV=$GATSBY_ACTIVE_ENV

WORKDIR /app
ADD . ./
RUN yarn install
RUN gatsby build
RUN ls -la **/*

FROM nginx
COPY --from=build /app/public /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

and my nginx.conf

worker_processes    1;
user                nginx;

error_log /var/log/nginx/error.log warn;
pid       /var/run/nginx.pid;

events {
  worker_connections 1024;
}

http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;

  log_format  main '$remote_addr - $remote_user [$time_local] "$request" '
                   '$status $body_bytes_sent "$http_referer" '
                   '"$http_user_agent" "$http_x_forwarded_for"';

  keepalive_timeout  15;
  autoindex          off;
  server_tokens      off;
  port_in_redirect   off;
  sendfile           on;
  tcp_nopush         on;
  tcp_nodelay        on;

  client_max_body_size        64k;
  client_header_buffer_size   16k;
  large_client_header_buffers 4 16k;

  gzip             on;
  gzip_vary        on;
  gzip_proxied     any;
  gzip_types       application/javascript application/x-javascript application/rss+xml text/javascript text/css image/svg+xml;
  gzip_buffers     16 8k;
  gzip_comp_level  6;

  access_log         /var/log/nginx/access.log main;

  server {
    listen 80;
    server_name  neonlaw.com  www.neonlaw.com;

    autoindex off;
    charset utf-8;
    error_page 404 /usr/share/nginx/html/404.html;

    location / {
      if ($http_x_forwarded_proto = "http") {
        return 301 https://$server_name$request_uri;
      }

      root /usr/share/nginx/html;
      index index.html indx.htm;
    }

    location ~* \.(html)$ {
      if ($http_x_forwarded_proto = "http") {
        return 301 https://$server_name$request_uri;
      }

      root /usr/share/nginx/html;
      add_header Cache-Control "no-store";
      expires    off;
    }

    location ~* \.(ico|jpg|jpeg|png|gif|svg|js|jsx|css|less|swf|eot|ttf|otf|woff|woff2|json)$ {
      if ($http_x_forwarded_proto = "http") {
        return 301 https://$server_name$request_uri;
      }

      root /usr/share/nginx/html;
      add_header Cache-Control "public";
      expires +1y;
    }

  }
}

You'll want to change the server_name instruction above. I have this setup to be like this repo and also redirect HTTP requests to HTTPS based on the X_FORWARDED_PROTO HTTP Header passed in from a load balancer (in my case GCP's Load Balancer).

[ekeih]

In case anyone comes here looking for a solution. I wrote a short blog post about mine: https://fotoallerlei.com/blog/post/2020/dockerizing-a-gatsby-site/post

In case the post is offline in the future, the Dockerfile looks like this:

FROM node:13-buster-slim as build

WORKDIR /app
RUN yarn global add gatsby-cli && gatsby telemetry --disable
ADD package.json yarn.lock ./
RUN yarn --production --frozen-lockfile --non-interactive

ADD . ./
RUN gatsby build


FROM abiosoft/caddy:1.0.3-no-stats
RUN echo 'tls off' >> /etc/Caddyfile
COPY --from=build /app/public /srv

The second build stage can be replaced with nginx to be more similar to the original solution of this repo here.

[rondondaniel]

Hello @ekeih excellent contribution! I read your post, and implementing as it is, it works perfect.
to run it after build ->
docker run --rm -p 2015:2015 "your image name here"
Thanks a lot

[daydream05]

@shicholas thanks! I was able to fix it by removing that last location directive. Turns out .json is included on that.

[ekeih]

When I tested it a few weeks ago, it seemed both tags, latest and onbuild, include the nginx container. So the onbuild step from the Readme fails because this tag doesn't include Gatsby at all.

[KevinBurton]

In case anyone comes here looking for a solution. I wrote a short blog post about mine: https://fotoallerlei.com/blog/post/2020/dockerizing-a-gatsby-site/post

In case the post is offline in the future, the Dockerfile looks like this:

FROM node:13-buster-slim as build

WORKDIR /app
RUN yarn global add gatsby-cli && gatsby telemetry --disable
ADD package.json yarn.lock ./
RUN yarn --production --frozen-lockfile --non-interactive

ADD . ./
RUN gatsby build


FROM abiosoft/caddy:1.0.3-no-stats
RUN echo 'tls off' >> /etc/Caddyfile
COPY --from=build /app/public /srv

The second build stage can be replaced with nginx to be more similar to the original solution of this repo here.

I still get this warning
[2/4] Fetching packages...
warning [email protected]: Invalid bin field for "url-loader".

It still failes with:

COPY failed: stat /var/lib/docker/tmp/docker-builder102637302/nginx.conf: no such file or directory
error Command failed with exit code 1.
i

[daydream05]

@shicholas hi, how do you set the cache-control for page-data.json to "public, max-age=0, must-revalidate" with that nginx setup?

[shicholas]

@daydream05 you could add the string "public, max-age-0, must-revalidate" to this line https://github.com/NeonLaw/codebase/blob/development/docker/production.nginx.conf#L73