Configuración de un entorno de desarrollo de JavaScript local para Azure

Al crear aplicaciones en la nube, los desarrolladores habitualmente prefieren probar el código en sus estaciones de trabajo locales antes de implementar el código en un entorno de nube como Azure. La ventaja del desarrollo local es la amplia variedad de herramientas que ofrece, además de un entorno conocido.

En este artículo se proporcionan instrucciones de configuración para crear y validar un entorno de desarrollo local adecuado para JavaScript en Azure.

Creación de suscripción puntual

Los recursos de Azure se crean dentro de una suscripción y un grupo de recursos.

Tipo	Descripción
Suscripción de prueba	Cree una suscripción de evaluación gratuita.
Suscripción existente	Si ya tiene una suscripción, acceda a la suscripción existente en Azure Portal, la CLI de Azure o los SDK de Azure para JavaScript.
En varias suscripciones	Si necesita administrar varias suscripciones, aprenda cómo crear un grupo de administración con JavaScript.

Instalación de software por única vez

Desarrollo de Azure con JavaScript en la estación de trabajo local; se recomienda instalar lo siguiente:

Nombre/instalador	Descripción
LTS de Node.js	Instale el entorno de ejecución con compatibilidad a largo plazo (LTS) más reciente para desarrollar en la estación de trabajo local.
Visual Studio Code	Visual Studio Code ofrece una experiencia de codificación excelente e integración de JavaScript, pero no es necesario. Puede usar cualquier editor de código.

Entorno de ejecución de hospedaje de Azure

Si tiene previsto usar un recurso de Azure como entorno de ejecución de hospedaje para la aplicación, como una aplicación web de Azure o Azure Functions, debe comprobar que la versión de tiempo de ejecución del entorno de desarrollo de Node.js local se corresponda con el entorno de ejecución de recursos de Azure que tiene previsto usar.

Instalaciones locales recomendadas

Se recomiendan las siguientes instalaciones comunes de la estación de trabajo local para ayudarle con las tareas de desarrollo local.

Nombre	Descripción
CLI de Azure	La CLI local o basada en la nube para crear y usar recursos de Azure.
CLI de desarrollo de Azure	Herramienta de línea de comandos centrada en desarrolladores para compilar aplicaciones en la nube en el flujo de trabajo para desarrolladores.
Extensiones de Visual Studio Code para Azure	Extensiones de VS Code al entorno de desarrollo integrado.
Git o Git para Windows	Herramientas de línea de comandos para el control de código fuente. Si lo prefiere, puede usar otras herramientas de control de código fuente.

Configuración única para la autenticación

Para usar el mismo código de autenticación en el desarrollo local y el entorno de hospedaje remoto de Azure, use DefaultAzureCredential.

Creación de un grupo de recursos para el proyecto

Azure Portal

1. Abra Azure Portal en un explorador web.

2. En la barra de búsqueda, escriba grupos de recursos y selecciónelo.

3. Seleccione + Create (+ Crear).

4. Escriba la configuración del grupo de recursos:

   Propiedad	Valor
   Suscripción	Seleccione su suscripción.
   Resource group	Escriba el nombre del grupo de recursos. Este nombre de grupo de recursos se usa como parte de un URI de recursos al acceder a Resource Manager (plano de administración). El nombre no se usa para el control (por ejemplo, la creación de una base de datos) o el plano de datos (insertar datos en una tabla).
   Region	Seleccione una región geográfica para el grupo de recursos.

5. Seleccione Revisar y crear para comenzar la validación.

6. Cuando la validación se haya realizado correctamente, seleccione Crear.

Visual Studio Code

1. Abra la paleta de comandos Ctrl + Mayús + P.

2. Busque crear grupo de recursos y selecciónelo.

3. Responda a las indicaciones mediante la siguiente configuración:

   Prompt	Valor
   Seleccionar suscripción	Inicie sesión en Azure si se le solicita. Seleccione una suscripción existente o cree una cuenta de Azure si no tiene una.
   Escriba el nombre del nuevo grupo de recursos.	Escriba el nombre del grupo de recursos. Este nombre de grupo de recursos se usa como parte de un URI de recursos al acceder a Resource Manager (plano de administración). El nombre no se usa para el control (por ejemplo, la creación de una base de datos) o el plano de datos (insertar datos en una tabla).
   Seleccione una ubicación para los nuevos recursos.	Seleccione una región geográfica para el grupo de recursos.

CLI de Azure

1. Inicie sesión en Azure:

   az login
   

   Complete la autenticación en un explorador.

2. Enumere los nombres y los identificadores de suscripción. Copie el valor subscriptionId para usar el comando siguiente.

   az account subscription list --output table 
   

3. Establezca la suscripción predeterminada, que usan los comandos siguientes:

   az account set --subscription YOUR_SUBSCRIPTION_ID
   

4. Seleccione de una lista de ubicaciones admitidas para la suscripción. Copie el valor Name de una región cercana.

   az account list-locations --output table
   

