Eventos
Compilación de Intelligent Apps
17 mar, 23 - 21 mar, 23
Únase a la serie de reuniones para crear soluciones de inteligencia artificial escalables basadas en casos de uso reales con compañeros desarrolladores y expertos.
Regístrese ahoraEste explorador ya no se admite.
Actualice a Microsoft Edge para aprovechar las características y actualizaciones de seguridad más recientes, y disponer de soporte técnico.
SE APLICA A: Desarrollador | Básico | Estándar | Premium
En este tutorial se describe cómo autohospedar el portal para desarrolladores de API Management. El autohospedaje es una de las varias opciones para ampliar la funcionalidad del portal para desarrolladores. Por ejemplo, puede autohospedar varios portales para la instancia de API Management, con características diferentes. Al autohospedar un portal, el usuario se convierte en su administrador y es responsable de las actualizaciones.
Importante
Considere la posibilidad de autohospedar el portal para desarrolladores solo cuando necesite modificar el núcleo del código base del portal para desarrolladores. Esta opción requiere configuración avanzada, como por ejemplo:
Nota
El portal autohospedado no admite controles de visibilidad y acceso disponibles en la versión administrada del portal para desarrolladores.
Si ya ha cargado o modificado archivos multimedia en el portal administrado, consulte Pasaje de administrado a autohospedado, más adelante en este artículo.
Para configurar un entorno de desarrollo local, tiene que tener:
v10.15.0
o posterior) y npm en la máquina. Consulte Descarga e instalación de Node.js y npm.Para configurar el entorno local, tendrá que clonar el repositorio, cambiar a la versión más reciente del portal para desarrolladores e instalar paquetes npm.
Clone el repositorio api-management-developer-portal desde GitHub:
git clone https://github.com/Azure/api-management-developer-portal.git
Vaya a la copia local del repositorio:
cd api-management-developer-portal
Extraiga la versión más reciente del portal.
Antes de ejecutar el código siguiente, compruebe la etiqueta de versión actual en la sección Releases del repositorio y reemplace el valor <current-release-tag>
por la etiqueta de versión más reciente.
git checkout <current-release-tag>
Instale los paquetes npm disponibles:
npm install
Sugerencia
Use siempre la versión más reciente del portal y mantenga actualizado el portal bifurcado. Los ingenieros de software usan la rama master
de este repositorio con fines de desarrollo diario. Tiene versiones inestables del software.
El portal para desarrolladores requiere que la API REST de API Management administre el contenido.
Vaya a la carpeta src
y abra el archivo config.design.json
.
{
"environment": "development",
"managementApiUrl": "https://<service-name>.management.azure-api.net",
"managementApiAccessToken": "SharedAccessSignature ...",
"backendUrl": "https://<service-name>.developer.azure-api.net",
"useHipCaptcha": false,
"integration": {
"googleFonts": {
"apiKey": "..."
}
}
}
Configure el archivo:
En el valor managementApiUrl
, reemplace <service-name>
por el nombre de la instancia de API Management. Si configuró un dominio personalizado, úselo en su lugar (por ejemplo, https://management.contoso.com
).
{
...
"managementApiUrl": "https://contoso-api.management.azure-api.net"
...
Cree manualmente un token de SAS para habilitar el acceso directo de la API REST a la instancia de API Management.
Copie el token generado y péguelo como valor managementApiAccessToken
.
En el valor backendUrl
, reemplace <service-name>
por el nombre de la instancia de API Management. Si configuró un dominio personalizado, úselo en su lugar (por ejemplo, https://portal.contoso.com
).
{
...
"backendUrl": "https://contoso-api.developer.azure-api.net"
...
Si quiere habilitar CAPTCHA en el portal para desarrolladores, especifique "useHipCaptcha": true
. Asegúrese de configurar las opciones de CORS para el back-end del portal para desarrolladores.
En integration
, en googleFonts
, establezca opcionalmente apiKey
en una clave de API de Google que permita el acceso a la API para desarrolladores de fuentes web. Esta clave solo es necesaria si desea agregar fuentes de Google en la sección Estilos del editor del portal para desarrolladores.
Si aún no tiene una clave, puede configurar una mediante la consola de Google Cloud. Siga estos pasos:
apiKey
en el archivo config.design.json
.Vaya a la carpeta src
y abra el archivo config.publish.json
.
{
"environment": "publishing",
"managementApiUrl": "https://<service-name>.management.azure-api.net",
"managementApiAccessToken": "SharedAccessSignature...",
"useHipCaptcha": false
}
Configure el archivo:
Copie los valores managementApiUrl
y managementApiAccessToken
del archivo de configuración anterior y péguelos.
Si quiere habilitar CAPTCHA en el portal para desarrolladores, especifique "useHipCaptcha": true
. Asegúrese de configurar las opciones de CORS para el back-end del portal para desarrolladores.
Vaya a la carpeta src
y abra el archivo config.runtime.json
.
{
"environment": "runtime",
"managementApiUrl": "https://<service-name>.management.azure-api.net",
"backendUrl": "https://<service-name>.developer.azure-api.net"
}
Configure el archivo:
Copie el valor managementApiUrl
del archivo de configuración anterior y péguelo.
En el valor backendUrl
, reemplace <service-name>
por el nombre de la instancia de API Management. Si configuró un dominio personalizado, úselo en su lugar (por ejemplo, https://portal.contoso.com
).
{
...
"backendUrl": "https://contoso-api.developer.azure-api.net"
...
Para configurar la característica Sitio web estático en la cuenta de almacenamiento, proporcione las rutas a las páginas de índice y error:
Vaya a la cuenta de almacenamiento en Azure Portal y seleccione Sitio web estático en el menú de la izquierda.
En la página Sitio web estático, seleccione Habilitado.
En el campo Nombre del documento de índice, escriba index.html.
En el campo Ruta de acceso del documento de error, escriba 404/index.html.
Seleccione Guardar.
Configure las opciones de uso compartido de recursos entre orígenes (CORS) para la c:
Vaya a la cuenta de almacenamiento en Azure Portal y seleccione CORS en el menú de la izquierda.
En la pestaña Blob service, configure las siguientes reglas:
Regla | Valor |
---|---|
Orígenes permitidos | * |
Métodos permitidos | Seleccione todos los verbos HTTP. |
Encabezados permitidos | * |
Encabezados expuestos | * |
Antigüedad máxima | 0 |
Seleccione Guardar.
Configure opciones de CORS para el back-end del portal para desarrolladores para permitir solicitudes que se originen a través del portal para desarrolladores autohospedado. El portal para desarrolladores autohospedado se basa en el punto de conexión back-end del portal (establecido en los backendUrl
archivos de configuración) para habilitar varias características, incluidas las siguientes:
Para agregar las opciones de CORS:
https://www.contoso.com
localhost
para el desarrollo local (si procede), como http://localhost:8080
o https://localhost:8080
Ahora puede compilar y ejecutar una instancia local del portal en el modo de desarrollo. En el modo de desarrollo, todas las optimizaciones están desactivadas y los mapas de origen están activados.
Ejecute el siguiente comando:
npm start
Después de un breve período, el explorador predeterminado se abre automáticamente con la instancia local del portal para desarrolladores. La dirección predeterminada es http://localhost:8080
, pero el puerto puede cambiar si 8080
ya está ocupado. Todo cambio en el código base del proyecto desencadena una recompilación y actualiza la ventana del explorador.
Use el editor visual para llevar a cabo estas tareas:
Consulte Tutorial: Acceso y personalización del portal para desarrolladores. Trata los aspectos básicos de la interfaz de usuario administrativa y enumera los cambios recomendados en el contenido predeterminado. Guarde todos los cambios en el entorno local y presione CTRL+C para cerrar.
Los datos del portal se originan en forma de objetos de tipo seguro. El siguiente comando los traduce en archivos estáticos y coloca la salida en el directorio ./dist/website
:
npm run publish
Use la CLI de Azure para cargar los archivos estáticos generados localmente en un blob y asegúrese de que los visitantes pueden acceder a ellos:
Abra el símbolo del sistema de Windows, PowerShell u otro shell de comandos.
Ejecute el siguiente comando de la CLI de Azure.
Reemplace <account-connection-string>
por la cadena de conexión de la cuenta de almacenamiento. Puede obtenerla de la sección Claves de acceso de la cuenta de almacenamiento.
az storage blob upload-batch --source dist/website \
--destination '$web' \
--connection-string <account-connection-string>
El sitio web ahora está activo con el nombre de host especificado en las propiedades de Azure Storage (Punto de conexión principal en Sitios web estáticos).
Reemplace la dirección URL del portal para desarrolladores en las plantillas de notificación de API Management para que apunten al portal autohospedado. Consulte Configuración de notificaciones y plantillas de correo electrónico en Azure API Management.
En concreto, lleve a cabo los siguientes cambios en las plantillas predeterminadas:
Nota
Los valores en las siguientes secciones Actualizado suponen que el portal se hospeda en https://portal.contoso.com/.
Actualice la dirección URL del portal para desarrolladores en la plantilla de notificación Confirmación de cambio de correo electrónico:
Contenido original
<a id="confirmUrl" href="$ConfirmUrl" style="text-decoration:none">
<strong>$ConfirmUrl</strong></a>
Updated
<a id="confirmUrl" href="https://portal.contoso.com/signup?$ConfirmQuery" style="text-decoration:none">
<strong>https://portal.contoso.com/signup?$ConfirmQuery</strong></a>
Actualice la dirección URL del portal para desarrolladores en la plantilla de notificación Confirmación de nueva cuenta de desarrollador:
Contenido original
<a id="confirmUrl" href="$ConfirmUrl" style="text-decoration:none">
<strong>$ConfirmUrl</strong></a>
Updated
<a id="confirmUrl" href="https://portal.contoso.com/signup?$ConfirmQuery" style="text-decoration:none">
<strong>https://portal.contoso.com/signup?$ConfirmQuery</strong></a>
Actualice la dirección URL del portal para desarrolladores en la plantilla de notificación Invitar usuario:
Contenido original
<a href="$ConfirmUrl">$ConfirmUrl</a>
Updated
<a href="https://portal.contoso.com/confirm-v2/identities/basic/invite?$ConfirmQuery">https://portal.contoso.com/confirm-v2/identities/basic/invite?$ConfirmQuery</a>
Actualice la dirección URL del portal para desarrolladores en la plantilla de notificación Nueva suscripción activada:
Contenido original
Thank you for subscribing to the <a href="http://$DevPortalUrl/products/$ProdId"><strong>$ProdName</strong></a> and welcome to the $OrganizationName developer community. We are delighted to have you as part of the team and are looking forward to the amazing applications you will build using our API!
Updated
Thank you for subscribing to the <a href="https://portal.contoso.com/product#product=$ProdId"><strong>$ProdName</strong></a> and welcome to the $OrganizationName developer community. We are delighted to have you as part of the team and are looking forward to the amazing applications you will build using our API!
Contenido original
Visit the developer <a href="http://$DevPortalUrl/developer">profile area</a> to manage your subscription and subscription keys
Updated
Visit the developer <a href="https://portal.contoso.com/profile">profile area</a> to manage your subscription and subscription keys
Contenido original
<a href="http://$DevPortalUrl/docs/services?product=$ProdId">Learn about the API</a>
Updated
<a href="https://portal.contoso.com/product#product=$ProdId">Learn about the API</a>
Contenido original
<p style="font-size:12pt;font-family:'Segoe UI'">
<strong>
<a href="http://$DevPortalUrl/applications">Feature your app in the app gallery</a>
</strong>
</p>
<p style="font-size:12pt;font-family:'Segoe UI'">You can publish your application on our gallery for increased visibility to potential new users.</p>
<p style="font-size:12pt;font-family:'Segoe UI'">
<strong>
<a href="http://$DevPortalUrl/issues">Stay in touch</a>
</strong>
</p>
<p style="font-size:12pt;font-family:'Segoe UI'">
If you have an issue, a question, a suggestion, a request, or if you just want to tell us something, go to the <a href="http://$DevPortalUrl/issues">Issues</a> page on the developer portal and create a new topic.
</p>
Updated
<!--Remove the entire block of HTML code above.-->
Actualice la dirección URL del portal para desarrolladores en la plantilla de notificación Confirmación de cambio de contraseña:
Contenido original
<a href="$DevPortalUrl">$DevPortalUrl</a>
Updated
<a href="https://portal.contoso.com/confirm-password?$ConfirmQuery">https://portal.contoso.com/confirm-password?$ConfirmQuery</a>
Actualice la dirección URL del portal para desarrolladores en cualquier plantilla que tenga un vínculo en el pie de página:
Contenido original
<a href="$DevPortalUrl">$DevPortalUrl</a>
Updated
<a href="https://portal.contoso.com/">https://portal.contoso.com/</a>
Con el tiempo, es posible que los requisitos empresariales cambien. Puede acabar en una situación en la que la versión administrada del portal para desarrolladores de API Management ya no satisfaga sus necesidades. Por ejemplo, un nuevo requisito puede obligarle a crear un widget personalizado que se integre en un proveedor de datos externo. A diferencia de la versión administrada, la versión autohospedada del portal ofrece total flexibilidad y extensibilidad.
Puede realizar la transición de la versión administrada a una versión autohospedada dentro de la misma instancia de servicio de API Management. El proceso conserva las modificaciones que ha hecho en la versión administrada del portal. Asegúrese de hacer una copia de seguridad del contenido del portal de antemano. Puede encontrar el script de copia de seguridad en la carpeta scripts
en el repositorio de GitHub del portal para desarrolladores de API Management.
El proceso de conversión es casi idéntico a la configuración de un portal autohospedado genérico, como se muestra en los pasos anteriores de este artículo. Hay una excepción en el paso de configuración. La cuenta de almacenamiento del archivo config.design.json
debe ser la misma que la cuenta de almacenamiento de la versión administrada del portal. Consulte Tutorial: Uso de una identidad asignada por el sistema de una máquina virtual Linux para acceder a Azure Storage con las credenciales de SAS para obtener instrucciones sobre cómo recuperar la dirección URL de SAS.
Sugerencia
Se recomienda usar una cuenta de almacenamiento independiente en el archivo config.publish.json
. Este enfoque le da más control y simplifica la administración del servicio de hospedaje del portal.
Eventos
Compilación de Intelligent Apps
17 mar, 23 - 21 mar, 23
Únase a la serie de reuniones para crear soluciones de inteligencia artificial escalables basadas en casos de uso reales con compañeros desarrolladores y expertos.
Regístrese ahora