Creación y ejecución de una aplicación Angular en un contenedor Docker
En este artículo, se creará una aplicación WEB utilizando la versión más reciente de Angular, se creará una imagen de Docker y esta imagen se ejecutará en un contenedor Docker.
Antes de comenzar, es necesario instalar y configurar las herramientas a continuación para crear la aplicación Angular y la imagen Docker.
- git: Git es un sistema de control de versiones distribuido y se utilizará para sincronizar el repositorio.
- Node.js y npm: Node.js es un software de tiempo de ejecución de código JavaScript basado en el motor V8 de Google. npm es un gestor de paquetes para Node.js (Node.js Package Manager). Se utilizarán para construir y ejecutar la aplicación Angular e instalar las bibliotecas.
- Angular CLI: Angular CLI es una herramienta de línea de comandos para Angular y se utilizará para crear la estructura base de la aplicación Angular.
- Docker Engine: Docker Engine es una herramienta de línea de comandos para Docker y se utilizará para crear y ejecutar contenedores.
- IDE (por ejemplo, Visual Studio Code o WebStorm): Un IDE (Entorno de Desarrollo Integrado) es una herramienta con una interfaz gráfica para ayudar en el desarrollo de aplicaciones y se utilizará para desarrollar la aplicación Angular.
Crear la aplicación Angular
Angular es una plataforma de desarrollo para construir aplicaciones WEB, móviles y de escritorio utilizando HTML, CSS y TypeScript (JavaScript). Actualmente, Angular está en la versión 17 y Google es el principal mantenedor del proyecto.
1. Crearemos la aplicación con la estructura base de Angular utilizando @angular/cli con la renderización del lado del servidor (SSR) deshabilitada, el archivo de rutas y el formato de estilo SCSS.
ng 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. Ahora ejecutaremos la aplicación con el siguiente comando.
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. ¡Listo! A continuación, accederemos a la URL http://localhost:4200/ y verificaremos si la aplicación está funcionando.
Crear la imagen Docker
Docker: Docker es un software que permite a los desarrolladores crear y ejecutar aplicaciones en contenedores.
1. Crearemos el archivo Dockerfile con la configuración de la imagen Docker en el directorio raíz de la aplicación Angular.
touch Dockerfile
2. Ahora configuraremos el archivo Dockerfile con el siguiente contenido.
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"]Notas:
-
La configuración
FROM node:alpinedefine la imagen base de Docker. -
La configuración
WORKDIR /usr/src/appdefine el directorio de la aplicación por defecto. El directorio definido se crea si no existe. -
La configuración
COPY . /usr/src/appcopia los archivos y directorios locales de la aplicación al directorio definido. -
La configuración
npm install -g @angular/cliinstala la dependencia global de línea de comandos para Angular. -
La configuración
RUN npm installinstala las dependencias de la aplicación Angular. -
La configuración
CMD ["ng", "serve", "--host", "0.0.0.0"]crea y ejecuta la aplicación Angular para acceso externo.
3. A continuación, crearemos la imagen con el siguiente comando.
docker build -t angular-docker .4. Después de crear la imagen, verificaremos si la imagen fue creada con el siguiente comando.
docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
angular-docker latest 73bfa0093a57 10 seconds ago 463MB
5. ¡Listo! La imagen Docker con ID 73bfa0093a57 y 463MB fue creada.
Ejecutar el contenedor Docker
1. Ejecutaremos el contenedor Docker utilizando la imagen creada de la aplicación Angular con el siguiente comando.
docker run -p 4201:4200 angular-docker2. Ahora verificaremos si el contenedor está en ejecución con el siguiente comando.
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. ¡Listo! A continuación, accederemos a la URL http://localhost:4201/ y verificaremos si la aplicación está funcionando dentro del contenedor Docker.
Resumiendo lo que se cubrió en este artículo:
- Creamos una aplicación Angular.
- Creamos una imagen Docker.
- Ejecutamos un contenedor Docker.
- Probamos la aplicación Angular dentro del contenedor Docker.
Puedes utilizar este artículo para crear un contenedor Docker con una imagen de una aplicación Angular.
¡Gracias por leer y espero que hayas disfrutado del artículo!
Jorge García
Fullstack developer