Jak uruchomić aplikację Next.js z Dockerem: krok po kroku

Timur Takhtashov - Oct 14 - - Dev Community

Image description

🚀 Czym jest Docker i jak pomaga programistom? 🌊

Docker to narzędzie, które pozwala spakować aplikacje i wszystkie ich zależności w kontenery. Oznacza to, że możesz uruchamiać swoją aplikację na dowolnym komputerze, a będzie działać tak samo, bez problemów z konfiguracją. 🌟
Aby korzystać z Dockera, musisz wprowadzać polecenia w terminalu (lub wierszu poleceń). Polecenia zazwyczaj zaczynają się od nazwy narzędzia (np. docker) i zawierają różne parametry.

Zacznijmy uruchamiać aplikację Next.js przy użyciu Dockera! 💻✨

Krok 1: Upewnij się, że na twoim komputerze zainstalowany jest Node.js
Aby to zrobić, otwórz terminal i wpisz komendę:

docker --version
Enter fullscreen mode Exit fullscreen mode

Jeśli Docker jest zainstalowany, zobaczysz jego wersję. Jeśli nie, pobierz go z oficjalnej strony Dockera. Link do Node.js.


Krok 2: Wprowadź w terminalu polecenie, aby utworzyć nową aplikację Next.js

npx create-next-app@latest my-next-app
Enter fullscreen mode Exit fullscreen mode

Następnie przejdź do folderu swojego projektu za pomocą komendy:

cd my-next-app
Enter fullscreen mode Exit fullscreen mode



Krok 3: Stwórz plik Dockerfile (instrukcję dla Dockera, która opisuje, jak zbudować obraz twojej aplikacji)
W katalogu głównym twojego projektu utwórz plik o nazwie Dockerfile i dodaj do niego następujący kod:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
Enter fullscreen mode Exit fullscreen mode



Krok 4: Stwórz plik .dockerignore (plik, który informuje Dockera, które pliki i foldery nie powinny być włączone do obrazu) i dodaj do niego:

node_modules
npm-debug.log
Enter fullscreen mode Exit fullscreen mode



Krok 5: Zbuduj obraz Dockera i uruchom aplikację
To bez problemu można zrobić za pomocą poniższych komend:

docker build -t my-next-app .
docker run -p 3000:3000 my-next-app
Enter fullscreen mode Exit fullscreen mode



Krok 6: Otwórz aplikację w przeglądarce
Dla tego wystarczy przejść w przeglądarce pod adres http://localhost:3000, a twoja aplikacja będzie działać! 🎉

. .
Terabox Video Player