Czas wreszcie nadszedł by wszystkie usługi w mojej apce spiąć w jednym miejscu zarządzanym przez docker-compose. Skąd taka potrzeba? Powody są trzy. Mam już dość ręcznego uruchamiania bazy danych, serwera backendowego, frontendu, dodatkowych providerów etc. Wymaga to ode mnie wiedzy gdzie co się znajduje, jak to się odpala, jak trzeba konfigurować. Po za tym coś czuje, że wkrótce będę chciał to wszystko skalować przy użyciu Kubernetes^^. Nie przedłużając, dzisiejszym wpisem chciałbym się z Wami podzielić jak łatwo można puścić w kontener aplikacje napisaną w Vue z użyciem NuxtJs.
Po wielu godzinach spędzonych w internecie widzę, że królują dwa podejścia do tego problemu. Albo użyjemy Dockerfile, sami budując obraz z wykorzystaniem obrazu node albo użyjemy gotowca. Rozwiązanie ze stawianiem systemu i instalowaniem w nim node wydawało mi się zbyt karkołomne, więc w ogóle go nawet nie rozpatrywałem. Prostota zwyciężyła, postawiłem na gotowca.
# Plik docker-compose.yml
version: "3.3"
services:
frontend:
image: node:11.13.0-alpine
command: npm run docker
volumes:
- ./web:/usr/src/app
working_dir: /usr/src/app
ports:
- "3000:3000"
environment:
NUXT_HOST: 0.0.0.0
NUXT_PORT: 3000
W powyżym pliku docker-compose.yml tworze serwis frontend z gotowego obrazu node11. Wykonuje mapowanie między moim katalogiem web gdzie trzymam zawartość aplikacji frontendowej a katalogiem osiągalnym dla Node. Do kontenera dostarczam zmienne środowiskowe NUXT_HOST, NUXT_PORT, które rozpozna NuxtJs nasłuchując tym samym na porcie 3000, na wszystkich interfejsach. By całość zadziałała poprawnie musimy jeszcze utworzyć komendę ‘npm run docker‘, dodając ją do pliku package.json mniej więcej tak:
"scripts": {
"docker": "npm run dev",
(...)
}Teraz pozostaje już w głównym katalogu wywołać docker-compose up. Pamiętajmy tylko, że jest to konfiguracja dla wersji deweloperskiej a nie produkcyjnej!