← Wszystkie tematy W 23% ogłoszeń · 11 z 47 ogłoszeń frontend React

Docker

Pudełko z całym pokojem w środku

Docker pojawia się w 11 z 47 ogłoszeń frontendowych. Na rozmowie wystarczy rozumieć obraz i kontener oraz umieć napisać sensowny Dockerfile dla frontendu.

Przerobione Opanowane 0 z 3 pytań

Ucz się z Claude Wytłumacz od zera Próbna rozmowa Zadanie praktyczne Ściąga na 1 stronę

Co piszą w ogłoszeniach

„praktyczna znajomość Docker – minimum 1 rok doświadczenia lub 3 projekty”
Randlab · React Developer – (K/M/N)
„Minimum rok doświadczenia w pracy z technologią konteneryzacji Docker,”
GET IT TOGETHER Sp. z o.o. · Frontend Developer (React)
„Familiarity with Docker, cloud environments, and deployment pipelines is an advantage.”
DCV Technologies · Senior React Developer with Java backend experience

Scena pierwsza · obraz i kontener

Foremka i babeczki

Obraz to foremka do babeczek: zawsze taka sama i nikt w niej nic nie zmienia. Kontener to babeczka upieczona z foremki. Możesz ich upiec kilka, a na każdej dzieci mogą coś narysować. Ale gdy babeczkę zjesz (usuniesz kontener), rysunki znikają razem z nią. Chyba że rysujesz w zeszycie obok, czyli w wolumenie.

Obraz sklep:1.0 tylko do odczytu

-v dane:/app/data (wolumen)

Uruchom dwa kontenery, dodaj w nich zamówienia, potem usuń jeden.

Scena druga · multi-stage build

Plecak z całą kuchnią czy z samym ciastem?

Żeby upiec ciasto, potrzebujesz kuchni: piekarnika, misek, mąki. Ale gościowi zanosisz tylko ciasto. W Dockerfile jest tak samo: Node, node_modules i kod źródłowy potrzebne są tylko do zbudowania. Do produkcji wystarczą gotowe pliki z dist i mały serwer.

jeden etap multi-stage

–

Porównajmy

Obraz czy kontener?

	Obraz	Kontener
Czym jest?	Foremka.Niezmienny szablon z warstw: system, zależności, aplikacja.	Babeczka z foremki.Uruchomiona instancja obrazu z własnym procesem i warstwą zapisu.
Jak powstaje?	Z przepisu.`docker build -t sklep:1.0 .` według Dockerfile.	Z foremki.`docker run -p 8080:80 sklep:1.0`
Ile sztuk?	Jedna foremka.Jeden obraz z tagiem, w rejestrze (Docker Hub, ECR, GHCR).	Ile chcesz babeczek.Wiele kontenerów z jednego obrazu, np. 3 repliki za load balancerem.
Zmiany w środku	Nie da się.Zmiana = nowy build i nowy tag.	Można, ale giną po usunięciu.Trwałe dane tylko w wolumenach albo w bazie poza kontenerem.
Dla frontendu	Mały obraz z gotowym `dist`.Multi-stage: `node` do builda, `nginx:alpine` do serwowania.	Lokalnie: całe środowisko jednym poleceniem.`docker compose up`: front, API i baza naraz.

Foremka i babeczka

Obraz to niezmienny szablon. Kontener to jego uruchomiona kopia.

Zeszyt obok

Co ma przetrwać usunięcie kontenera, trzymaj w wolumenie albo w bazie.

Zanieś samo ciasto

Multi-stage: buduj w dużej kuchni, wysyłaj tylko gotowe pliki.

Sprawdź się

Pytania z rozmów

Najpierw odpowiedz na głos, dopiero potem rozwiń odpowiedź.

Jak wygląda Dockerfile dla aplikacji frontendowej? (multi-stage build, nginx)

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Ciasto pieczesz w dużej kuchni, ale gościowi zanosisz tylko ciasto, bez piekarnika i misek.

