Synchronize Docker volumes

Question

Synchronize Docker volumes

Hey there! I've been trying to dive into learning Docker, but I'm having trouble syncing the host and container using volumes when making changes and saving code (specifically using npm run dev). Every time I need to restart docker-compose up --build for the "sync" to take effect, but even then any changes don't update the folder or code. Here's an example of my setup:

I installed Next.js with typescript as the base.

npx create-next-app@latest --ts

Here's my docker-compose config:

version: "3"
services:
  node-myname:
    build:
      context: .
      dockerfile: DockerFile.dev
    ports:
      - "3000:3000"
    command: "npm run dev"
    restart: always
    volumes:
      - .:/usr/src/home/node/app/

And here's my DockerFile:

FROM node:16

WORKDIR /home/node/app

COPY . .

RUN npm install

I know it's recommended to use volumes instead of bind mounts...

But unfortunately, I haven't been able to find a workaround yet. Any suggestions would be greatly appreciated!

typescript docker docker-compose next.js dockerfile

Answer 1

Answer №1

After completely reinstalling Docker on Windows (using Revo Uninstaller), the synchronization is now working perfectly. I am able to create a .txt file and see it reflected in the docker exec! However, the hot reload feature using dev was not functioning properly in Docker. The issue was resolved by following a helpful post on StackOverflow: Solution for Docker Hot Reload. This solution required installing something in the next.config.js.

Another observation is that if I copy all the content from the Nextjs host to the Docker container, the sync stops working again. Therefore, I can only copy COPY package.json ./ from the host.

Here is the code snippet from next.config.js:

 /** @type {import('next').NextConfig} */
    const nextConfig = {
      reactStrictMode: true,
      swcMinify: true,
      // add this for hot reload to work on Windows
      webpackDevMiddleware: config => {
        config.watchOptions = {
          poll: 800,
          aggregateTimeout: 300,
        }
        return config
      },
    }
    
    module.exports = nextConfig

And here is the Dockerfile:

FROM node:16

WORKDIR /home/node/app

COPY package.json ./

RUN npm install

Finally, here is the docker-compose configuration:

version: "3"
services:
  node-myname:
    build:
      context: .
      dockerfile: DockerFile.dev
    ports:
      - "3000:3000"
    command: "npm run dev"
    restart: always
    volumes:
      - .:/home/node/app

With these changes, everything now works as intended. Although I'm not sure why, attempting the same approach as before resulted in an error. Nevertheless, everything is functioning correctly now!

Final Code on GitHub

Answer 2

After completely reinstalling Docker on Windows (using Revo Uninstaller), the synchronization is now working perfectly. I am able to create a .txt file and see it reflected in the docker exec! However, the hot reload feature using dev was not functioning properly in Docker. The issue was resolved by following a helpful post on StackOverflow: Solution for Docker Hot Reload. This solution required installing something in the next.config.js.

Another observation is that if I copy all the content from the Nextjs host to the Docker container, the sync stops working again. Therefore, I can only copy COPY package.json ./ from the host.

Here is the code snippet from next.config.js:

 /** @type {import('next').NextConfig} */
    const nextConfig = {
      reactStrictMode: true,
      swcMinify: true,
      // add this for hot reload to work on Windows
      webpackDevMiddleware: config => {
        config.watchOptions = {
          poll: 800,
          aggregateTimeout: 300,
        }
        return config
      },
    }
    
    module.exports = nextConfig

And here is the Dockerfile:

FROM node:16

WORKDIR /home/node/app

COPY package.json ./

RUN npm install

Finally, here is the docker-compose configuration:

version: "3"
services:
  node-myname:
    build:
      context: .
      dockerfile: DockerFile.dev
    ports:
      - "3000:3000"
    command: "npm run dev"
    restart: always
    volumes:
      - .:/home/node/app

With these changes, everything now works as intended. Although I'm not sure why, attempting the same approach as before resulted in an error. Nevertheless, everything is functioning correctly now!

Final Code on GitHub

Answer 3

Answer №2

Perhaps you should consider using the same file path?

    volumes:
      - .:/home/user/project/

UPDATE: Take a look at: https://github.com/uniquegithubuser/stackoverflow.12345678 for detailed instructions on setting up the project.

Answer 4

Perhaps you should consider using the same file path?

    volumes:
      - .:/home/user/project/

UPDATE: Take a look at: https://github.com/uniquegithubuser/stackoverflow.12345678 for detailed instructions on setting up the project.

Synchronize Docker volumes

Answer №1

Answer №2

Similar questions

What could be causing my controller method in TypeScript to throw an error message unexpectedly?

What is the most effective method for comparing two arrays of objects and extracting the differing values within a React application?

Oops! The system encountered a problem: the property 'modalStack' is not recognized on the type 'NgxSmartModalService'. Maybe you meant to use '_modalStack' instead?

Issue: The useHref() function is restricted to usage within a <Router> component. This error occurred within the register.js file

Having trouble with implementing custom checkboxes in a d3 legend?

The counterpart of the RxJS setTimeout operator

Error: Unable to find the definition for Image (Next.js)

Dealing with circular dependencies in NestJS by using ForwardRef

The issue arises when attempting to call a method from the same service within jsPDF in an Angular environment

Are you looking to use the 'any' type instead of the 'Object' type? Angular Services can help you with that

Creating type definitions for recursive functions in TypeScript

Importing multiple modules in Typescript is a common practice

The type does not meet the requirements set by the class it is inheriting from

Steps for connecting to a property in another component

Failure to connect to the NextJS API resulting in rejection of Incremental Static Regeneration requests

1. "The power of three vows in the world

An unparalleled nextjs middleware that seamlessly functions across all routes without requiring individual imports

Unable to utilize vue-cookies library in TypeScript environment

When elements are passed through components in Next.js, their style does not get applied

Mobile values in tailwindcss take precedence over breakpoints values, overriding them