Saltar al contenido

Implemente el frontend SAPUI5 en Kyma Runtime

Este tutorial espera que la API de implementación para MSSQL Endpoint en Kyma Runtime esté completo y depende de la base de datos que se ejecute en Kyma Runtime.

Incluye: Uso de la imagen de Docker de SAPUI5 durante el tiempo de ejecución de Kyma:

  • A Kubernetes Deployment de la interfaz de imagen con el ConfigMap ubicado en el volumen
  • A Kubernetes ConfigMap que contiene la URL con la API de backend
  • El servicio de Kubernetes se utiliza para exponer la aplicación a otros recursos de Kubernetes.
  • Un Kyma APIRule exponer la aplicación frontend a Internet

Paso 1: Clonar el repositorio de Git

  1. Copie la URL del repositorio.

En su navegador, vaya a kyma-runtime-extension-examples. Este repositorio contiene una colección de aplicaciones Kyma de muestra que se utilizarán durante el tutorial.

Selecciona el Código y seleccione una de las opciones para descargar el código localmente o ejecute el siguiente comando dentro de su CLI en la ubicación de la carpeta que desee:

git clone https://github.com/SAP-samples/kyma-runtime-extension-samples

Hecho

Inicie sesión para responder la pregunta

Paso 2: examinar la muestra

  1. Abre el frontend-ui5-mssql directorio en el editor que necesita.

  2. Examine el contenido de la muestra.

  3. Puede encontrar muchos directorios relacionados con la aplicación UI5.

  4. El es docker El Dockerfile utilizado para generar una imagen de Docker está en el directorio. La imagen se construye en dos pasos para crear una imagen pequeña. En el primer paso, un NodeJS Se utiliza una imagen que copia el contenido relacionado del proyecto en la imagen y es tomada por la aplicación. Luego, la aplicación incorporada se copia en nginx imagen con la configuración predeterminada exponiendo la aplicación al puerto 80.

  5. Dentro de k8s un directorio donde puede encontrar los recursos de Kubernetes / Kyma que aplicará a su tiempo de ejecución de Kyma.

Hecho

Inicie sesión para responder la pregunta

Paso 3: ejecutar una aplicación localmente

  1. Dentro de frontend-ui5-mssql directorio, ejecute el siguiente comando usando su CLI para instalar las dependencias de la aplicación:

    npm install
    
  2. Dentro del proyecto, abra el webapp/config.json archivo y ajuste API_URL por reemplazo <cluster domain> para que coincida con el dominio del clúster de tiempo de ejecución de Kyma. Este debería ser el valor de la regla API creada en el paso 6 del tutorial de Endpoint API To Use MSSQL en Kyma Runtime.

    {
      "API_URL": "https://api-mssql-go.*******.kyma.shoot.live.k8s-hana.ondemand.com"
    }
    
  3. Para iniciar la aplicación, ejecute el siguiente comando. Esto debería instalar automáticamente la aplicación en su navegador.

    npm run-script start
    

    Prensa control-c la aplicación actual se detendrá.

Hecho

Inicie sesión para responder la pregunta

Paso 4: toma una imagen de Docker

Ejecute los siguientes comandos desde frontend-ui5-mssql directorio usando su CLI. Asegúrese de que el valor de <your-docker-id> con ID de cuenta de Docker.

  1. Para tomar una imagen de Docker, ejecute este comando:

    docker build -t <your-docker-id>/fe-ui5-mssql -f docker/Dockerfile .
    
  2. Para enviar una imagen de Docker a su repositorio de Docker, ejecute este comando:

    docker push <your-docker-id>/fe-ui5-mssql
    

Hecho

Inicie sesión para responder la pregunta

Paso 5: Aplicar recursos al tiempo de ejecución de Kyma

Puede encontrar las definiciones de recursos en el k8s carpeta. Si ha realizado algún cambio en la configuración, es posible que estos archivos también deban actualizarse. Los siguientes archivos se encuentran en la carpeta correspondiente a este tutorial:

  • apirule.yaml: define el punto final de la API que la aplicación revela en Internet. Este punto final no define ninguna estrategia de acceso de autenticación y debe desactivarse cuando no esté en uso.
  • configmap.yaml: definido API_URL que muestra el punto final utilizado para la API de línea de comandos. Debe ajustarse para reflejar el dominio de tiempo de ejecución de Kyma.
  • deployment.yaml: define la definición de implementación para la aplicación SAPUI5, así como un servicio utilizado para la comunicación. Esta definición se refiere a la configmap.yaml por nombre. Se utiliza para webapp/config.json de la aplicación.
  1. Empiece por el dev Nombre del espacio si aún no está presente:

    kubectl create namespace dev
    
  2. Dentro del proyecto, abra el k8s/configmap.yaml archivo y ajuste API_URL por reemplazo <cluster domain> para que coincida con el dominio del clúster de tiempo de ejecución de Kyma:

    kind: ConfigMap
    apiVersion: v1
    metadata:
      name: fe-ui5-mssql
      labels:
        app: fe-ui5-mssql
    data:
      config.json: |-
        {
          "API_URL": "https://api-mssql-go.*******.kyma.shoot.live.k8s-hana.ondemand.com"
        }
    
  3. Pon el ConfigMap:

    kubectl -n dev apply -f ./k8s/configmap.yaml
    
  4. Dentro de deployment.yaml, ajustar valor spec.template.spec.containers.image para usar su imagen de Docker. Solicite la implementación:

    kubectl -n dev apply -f ./k8s/deployment.yaml
    
  5. Pon el APIRule:

    kubectl -n dev apply -f ./k8s/apirule.yaml
    

El es APIRule Se crea un punto final similar al que se usa a continuación para abrir la aplicación:

https: // fe-ui5-mssql. .kyma.shoot.live.k8s-hana.ondemand.com

Paso 6: Abra la aplicación de interfaz de usuario

  1. Abra la consola de tiempo de ejecución de Kyma

  2. Selecciona el dev Espacio de nombres.

  3. En el menú, seleccione Configuración> APIRules.

  4. Selecciona el Anfitrión entrada para el fe-ui5-mssql APIRule para abrir la aplicación en el navegador. Esto debería verse así:
    https://fe-ui5-mssql.*******.kyma.shoot.live.k8s-hana.ondemand.com

Hecho

Inicie sesión para responder la pregunta