Na rozmowę: Etap build: FROM node:20-alpine AS build, najpierw COPY package*.json i RUN npm ci (warstwa z zależnościami się cache’uje, dopóki lockfile się nie zmieni), potem COPY . . i RUN npm run build. Etap runtime: FROM nginx:alpine, COPY --from=build /app/dist /usr/share/nginx/html i własny nginx.conf z fallbackiem SPA (try_files $uri /index.html) i nagłówkami cache. Do tego .dockerignore (node_modules, .git), konkretne tagi obrazów zamiast latest, uruchamianie jako nie-root. Wynik: kilkadziesiąt MB zamiast ponad 1 GB.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Obraz a kontener: jaka jest różnica?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Obraz to foremka do babeczek, kontener to babeczka. Z jednej foremki upieczesz wiele babeczek, a rysunki na babeczce znikają, gdy ją zjesz.

Na rozmowę: Obraz to niezmienny, wersjonowany szablon złożony z warstw (system, zależności, aplikacja), budowany z Dockerfile i trzymany w rejestrze. Kontener to uruchomiona instancja obrazu z własnym procesem, siecią i cienką warstwą zapisu. Zmiany w kontenerze giną po jego usunięciu, więc trwałe dane trzyma się w wolumenach albo usługach zewnętrznych. Z jednego obrazu można uruchomić wiele kontenerów, co jest podstawą skalowania.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Jak przekazać zmienne środowiskowe do frontendu w kontenerze?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Ciasto jest już upieczone, więc nie dosypiesz do niego cukru. Możesz najwyżej położyć obok karteczkę z napisem, ile cukru chciał gość.

Na rozmowę: Zmienne typu import.meta.env.VITE_* są wklejane do kodu w czasie builda, więc ten sam obraz nie zadziała w różnych środowiskach. Opcje: osobny build na środowisko (proste, ale łamie zasadę „build once, deploy many”), runtime config, czyli plik /config.js lub config.json generowany przy starcie kontenera z env (envsubst w entrypoincie nginx) i wczytywany przez aplikację, albo pobieranie konfiguracji z API. Sekretów nie umieszcza się w kodzie frontendu nigdy, bo każdy może go podejrzeć.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Poziom wyżej

Wersja dla seniora

Tak wyglądają pytania na seniora i leada: nie ma jednej dobrej odpowiedzi, liczy się to, jak ważysz kompromisy i czy mówisz o skali, ryzyku i ludziach.

Przypadek 1

Build obrazu frontendu trwa w CI 14 minut

Każdy PR buduje obraz Dockera z aplikacją Next.js. Build trwa 14 minut, z czego npm install 6 minut, mimo że zależności zmieniają się rzadko. Developerzy czekają na preview i scalają PR-y bez niego.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy znasz cache warstw i kolejność instrukcji w Dockerfile
Czy umiesz użyć cache w CI, gdzie każdy runner startuje czysty
Czy mierzysz, zanim optymalizujesz

Odpowiedź seniora

Najpierw rozbijam czas na kroki (docker build --progress=plain, czasy jobów w CI). Najczęstsza przyczyna to COPY . . przed npm ci, przez co każda zmiana w kodzie unieważnia warstwę z zależnościami.

Kolejność: najpierw COPY package.json i lockfile, potem npm ci, dopiero potem reszta kodu. Do tego BuildKit z cache mount na katalog npm (RUN --mount=type=cache,target=/root/.npm) i .dockerignore, który wyklucza node_modules, .git i artefakty. W CI runner jest czysty, więc włączam zewnętrzny cache warstw: docker buildx z --cache-from i --cache-to typu registry albo gha. Next.js dostaje też cache katalogu .next/cache.

Jeśli to monorepo, buduję tylko projekty dotknięte zmianą i używam turbo prune lub nx, żeby do obrazu trafił tylko potrzebny wycinek. Cel ustalam liczbowo, np. 3 minuty przy zmianie samego kodu, i pilnuję go w dashboardzie czasów pipeline’u.

Typowe wpadki

Większy runner jako jedyne rozwiązanie
Kopiowanie node_modules z hosta do obrazu
Brak .dockerignore, przez co kontekst buildu ma setki MB

Dopytają o

Jak upewnisz się, że cache nie przemyca nieaktualnych zależności?
Czy preview w ogóle musi być obrazem Dockera?
Jak obsłużysz prywatny rejestr npm w buildzie bez wycieku tokenu?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 2

