Я закончил работу над проектом 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, но это также не дало результата. я застрял прямо сейчас.
🤔 А знаете ли вы, что...
Node.js используется в IoT (интернете вещей) для управления устройствами и сбора данных.
Вы используете новый конструктор приложений. Структура папок теперь выглядит следующим образом:
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