Создание и запуск приложения Angular в контейнере Docker

В этой статье мы создадим веб-приложение с использованием последней версии Angular, создадим образ Docker, а затем запустим этот образ в контейнере Docker.

Предварительные условия

Прежде чем начать, вам необходимо установить и настроить указанные ниже инструменты для создания приложения Angular и образа Docker.

* git: Git — это распределенная система контроля версий, которая будет использоваться для синхронизации репозитория. * Node.js и npm: Node.js — это программное обеспечение для выполнения кода JavaScript, основанное на движке Google V8. npm — это менеджер пакетов для Node.js (менеджер пакетов Node.js). Они будут использоваться для сборки и запуска приложения Angular, а также установки библиотек. * Angular CLI: Angular CLI — это служебный инструмент командной строки для Angular, который будет использоваться для создания базовой структуры приложения Angular. * Docker Engine: Docker Engine — это утилита командной строки для Docker, которая будет использоваться для создания и запуска контейнеров. * IDE (например, код Visual Studio или WebStorm< /a>): IDE (интегрированная среда разработки) — это инструмент с графическим интерфейсом, помогающий в разработке приложений, который будет использоваться для разработки приложения Angular.

Начало работы

Создайте приложение Angular

Angular — это платформа разработки для создания WEB-приложений, мобильных и настольных приложений с использованием HTML, CSS и TypeScript (JavaScript). В настоящее время Angular находится на версии 17, и Google является основным сопровождающим проекта.

1. Давайте создадим приложение с базовой структурой Angular, используя @angular/cli с отключенным рендерингом на стороне сервера (SSR), файлом маршрута и форматом стиля SCSS. .

g new angular-docker --ssr false --routing true --style scss
CREATE angular-docker/README.md (1067 bytes)
CREATE angular-docker/.editorconfig (274 bytes)
CREATE angular-docker/.gitignore (548 bytes)
CREATE angular-docker/angular.json (2806 bytes)
CREATE angular-docker/package.json (1045 bytes)
CREATE angular-docker/tsconfig.json (903 bytes)
CREATE angular-docker/tsconfig.app.json (263 bytes)
CREATE angular-docker/tsconfig.spec.json (273 bytes)
CREATE angular-docker/.vscode/extensions.json (130 bytes)
CREATE angular-docker/.vscode/launch.json (470 bytes)
CREATE angular-docker/.vscode/tasks.json (938 bytes)
CREATE angular-docker/src/main.ts (250 bytes)
CREATE angular-docker/src/favicon.ico (15086 bytes)
CREATE angular-docker/src/index.html (299 bytes)
CREATE angular-docker/src/styles.scss (80 bytes)
CREATE angular-docker/src/app/app.component.scss (0 bytes)
CREATE angular-docker/src/app/app.component.html (20884 bytes)
CREATE angular-docker/src/app/app.component.spec.ts (940 bytes)
CREATE angular-docker/src/app/app.component.ts (373 bytes)
CREATE angular-docker/src/app/app.config.ts (227 bytes)
CREATE angular-docker/src/app/app.routes.ts (77 bytes)
CREATE angular-docker/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

2. Теперь мы запустим приложение с помощью приведенной ниже команды.

npm start

> angular-docker@0.0.0 start
> ng serve


Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB | 
main.js             | main          |  23.23 kB | 
styles.css          | styles        |  96 bytes | 

                    | Initial Total | 106.03 kB

Application bundle generation complete. [1.504 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/

3. Готово! Далее мы получим доступ к URL-адресу http://localhost:4200/ и проверим, работает ли приложение.

Создайте образ Docker

Docker – это программное обеспечение, которое позволяет разработчикам создавать и запускать приложения-контейнеры.

1. Давайте создадим файл Dockerfile с конфигурацией образа Docker в корневом каталоге приложения Angular.

touch Dockerfile

2. Теперь мы настроим файл Dockerfile с содержимым, указанным ниже.

FROM node:alpine

WORKDIR /usr/src/app

COPY . /usr/src/app

RUN npm install -g @angular/cli

RUN npm install

CMD ["ng", "serve", "--host", "0.0.0.0"]

Примечания:

• Параметр FROM node:alpine определяет базовый образ Docker.
• Параметр WORKDIR /usr/src/app определяет каталог приложения по умолчанию. Определенный каталог создается, если он не существует.
• COPY . Параметр /usr/src/app копирует файлы и каталоги локального приложения в определенный каталог.
• Параметр npm install -g @angular/cli устанавливает глобальную зависимость командной строки для Angular.
• Параметр RUN npm install устанавливает зависимости приложения Angular.
• Параметр CMD ["ng", "serve", "--host", "0.0.0.0"] создает и запускает приложение Angular для внешнего доступа.

3. Далее мы создадим изображение с помощью команды ниже.

docker build -t angular-docker .

4. После создания изображения мы проверим, было ли оно создано с помощью команды ниже.

docker images
REPOSITORY       TAG      IMAGE ID       CREATED          SIZE
angular-docker   latest   73bfa0093a57   10 seconds ago   463MB

5. Готово! Был создан образ Docker с идентификатором 73bfa0093a57 и размером 463 МБ.

Запустите Docker-контейнер

1. Давайте запустим контейнер Docker, используя образ, созданный из приложения Angular, с помощью приведенной ниже команды.

docker run -p 4201:4200 angular-docker

2. Теперь мы проверим, запущен ли контейнер, с помощью команды ниже.

docker ps
CONTAINER ID   IMAGE            COMMAND                  CREATED         STATUS         PORTS                                       NAMES
b9f106cbdcca   angular-docker   "docker-entrypoint.s…"   5 seconds ago   Up 4 seconds   0.0.0.0:4201->4200/tcp, :::4201->4200/tcp   eloquent_elgamal

3. Готово! Далее мы получим доступ к URL-адресу http://localhost:4201/ и проверим, работает ли приложение внутри контейнера Docker.

Репозиторий приложения доступен по адресу https://github.com/rodrigokamada/angular-docker.

Заключение

Подводя итог тому, что было рассмотрено в этой статье:

* Создаём Angular-приложение. * Создаём Docker-образ. * Мы запускаем Docker-контейнер. * Мы протестировали приложение Angular внутри контейнера Docker. * Вы можете использовать эту статью для создания контейнера Docker с образом приложения Angular.

Спасибо за прочтение и надеюсь, статья вам понравилась!

Это руководство было опубликовано в моем блоге на португальском.

Чтобы оставаться в курсе новых статей, подписывайтесь на меня в Twitter и LinkedIn.