Deploy Razzle App to Docker with Nginx

[danjiroo]

I am having a hard time deploying my React app built with Razzle to a Docker container, with Nginx. I'm not really a DevOps guy, and only tried exploring things up. I would like to serve the build folder through Nginx.

Dockerfile

FROM node:14.4-alpine as builder

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./
RUN npm install --silent

COPY . /app

ENV NODE_ENV=production
RUN npm run build

# Serve React app from Nginx
FROM nginx:1.21.3-alpine

COPY --from=builder /app/build /usr/share/nginx/html

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

nginx.conf

worker_processes auto;

events {
    worker_connections 8000;
    multi_accept on;
}

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

    server {
        listen  80;
        
        root  /usr/share/nginx/html;

        location ~* \.(?:css|js|map|jpe?g|gif|png)$ { }

        location / { 
            index  index.html index.htm
            try_files $uri $uri/ /index.html?path=$uri&$args;

            # proxy_pass http://localhost:3000/;
            # index  index.html index.htm server.js;
            # try_files $uri $uri/ /server.js?path=$uri&$args;
        }
    }
}

env

RAZZLE_PUBLIC_DIR: "./build/public"

Edit: (Forgot to add the output I got)
Since my nginx.conf is checking for the index.html file which is not in the build folder of my react app, I only got the default home screen of nginx, which shows that the web server is up and running. How can I make it so that it can read the build/server.js compiled by razzle?

Having a tear about this, hoping for some help. Thanks!

[fivethreeo]

You need to run server.js with node and serve public with nginx. Proxy nginx to server.js port.

[fivethreeo]

So two docker containers.

[danjiroo]

Hi, sorry for the late response, I was out of town few days ago.

So, I modified the dockerfile based from your suggestions.

FROM node:14.4-alpine as builder

RUN mkdir /app

WORKDIR /app

COPY ./package.json /app

RUN npm install --silent

COPY . /app

RUN npm run build

# ran the app 
CMD ["npm", "run", "start:prod"]

#  nginx
FROM nginx:1.21.3-alpine

COPY --from=builder /app/build /usr/share/nginx/html/

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

After building the app, run it in the node.
Then still serve the build folder with nginx, should it be the public folder or the whole build folder from razzle build?
/build folder contains the server.js that was bundled by razzle. public only have the static folder, favicon and robot.txt files.

Honestly I was lost checking on the link you have provided. I'm sorry, really don't have great knowledge about deploying yet.

Thanks.

[fivethreeo]

https://github.com/fivethreeo/razzle-with-docker-nginx/blob/master/docker-compose.yml - old example, use for ideas, do not copy ;)

[fivethreeo]

https://github.com/fivethreeo/razzle-with-docker-nginx/blob/master/nginx/basic/default.conf.template#L3

[fivethreeo]

You need two running containers, three if you count build