Рубрики
Uncategorized

Docker Угловое приложение с динамической средой

Создайте контейнер докера для угловых и до сих пор иметь динамическую среду. Теги с угловым, JavaScript, Devops.

Динамический конфиг с угловым и докером (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»