Token do prywatnego npm i klucz API znalezione w obrazie

Audyt bezpieczeństwa wykazał, że w publicznie dostępnym obrazie frontendu w rejestrze jest plik .npmrc z tokenem oraz klucz API płatności wpisany w zmiennej środowiskowej podczas buildu. Masz naprawić sytuację i zapobiec powtórce.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy wiesz, że warstwy obrazu przechowują historię plików
Czy odróżniasz sekrety buildu od sekretów runtime
Czy pamiętasz, że wszystko w bundlu frontendu jest publiczne

Odpowiedź seniora

Najpierw incydent: unieważniam token npm i klucz płatności, sprawdzam logi użycia, usuwam obrazy z rejestru i ograniczam do niego dostęp. Usunięcie pliku w kolejnej warstwie nic nie daje, bo poprzednia warstwa nadal go zawiera.

Potem przyczyny. Token npm przekazuję jako secret BuildKit (RUN --mount=type=secret,id=npmrc), który nie trafia do żadnej warstwy, a multi-stage build sprawia, że finalny obraz zawiera tylko zbudowaną aplikację. Klucz płatności: jeśli to klucz tajny, nie ma prawa być w kodzie frontendu w ogóle, bo każda zmienna NEXT_PUBLIC_ lub VITE_ ląduje w bundlu. Operacje z tajnym kluczem przenoszę na serwer, a frontend dostaje tylko klucz publiczny.

Zapobieganie: skan sekretów w CI (gitleaks, trufflehog), skan obrazów (Trivy, docker scout), reguła w review dla zmiennych publicznych, a sekrety runtime z menedżera sekretów wstrzykiwane przy starcie kontenera.

Typowe wpadki

RUN rm .npmrc w kolejnej linii jako naprawa
Przekonanie, że ARG jest bezpieczny dla sekretów
Brak rotacji kluczy po wycieku

Dopytają o

Jak sprawdzisz historię warstw istniejącego obrazu?
Jak przekazać konfigurację runtime do statycznego SPA bez przebudowy?
Kto powinien mieć dostęp do produkcyjnych sekretów?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 3

Środowisko developerskie dla 30 osób, które „działa tylko u mnie”

Frontend wymaga lokalnie API, bazy, Redisa, mocka płatności i usługi do obrazów. Onboarding nowej osoby trwa 3 dni, każdy ma inną wersję Node, a pół zespołu pracuje na Macach z procesorami ARM. Masz zaproponować rozwiązanie.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy wiesz, co konteneryzować, a czego nie
Czy znasz problemy wydajności Dockera na Macach
Czy myślisz o doświadczeniu developera i utrzymaniu

Odpowiedź seniora

Konteneryzuję zależności, a nie samą aplikację frontendową. docker compose z API, bazą z danymi seedującymi, Redisem i mockami (np. WireMock lub MSW w trybie serwera), z profilami, żeby frontendowiec mógł podnieść tylko to, czego potrzebuje. Obrazy wielo-architekturowe (buildx z linux/amd64 i linux/arm64), żeby Maki z ARM nie emulowały.

Sam dev server frontendu uruchamiam natywnie, bo bind mount node_modules na macOS jest wolny, a hot reload przez warstwę plików Dockera bywa zawodny. Wersję Node pilnuje .nvmrc lub Volta i pole engines z engine-strict. Alternatywa dla zespołów z dużą różnorodnością sprzętu to Dev Containers lub zdalne środowiska (Codespaces), ale to koszt i zależność od sieci.

Jeden skrypt startowy (make dev lub npm run setup) i dokumentacja w README. Sukces mierzę czasem onboardingu nowej osoby i liczbą pytań na kanale zespołu.

Typowe wpadki

Wsadzenie całego frontendu z dev serverem do kontenera na macOS i walka z wydajnością
Obrazy tylko dla amd64
Brak danych testowych, przez co każdy klika konto ręcznie

Dopytają o

Jak utrzymasz compose w zgodzie z produkcją?
Kiedy wybrałbyś Dev Containers zamiast compose?
Jak obsłużysz testy E2E w tym samym środowisku w CI?

Zapytaj Claude Rozwiń case Zagraj interviewera