Динамический конфиг с угловым и докером (2 части серии)
Как мы видели в мой предыдущий пост мы можем сделать динамическую конфигурацию в угловой. Большое использование его находится в докеренном контейнере! Мы создадим многоступенчатый Docker Build, чтобы иметь минимальный размер возможен и иметь с динамической конфигурацией. Но сначала нам нужно создать конфигурацию Nginx для нашего приложения.
Предварительные условия
- Nodejs +8.
- Угловая CLI (
NPM I -G @ angular/cli @ Последние
илиПряжа Global Add @ Angular/CLI @ Последние
Несомненно - Угловая конфигурация времени выполнения, как видно в Мой предыдущий пост
- Докер +17.05.
- Основное понимание докеров и угловых CLI-команд
Nginx config.
Наш первый шаг будет настроить наш сервер NGINX для обслуживания нашего приложения и GZIP его Таким образом, у нас есть лучшая производительность:
# ./docker/nginx/default.conf server { listen 80; sendfile on; default_type application/octet-stream; gzip on; gzip_http_version 1.1; gzip_disable "MSIE [1-6]\."; gzip_min_length 1100; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_comp_level 9; root /usr/share/nginx/html; location / { try_files $uri $uri/ /index.html =404; } }
Как только у нас есть, мы можем сделать контейнер докера!
Dockerfile
Наш DockerFile будет иметь два этапа. Один построит наше приложение, а другой этап будет иметь приложение сборки только с Nginx, работающим на нем.
Вот как мы можем достичь этого:
### STAGE 1: Build ### # We label our stage as 'builder' FROM node:9 as builder COPY package.json yarn.lock ./ ## Storing node modules on a separate layer will prevent unnecessary npm installs at each build RUN yarn install && mkdir /ng-app && mv ./node_modules ./ng-app/ ## Move to /ng-app (eq: cd /ng-app) WORKDIR /ng-app # Copy everything from host to /ng-app in the container COPY . . ## Build the angular app in production mode and store the artifacts in dist folder RUN yarn build --prod --output-path=dist ### STAGE 2: Setup ### FROM nginx:1.13.3-alpine ## Copy our default nginx config COPY docker/nginx/default.conf /etc/nginx/conf.d/ ## Remove default nginx website RUN rm -rf /usr/share/nginx/html/* ## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder COPY --from=builder /ng-app/dist /usr/share/nginx/html CMD ["nginx", "-g", "daemon off;"]
Наш последний шаг будет создать Docker-Compose с конфигурацией!
Docker Compose
Вот наш Docker-Compose.yml:
version: '3.1' services: web-app: build: . ports: - 8090:80 volumes: - ./front-config/local.json:/usr/share/nginx/html/assets/config.json
Здесь я строю локальное изображение, но вы можете использовать изображение
метка вместо этого использовать изображение сборки.
Здесь у нас есть! Полностью настраиваемое изображение докера с угловым приложением!
Динамический конфиг с угловым и докером (2 части серии)
Оригинал: «https://dev.to/beaussart/docker-a-angular-application-with-dynamic-environement-40da»