Development Docker Container not working

[andrewebdev]

There are issues building the development docker container. There are no errors during the build process, but soon as you run the container it fails with the container unable to run next.

Here is the full log:

dmsp_frontend_prototype on  AE-Styleguide-Development [!] via  
❯ docker-compose build --no-cache
[+] Building 51.9s (11/11) FINISHED                                                                                                                             
 => [internal] load build definition from Dockerfile.dev                                                                                                   0.0s
 => => transferring dockerfile: 679B                                                                                                                       0.0s
 => [internal] load .dockerignore                                                                                                                          0.0s
 => => transferring context: 34B                                                                                                                           0.0s
 => [internal] load metadata for public.ecr.aws/docker/library/node:lts-alpine3.19                                                                         0.5s
 => CACHED [1/6] FROM public.ecr.aws/docker/library/node:lts-alpine3.19@sha256:291e84d956f1aff38454bbd3da38941461ad569a185c20aa289f71f37ea08e23            0.0s
 => [internal] load build context                                                                                                                          0.0s
 => => transferring context: 14.72kB                                                                                                                       0.0s
 => [2/6] RUN mkdir -p /app                                                                                                                                0.3s
 => [3/6] WORKDIR /app                                                                                                                                     0.0s
 => [4/6] COPY package*.json ./                                                                                                                            0.1s
 => [5/6] RUN npm install                                                                                                                                 46.5s
 => [6/6] COPY . .                                                                                                                                         0.0s
 => exporting to image                                                                                                                                     4.5s
 => => exporting layers                                                                                                                                    4.5s
 => => writing image sha256:f788abe88e4143b50b0173e4fd9c87e642952c5f0db68a01a5a57a58214004a4                                                               0.0s 
 => => naming to docker.io/library/dmsp_frontend_prototype-dmsp-frontend-prototype                                                                         0.0s 

dmsp_frontend_prototype on  AE-Styleguide-Development [!] via  took 52s 
❯ docker-compose up
[+] Running 1/0
 ✔ Container dmsp_frontend_prototype-dmsp-frontend-prototype-1  Created                                                                                    0.0s 
Attaching to dmsp_frontend_prototype-dmsp-frontend-prototype-1
dmsp_frontend_prototype-dmsp-frontend-prototype-1  | 
dmsp_frontend_prototype-dmsp-frontend-prototype-1  | > dmsp_frontend_prototype@0.1.0 dev
dmsp_frontend_prototype-dmsp-frontend-prototype-1  | > next dev
dmsp_frontend_prototype-dmsp-frontend-prototype-1  | 
dmsp_frontend_prototype-dmsp-frontend-prototype-1  | sh: next: not found
dmsp_frontend_prototype-dmsp-frontend-prototype-1 exited with code 127

[andrewebdev]

okay @jupiter007 I suspect I know what the issue is here.

First the docker file is building the node packages inside the container. so it will create the "node_modules" directory fine inside the image. However, we then run with with docker compose, which then maps the local folder strucutre (which is missing node_modules) into the directory in the container, effectively overwriting the contents

This means when running with compose, it then cannot fine any node_modules at all.

[andrewebdev]

Yes, did some testing and this was indeed the case.

I made changes to Dockerfile.dev and docker-compse.yml so that the node modules inside the image won't be overridden when we map the entire project root into the image.

Dockerfile

# Dockerfile
# preferred node version chosen here (LTS = 20.9.0 as of 10/24/2023)
FROM public.ecr.aws/docker/library/node:lts-alpine3.19

# Create the directory on the node image
# where our Next.js app will live
RUN mkdir -p /app/src

# Set /app as the working directory in container
WORKDIR /app

# Copy package.json and package-lock.json
# to the /app working directory
COPY package*.json ./

# Install dependencies in /app
RUN npm install

# Copy the rest of our Next.js folder into /app/src
COPY . /app/src
WORKDIR /app/src

# Ensure port 3000 is accessible to our system
EXPOSE 3000

# Command to run the Next.js app in development mode
CMD ["npm", "run", "dev"]

As you can see I have it so that the /app/ directory is used for the node_modules, and the actual source files for the application is in /app/src/. This way, when we later map our project directory into the new src subdirectory, we wont overwrite the node_modules.

docker-compose.yml

services:
  nodebox:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - ./package.json:/app/package.json
      - ./package-lock.json:/app/package-lock.json
      - .:/app/src

In the compose file, I ensure that the project root is mapped into /app/src so that we don't overwrite the node_modules. I also map package.jon and package-lock.json separately into /app/. This is so that we can (if we want to) shell into the container with docker-compose run --rm nodebox /bin/bash, and then run npm commands inside the container to install new libraries etc, and this will refelect back to the files outside the container.

I also renamed the container to nodebox, this is just a personal thing I normally do since it makes running docker-compse commands on a specific container less verbose.

[andrewebdev]

@jupiter007 and @briri If y'all are happy with me to make these changes I can put it in my Styleguide PR (when I eventually create it)

[briri]

Ahh that makes sense @andrewebdev . Thanks for looking into it.

The changes look good to me, what do you think @jupiter007? I wonder if it would also make sense to copy the tsconfig.json as well.

[jupiter007]

@andrewebdev thank you for making the change. Yes please check in your bug fix with the styleguide work.

[jupiter007]

Ahh that makes sense @andrewebdev . Thanks for looking into it.

The changes look good to me, what do you think @jupiter007? I wonder if it would also make sense to copy the tsconfig.json as well.

@briri I believe that the tsconfig.json file will be included in the volumes set to "- .:/app/src", since we are copying the application code to "/app/src" in the Dockerfile.

[andrewebdev]

Adding the tsconfig to the volume mapping is possible, but is only really useful if we want to do updates to the tsconfig while inside the container. I suspect this will rarely be required.

[jupiter007]

@andrewebdev and @briri , I got the docker container by just adding "/app/node_modules" to my volumes in docker-compose.yml. This is after I deleted my node_modules.

[andrewebdev]

Oh of course that would also work. Sometimes we miss the obvious solution. Good catch. I'll update on my side to reflect this, and then we don't have to mount the package.json files individually, and won't need separate source dir

[jupiter007]

Oh of course that would also work. Sometimes we miss the obvious solution. Good catch. I'll update on my side to reflect this, and then we don't have to mount the package.json files individually, and won't need separate source dir

Thanks Andre.