How to deploy React (NextJS) project with docker?

Question

I'm going to deploy my project with a docker. but I'm not sure what folders to put in the docker. These are my folders;

.next
actions
api
components
constants
helpers
node_modules
pages
reducers
static
stores
.gitignore
next.config.js
package-lock.json
package.json
README.md
routes.js
server.js

Which of the above folders and files should I put into the docker? And how should I have a block of blocks in package.json? My script file is currently;

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }

I'm currently doing a deployment with "npm run build && npm run start", but every page is recompiled, which seems to be a loss of performance.

Add a .dockerignore: node_modules

Muhammad Ali
– Muhammad Ali

2019-05-21 07:54:33 +00:00
Commented May 21, 2019 at 7:54 — Muhammad Ali
– Muhammad Ali, Commented May 21, 2019 at 7:54

Muhammad Ali · Accepted Answer · 2019-05-21 08:03:53Z

4

First create dockerignore file Add a.dockerignore

node_modules
.next
npm-debug.log

dockerfile content

FROM node:alpine
    # Create app directory
    RUN mkdir -p /usr/src/app
    WORKDIR /usr/src/app
    # Install app dependencies
    COPY package.json /usr/src/app/
    RUN npm install
    # Bundle app source
    COPY . /usr/src/app
    RUN npm run build
    EXPOSE 3000
    CMD [ "npm", "start" ]

answered May 21, 2019 at 8:03

Muhammad Ali

3697 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Maze · Accepted Answer · 2019-05-21 10:43:41Z

Browser-based applications are a little orthogonal to Docker's containerization system. In typical production use you'd use a tool like Webpack to compile your application down to static files. Then nothing locally actually runs your application code; instead, an HTTP server like Nginx will serve up the compiled artifacts to browsers without any knowledge of what they are.

To the extent that Docker comes into the picture at all, you might mount a directory like dist that contains the compiled artifacts into a plain Web server container:

npm install
npm run build
sudo docker run -v $PWD/dist:/usr/share/nginx/html -p 8080:80 nginx

Since the compiled code runs in the browser and not in Docker, it can't take advantage of things like inter-container DNS (the browser has no idea Docker exists and has to talk to externally visible hostnames). And since you're ultimately producing a standalone compiled artifact, you're not really getting any benefit from running the toolchain in Docker. During development I'd just npm run start on the host, and not involve Docker at all.

Collectives™ on Stack Overflow

How to deploy React (NextJS) project with docker?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related