Deploy docusaurus with docker and nginx

Takes me sometime to deploy docusaurus 1 with docker, so I think this post might help.

Donald Le

Dec 1, 2020·2 min read

Dockerfile

FROM node:12-alpine as builder

WORKDIR /app/website
COPY . /app/website
RUN apk add autoconf libtool automake
#RUN apk add libtool
#RUN apk add automake
RUN apk --update add gcc make g++ zlib-dev
#RUN npm install
RUN yarn
#EXPOSE 3000
RUN yarn build
#CMD ["yarn", "start"]

## production environment
FROM nginx:1.16.0-alpine
COPY --from=builder ./app/website/nginx.conf /etc/nginx/
COPY --from=builder /app/website/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {

      listen 80;

      location / {
        root   /usr/share/nginx/html/{project_name};
        index intro.html;
        include  /etc/nginx/mime.types;
        try_files $uri $uri/ /intro.html;
      }

      error_page   500 502 503 504  /50x.html;

      location = /50x.html {
        root   /usr/share/nginx/html;
      }

      }

}

Build the docker image to registry

docker build -t {registry_domain}/{project_name}:{tag_version} .

Push the image to docker registry

docker push {registry_domain}/{project_name}:{tag_version}

Notes

When building the project with yarn build, I have this error:

Check the top-level render call using <ul>. See https://fb.me/react-warning-keys for more information.
    in li
    in SideNav
    in div
    in BlogSidebar
    in div
    in div
    in body
    in html
    in Site
    in BlogPostLayout

After a while, I found out that this error happens because of my blog folders, which exist but do not have navigation from the home page.

Hope it helps

~~PEACE~~