dir.by  
  Поиск  
Программирование, разработка, тестирование
Docker (упаковка web приложения в контейнер)
Используем Docker в проекте с Angular (под Windows)
  Посмотрели 3004 раз(а)       Комментариев 1  
 Последний комментарий: (19 июля 2021 14:35) Спасибо тебе, добрый человек! читать...       написать комментарий...
 Используем Docker в проекте с Angular (под Windows) 
последнее обновление: 21 декабря 2020
Шаг 1. Устанавливаем Docker для Windows
Шаг 2. Скачиваем пример Angular
Шаг 3. Добавляем файл Dockerfile
Добавим код в
  Файл Dockerfile
FROM node:latest
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 4200 49153
CMD npm run start
Строка FROM node:latest устанавливает версию узла для использования в образе докера.

Затем мы устанавливаем каталог или папку, в которой мы будем работать в этой среде (внутри образа докера). Я выбрал /app для простоты.

Затем мы запускаем npm install установку всех пакетов в эту среду.
Открываем два порта, 4200 потому что сервер разработки Angular работает на этом порту, 49153 потому что это порт прямой перезагрузки Angular.
Шаг 4. Добавляем файл docker-compose.yml
Добавим код в
  Файл docker-compose.yml
version: "3.7"
services:
  dashboard:
    build: .
    ports:
      - "4200:4200"
      - "49153:49153"
    volumes:
      - "/app/node_modules"
      - ".:/app"
Шаг 5. Добавим start в файл package.json
  Файл package.json
{
     "name": "my_example_angular_8",
     "version": "1.0.0",
     "description": "My Angular 8 Project",
     "scripts": {
          "start": "ng serve",
          "build": "ng build",
          "start": "ng serve --host 0.0.0.0 --poll 500"
     },
     "dependencies": {
          "@angular/common": "~8.1.0",
          "@angular/compiler": "~8.1.0",
          "@angular/core": "~8.1.0",
          "@angular/forms": "~8.1.0",
          "@angular/platform-browser": "~8.1.0",
          "@angular/platform-browser-dynamic": "~8.1.0",
          "@angular/router": "~8.1.0",
          "rxjs": "~6.4.0",
          "zone.js": "~0.9.1"
     },
     "devDependencies": {
          "@angular-devkit/build-angular": "~0.801.0",
          "@angular/cli": "~8.1.0",
          "@angular/compiler-cli": "~8.1.0",
          "@types/node": "~8.9.4",
          "typescript": "~3.4.3"
     }
}
--poll сообщает клиенту каждые 500 миллисекунд проверять, есть ли какие-либо новые изменения.
Шаг 6. В терминальной строке выполняем команду "docker-compose up"
Шаг 7. Откроем Dashboard
Запускаем образ
Шаг 8. Откроем Google Chrome
Вводим адрес http://localhost:4200
Все работает!
 
← Предыдущая тема
Выполняем в командной строке docker pull ... и ошибка: "Error! no matching manifest for linux/amd64 in the manifest list entries" | Docker Desktop
 
Следующая тема →
Используем Docker для .NET Core API приложения
 
Ваши Отзывы ... 1 комментариев
mirninec
19 июля 2021 14:35
Спасибо тебе, добрый человек!
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

  Объявления  
  Объявления  
 
Что такое Docker ?
Устанавливаем Docker для Windows | Ошибки Docker Desktop при запуске
Ошибки в Docker Desktop
Открываем Docker Desktop и ошибка: "Error! Cannot enable Hyper-V service"
Открываем Docker Desktop и ошибка: "Error! WSL 2 installation is incomplete"
Открываем Docker Desktop и ошибка: "Error! Docker Desktop cannot start → Enable virtualization on your computer"
Выполняем в командной строке docker pull ... и ошибка: "Error! no matching manifest for linux/amd64 in the manifest list entries" | Docker Desktop
Docker в проектах
Используем Docker в проекте с Angular (под Windows)
Используем Docker для .NET Core API приложения
Дополнительные темы, вопросы
[v] enable Docker for Kubernetes
Как узнать версию Docker (нажимаем вкладку "Docker Engine") | Docker Desktop
WWW сайты для изучения Docker
Сайты для изучения Docker

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика