Creación de una imagen de contenedor a partir del proyecto local de JavaScript

  • Artículo

La ejecución de una aplicación de JavaScript en un contenedor permite implementar una experiencia coherente para los usuarios de la aplicación web. Dado que Docker presenta una curva de aprendizaje empinada, Visual Studio Code proporciona una extensión que simplifica las tareas comunes de Docker.

En este artículo se incluye información para administrar los contenedores con la extensión de Docker. Como alternativa, puede usar Visual Studio Code para administrar el contenedor desde DevContainers.

Preparación del entorno

Docker debe estar instalado y funcionando. Para comprobarlo, ejecute el siguiente comando:

docker system info

Este comando devuelve un error si Docker no está instalado y funcionando. Si Se está ejecutando Docker, devuelve información de versión y configuración.

Client:
 Context:    default
 Debug Mode: false
 Plugins:
  buildx: Build with BuildKit (Docker Inc., v0.6.3)
  compose: Docker Compose (Docker Inc., v2.1.1)
  scan: Docker Scan (Docker Inc., 0.9.0)

... removed for brevity

Creación de un contenedor

  1. Abra Visual Studio en un proyecto de JavaScript existente.

  2. En la barra de actividades, seleccione el icono Extensiones y dockerbusque y seleccione la extensión de Docker.

  3. Instale la extensión Docker y vuelva a cargar Visual Studio Code.

    Installing the Docker extension for Visual Studio Code

    La extensión de Docker para Visual Studio Code incluye un comando para generar un Dockerfile y el archivo docker-compose.yml para un proyecto existente.

  4. Seleccione el icono de Docker en la barra de actividades y, luego, vea los contenedores de Docker en la barra lateral.

    Search for `git branch` and select `Git: Create Branch`.

Visualización de los comandos de Docker disponibles

Para ver los comandos de Docker disponibles, muestre la paleta de comandos (F1) y escriba docker.

Commands supported by the Docker extension for Visual Studio Code

Creación de un Dockerfile en el proyecto

  1. Si utiliza control de código fuente, como git, asegúrese de que no tiene ningún otro cambio. Así verá qué archivos se crean automáticamente.

  2. Seleccione Docker: Agregar archivos de Docker al área de trabajo con la configuración del proyecto.

    Esta configuración es común para proyectos de Node.js:

    Configuración Valor
    Plataforma de aplicaciones Node.js
    Package.json package.json
    Port to expose (Puerto que se expone) 8080 o el valor detectado automáticamente
    Include optional docker files (.dockerignore) (Incluir archivos de Docker opcionales [.dockerignore]) sí

    Generated Dockerfile in Visual Studio Code

    El comando Docker genera archivos Dockerfile y Docker-Compose completos que puede empezar a usar inmediatamente.

Compilación de imágenes desde el proyecto

  1. Seleccione F1, escriba dockerb en la paleta de comandos y seleccione el comando Docker: Build Image .

  2. Elija el Dockerfile que acaba de generar.

  3. Si el archivo package.json tiene una propiedad name, se usa como nombre de la imagen del contenedor. Si no tiene un archivo package.json, especifique una etiqueta con el formato ALIAS/IMAGE-NAME, donde ALIAS es el alias de Docker e IMAGE-NAME es el nombre de la imagen del proyecto. Una etiqueta de ejemplo es diberry/express-web-app.

  4. Seleccione Entrar para iniciar la ventana del terminal integrado, que muestra la salida de la imagen de Docker que se está creando.

    Docker image build output

    El comando automatiza el proceso de ejecutar docker build.

  5. Seleccione el icono de Docker en la barra de actividades y, luego, elija Imágenes para ver la nueva imagen en la lista de imágenes.

    También puede observar otras nuevas imágenes en la lista. Docker extrae la imagen en la que se basa el contenedor.

Ejecución del proyecto de contenedor local

  1. Seleccione el icono de Docker en la barra de actividades.

  2. Haga clic con el botón derecho en el nombre de la imagen en la lista Imágenes y seleccione Ejecutar.

    Right-click the image name from the list of Images, and select Run..

Inserción de la imagen de contenedor local en DockerHub

La imagen debe estar disponible en un registro para poder crear una aplicación web de Azure a partir de ella. Puede estar disponible públicamente en un registro de la comunidad o en un registro privado al que se accede mediante autenticación, como Azure Container Registry.

Para insertar la imagen, asegúrese de que ya se ha autenticado en DockerHub; para ello, ejecute docker login desde la CLI y especifique las credenciales de la cuenta.

  1. En Visual Studio Code, abra la paleta de comandos con F1.
  2. Escriba dockerpush y seleccione el comando Docker: Push.
  3. Seleccione la etiqueta de imagen que acaba de crear (por ejemplo, diberry/express-web-app) y presione Entrar.
  4. El comando automatiza la llamada de docker push y muestra la salida en el terminal integrado.

Inserción de una imagen de contenedor local en Azure Container Registry

Lea los pasos para autenticarse e insertar imágenes en su propia instancia de Azure Container Registry.

Pasos siguientes