Мой файл докеров для развертывания моего углового приложения не запускает приложение с помощью веб-сервера ни nodeJs, ни nginx
Я закончил работу над проектом Angular, и мне нужно развернуть его с помощью Docker. Я следовал инструкциям и убедился, что файл dockerfile правильный, используя несколько источников. Я пытался использовать nginx или nodejs, но это не работает (для nginx он показывает мне страницу сервера nginx по умолчанию).
для сборщика это ' "builder": "@angular-devkit/build-angular:application", ' а для версии проекта, которую я использую: Angular CLI: 17.3.8 Node: 20.15.1 .
вот файл docker, который я сейчас использую для создания образа:
# Stage 1: Build Angular application
FROM node:latest as build
WORKDIR /app
COPY package*.json ./
RUN npm install
RUN npm install -g @angular/cli
COPY . .
RUN ng build --configuration=production
# Stage 2: Serve Angular application with Nginx
FROM nginx:latest
COPY --from=build /app/dist/projet-daret /usr/share/nginx/html
EXPOSE 80
это моя докер-композиция:
version: '3.8'
services:
angular-app:
build: .
ports:
- "4300:80"
nginx:
image: nginx:latest
ports:
- "4300:80"
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
depends_on:
- angular-app
Примечание. У меня есть Dockerfile для версии, которая использует nodejs в качестве веб-сервера.
когда я использую докер только с приложением angular и запускаю его с помощью ng serve, он работает нормально, но когда я использую nginx или nodejs, он не запускает приложение angular, я попробовал несколько модификаций, которые смог найти для файла докера, но безрезультатно Я попробовал событие использовать Compose, но это также не дало результата. я застрял прямо сейчас.
Можете ли вы отредактировать вопрос, включив в него Dockerfile и настройки контейнера, которые не работают? Вы говорите: «Он не запускает приложение Angular»; как вы это определяете и какой результат видите?
для сборщика это ' "builder": "@angular-devkit/build-angular:application", ' и для версии проекта, которую я использую: Angular CLI: 17.3.8 Узел: 20.15.1
Ответы 1
Вы используете новый конструктор приложений. Структура папок теперь выглядит следующим образом:
dist/
<your-app-name>/
browser/
index.html
main.js
...
Однако похоже, что ваш Dockerfile все еще ожидает старой структуры от конструктора браузера:
dist/
<your-app-name>/
index.html
main.js
...
Обратите внимание, что папки browser нет. Вам нужно настроить файл docker, чтобы скопировать папку browser:
COPY --from=build /app/dist/projet-daret/browser /usr/share/nginx/html
Дополнительный контекст: для приложений, отображаемых на стороне клиента, это кажется ненужным. Но для приложений, отображаемых на стороне сервера, будут две папки: папка browser с предварительно обработанными страницами и папка server с серверным кодом NodeJS.
Также убедитесь, что ваш сервер nginx правильно настроен для размещения приложения Angular. Судя по всему, у вас нет конфигурации, что может быть проблематично. См. этот вопрос: Как настроить nginx для запуска приложения angular4
я сделал то, что вы мне сказали, вот мой файл докеров: # Stage 1: Build Angular application FROM node:latest as build WORKDIR /app COPY package*.json ./ RUN npm install RUN npm install -g @angular/cli COPY . . RUN ng build --configuration=production # Stage 2: Serve Angular application with Nginx FROM nginx:latest COPY --from=build /app/dist/projet-daret/browser /usr/share/nginx/html EXPOSE 80 но все же, когда я запускаю контейнер и получаю доступ к назначенному адресу, у меня есть страница nginx по умолчанию. может ли проблема исходить от: RUN ng build --configuration=production
@SoyeGh обновил мой ответ, возможно, вам просто не хватает какой-то конфигурации.
я изменил свой Dockerfile на этот, и он работает: # Stage 1: Build Angular application FROM node:latest AS build WORKDIR /app COPY package*.json ./ RUN npm install RUN npm install -g @angular/cli COPY . . RUN ng build --configuration=production # Stage 2: Serve Angular application with Nginx FROM nginx:latest COPY --from=build /app/dist/projet-daret/browser /usr/share/nginx/html #COPY --from=build /app/dist/projet-daret/browser /var/www/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
Какую версию Angular вы используете, какая версия использовалась для создания проекта? Вы используете конструктор браузеров
@angular-devkit/build-angular:browserили конструктор приложений@angular-devkit/build-angular:application? (Ищите вangular.json)