5. Use la siguiente CLI de Azure para crear un grupo de recursos con el nombre o el identificador de la suscripción:

   az group create --name "YOUR_RESOURCE_GROUP_NAME" --location YOUR_REGION
   

   Por ejemplo:

   az group create --name "my-azure-app" --location westus
   

Trabajo con Azure y las bibliotecas cliente del SDK de Azure

Las bibliotecas del SDK de Azure se proporcionan individualmente para cada servicio. Instale cada biblioteca según el servicio de Azure que necesite usar.

Cada proyecto nuevo que cree con Azure deberá:

• Crear recursos de Azure y guardar las claves o la configuración asociadas en una ubicación segura.
• Instalar las bibliotecas de Azure SDK desde NPM o Yarn.
• Usar su credencial de entidad de servicio local para autenticarse en Azure SDK y, después, usar la información de configuración para acceder a servicios específicos.

Protección de la información de configuración

Tiene varias opciones para almacenar la información de configuración:

• Azure Key Vault para crear y mantener las claves usadas para el acceso y el cifrado de los recursos, aplicaciones y soluciones en la nube.
• Dotenv es un conocido paquete de npm para leer variables de entorno desde un archivo .env. Asegúrese de agregar el archivo .env al archivo .gitignore para que el archivo .env no se inserte en el repositorio de control de código fuente. Obtenga más información sobre las variables de entorno en aplicaciones web para Azure.

Creación de variables de entorno para las bibliotecas de Azure

Para usar la configuración de Azure que las bibliotecas de Azure SDK necesitan para acceder a la nube de Azure, establezca los valores más comunes en las variables de entorno. Los siguientes comandos establecen las variables de entorno para la estación de trabajo local.

En los ejemplos siguientes, el identificador de cliente es el identificador y el secreto de la entidad de servicio.

bash

AZURE_SUBSCRIPTION_ID="<REPLACE-WITH-YOUR-AZURE-SUBSCRIPTION-ID>"
AZURE_TENANT_ID="<REPLACE-WITH-YOUR-AZURE-TENANT-ID>"
AZURE_CLIENT_ID="<REPLACE-WITH-YOUR-AZURE-CLIENT-ID>"
AZURE_CLIENT_SECRET="<REPLACE-WITH-YOUR-AZURE-CLIENT-SECRET>"

cmd

set AZURE_SUBSCRIPTION_ID="<REPLACE-WITH-YOUR-AZURE-SUBSCRIPTION-ID>"
set AZURE_TENANT_ID="<REPLACE-WITH-YOUR-AZURE-TENANT-ID>"
set AZURE_CLIENT_ID="<REPLACE-WITH-YOUR-AZURE-CLIENT-ID>"
set AZURE_CLIENT_SECRET="<REPLACE-WITH-YOUR-AZURE-CLIENT-SECRET>"

Reemplace los valores que se muestran en estos comandos por los de su entidad de servicio específica.

Creación del archivo .env

Otro mecanismo común es usar el paquete DOTENV de NPM para crear un archivo .env para esta configuración. Si piensa usar un archivo .env, asegúrese de no insertarlo en el repositorio de control de código fuente. Agregar el archivo .env al archivo .ignore de Git es la manera estándar de asegurarse de que esa configuración se inserte en el repositorio de control de código fuente.

Instalar paquetes de npm

En cada proyecto, se recomienda crear siempre una carpeta independiente y su propio archivo package.json mediante los pasos siguientes:

1. Abra un terminal, el símbolo del sistema o el shell de Bash y cree una nueva carpeta para el proyecto. Después, vaya a la nueva carpeta.

   mkdir MY-NEW-PROJECT && cd MY-NEW-PROJECT
   

2. Inicialice el archivo de paquete:

   npm init -y
   

   Esto crea el archivo package.json e inicializa las propiedades mínimas.

3. Instale las bibliotecas de Azure SDK que necesite, como este ejemplo:

   npm install @azure/ai-text-analytics@5.0.0
   

Uso del control de código fuente con Visual Studio Code

Se recomienda adquirir el hábito de crear un repositorio de control de código fuente cada vez que se inicia un proyecto. Puede hacerlo desde Visual Studio Code.

1. En Visual Studio Code, seleccione el icono de control de código fuente para abrir el explorador Control de código fuente; a continuación, seleccione Inicializar repositorio para inicializar un repositorio de Git local:

   

2. Una vez que esté inicializado el repositorio y que tenga archivos para almacenar en el control de código fuente, escriba el mensaje Initial commit y seleccione la marca de verificación para crear la confirmación inicial de los archivos de código fuente.

   

3. Cree un nuevo repositorio en GitHub o Azure DevOps y copie la dirección URL del repositorio para los pasos siguientes.

4. En el terminal integrado de Visual Studio, use el siguiente comando git para agregar el repositorio remoto al repositorio local. Reemplace YOUR-ALIAS y YOUR-REPOSITORY con sus propios valores.

   git remote add origin https://github.com/YOUR-ALIAS/YOUR-REPOSITORY
   

Visual Studio Code incluye muchas características de Git integradas. Para más información, consulte Uso del control de versiones en VS Code.

Pasos siguientes

• Creación y uso de una entidad de servicio
• Autenticación con los módulos de Azure para Node.js