Cześć wszystkim, przychodzę z zapytaniem dotyczącym pracy z aplikacją Next.js działającą w Dockerze. Mam nadzieję, że uda mi się przedstawić proces zrozumiale 
Cele: wygenerować nową aplikację i przygotować lokalne środowisko dev w oparciu o kontenery Dockera.
Chcę, aby inne osoby mogły sklonować repozytorium Git, uruchomić aplikację Next.js i nad nią pracować. Udało mi się to zrobić. Zastanawia mnie jednak kwestia tworzenie katalogu node_modules za pomocą polecenia npm install, ale po kolei. W punktach opiszę proces (pominąłem polecenia Git, bo nie wnoszą nic istotnego do sprawy).
- Utworzyłem strukturę projektu:
project/
├─ next-app/
├─ .dockerignore
├─ app.Dockerfile
├─ create-app.Dockerfile
├─ docker-compose.yaml
├─ README.md
.dockerignore:
node_modules
*.Dockerfile
Dockerfile
docker-compose.yaml
app.Dockerfile
FROM node:20.5.1-alpine3.18
WORKDIR /next-app
COPY ./next-app/package*.json .
RUN npm install
COPY ./next-app .
CMD ["npm", "run", "dev"]
create-app.Dockerfile
FROM node:20.5.1-alpine3.18
WORKDIR /next-app
CMD ["sh"]
docker-compose.yaml
version: "3.9"
services:
app:
container_name: app
build:
context: .
dockerfile: app.Dockerfile
ports:
- "3000:3000"
volumes:
- ./next-app:/next-app
- Utworzyłem obraz do przygotowania kontenera, dzięki któremu można wygenerować nową aplikację Next.js (tak właściwie, to dowolną aplikację Node.js):
docker build --file create-app.Dockerfile --tag create-app:1.0.0 .
- Utworzyłem kontener:
docker run --name create-app --rm --volume ${PWD}/next-app:/next-app -it create-app:1.0.0
- Wewnątrz kontenera wygenerowałem nową aplikację Next.js. Jako nazwę projektu wpisałem znak
.i wybrałem domyślne opcje.
npx create-next-app@latest --use-npm
Tak wygląda wynik końcowy:
/next-app # npx create-next-app@latest --use-npm
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
✔ What is your project named? … .
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /next-app.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next
added 329 packages, and audited 330 packages in 43s
117 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Success! Created next-app at /next-app
npm notice
npm notice New patch version of npm available! 9.8.0 -> 9.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.8.1
npm notice Run npm install -g [email protected] to update!
npm notice
/next-app #
- Zamknąłem kontener:
/next-app # exit
- Utworzyłem obraz aplikacji. Użyłem narzędzia
docker compose, ponieważ wygodnie się z tym programem pracuje.
docker compose build --no-cache
- Uruchomiłem kontener z aplikacją:
docker compose up -d
-
Otworzyłem w przeglądarce adres
http://localhost:3000, pod którym dostępna jest nowa aplikacja Next.js. -
Mogę edytować kod za pomocą VSCode, zmiany są widocznie.
Podsumowując na tym etapie wszystko wydaje się być ok. Jednak problem pojawia się, gdy sklonuję repozytorium i spróbuję uruchomić aplikację. Już wyjaśniam o co dokładnie chodzi. W punktach opiszę proces.
- Utworzyłem obraz aplikacji za pomocą narzędzia
docker compose:
docker compose build --no-cache
- Uruchomiłem kontener z aplikacją:
docker compose up -d
- Kontener został zamknięty ze statusem
Exit 127, więc sprawdziłem logi:
docker compose logs -f
Logi z kontenera:
app |
app |
app | > [email protected] dev
app | > next dev
app |
app |
app | sh: next: not found
-
W VSCode sprawdziłem zawartość katalogu
project/next-appi dostrzegłem, że nie ma katalogunode_modules. Problem ten rozwiązałem w kolejnych punktach. -
Utworzyłem kontener:
docker run --name create-app --rm --volume ${PWD}/next-app:/next-app -it create-app:1.0.0
- Wewnątrz kontenera zainstalowałem pakiety za pomocą npm:
/next-app # npm install
- Zamknąłem kontener:
/next-app # exit
- Tym razem katalog
node_modulesjest dostępny. Uruchomiłem kontener z aplikacją:
docker compose up -d
- Mogę edytować kod za pomocą VSCode, zmiany są widocznie.
Tutaj pojawia się pytanie:
Dlaczego po skolonowaniu repozytorium, zbudowaniu obrazu i uruchomieniu kontenera, katalog node_modules nie został utworzony skoro w pliku app.Dockerfile znajduje się wywołanie polecenia npm install? 
