Angular 16: Zoptymalizuj budowanie projektu w Dockerze

Angular 16 to najnowsza wersja popularnego frameworka JavaScript, który umożliwia tworzenie zaawansowanych aplikacji webowych. Jeśli korzystasz z Angulara 16 i chcesz zoptymalizować proces budowania swojego projektu w środowisku Docker, istnieje kilka kluczowych kroków, które możesz podjąć. W tym poście na blogu omówimy przykład Dockerfile, który pokaże, jak zoptymalizować budowanie projektu Angular 16 w Dockerze.

Przykładowy Dockerfile:
Poniżej znajduje się przykład Dockerfile, który możesz użyć do zoptymalizowania procesu budowania Twojego projektu Angular 16 w Dockerze:

FROM node:lts-alpine as base

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

COPY . .

FROM base as lint

RUN npm run lint

FROM base as build

ENV NODE_ENV production

RUN --mount=type=cache,target=/app/.angular npx ng run frontend:build:production && npx ng run frontend:server:production

FROM node:lts-alpine

USER node
WORKDIR /app

COPY --from=build /app/node_modules /app/node_modules
COPY --from=build /app/dist/frontend /app/dist/frontend

ENV PORT 80
ENV NODE_ENV production

# GIT_COMMIT is used to invalidate cache in production
ARG GIT_COMMIT
ENV GIT_COMMIT $GIT_COMMIT

EXPOSE 80

CMD ["node", "/app/dist/frontend/server/pl-PL/main.js"]

Opis przykładowego Dockerfile:

1. Pierwsza faza (base) definiuje obraz bazowy jako node:lts-alpine i ustawia katalog roboczy na /app. Następnie kopiowane są pliki package.json i package-lock.json, a następnie uruchamiana jest komenda npm ci w celu zainstalowania zależności projektu.

2. Faza lint wykonuje lintowanie kodu za pomocą komendy npm run lint. Możesz dostosować tę fazę, dodając inne polecenia lintowania, takie jak sprawdzanie jakości kodu, formatowanie itp.

3. Faza build definiuje zmienną środowiskową NODE_ENV jako production i wykonuje budowanie projektu Angular 16. Wykorzystuje flagę --mount=type=cache,target=/app/.angular, aby przechowywać dane w pamięci podręcznej i uniknąć ponownego pobierania zależności npm przy każdym budowaniu.

4. Kolejna faza budowania korzysta z obrazu node:lts-alpine i ustawia użytkownika na node. Kopiowane są zależności i skompilowane pliki projektu Angular 16 do odpowiednich lokalizacji w kontenerze.

5. Następnie ustawiane są zmienne środowiskowe, takie jak PORT i NODE_ENV, które wpływają na zachowanie aplikacji. GIT_COMMIT jest używany do unieważnienia pamięci podręcznej w środowisku produkcyjnym.

6. Zdefiniowany jest eksponowany port 80, na którym nasłuchuje aplikacja.

7. W końcu, w poleceniu CMD, uruchamiany jest serwer Node.js, który obsługuje aplikację Angular 16.

Podsumowanie:
Optymalizacja procesu budowania projektu Angular 16 w Dockerze może przynieść znaczące korzyści pod względem wydajności i zarządzania zasobami. Wykorzystując odpowiedni Dockerfile, tak jak w przykładzie powyżej, możesz skrócić czas budowania, zmniejszyć rozmiar obrazu Dockera i zoptymalizować proces lintowania kodu. Biorąc pod uwagę te kroki, będziesz mógł cieszyć się bardziej wydajnym i płynnym procesem budowania aplikacji Angular 16 w środowisku Docker.

---

Ten przykładowy Dockerfile jest częścią projektu mamrzeczy.pl - dynamicznego serwisu ogłoszeniowego. Optymalizuje proces budowania aplikacji Angular 16 w środowisku Docker, co przyczynia się do wydajności i responsywności serwisu mamrzeczy.pl.