CODEWITHSUNDEEP
reactjsdockerdeployment
Can Kurucu
Can Kurucu

Reputation: 75

How to deploy React (NextJS) project with docker?

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.

Upvotes: 0

Views: 3781

Answers (2)

David Maze
David Maze

Reputation: 159810

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.

Upvotes: 2

Muhammad Ali
Muhammad Ali

Reputation: 369

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" ]

Upvotes: 4

Related Questions