Déploiement d

Catégorie

BTP

Publié

15. Feb. 2026

Auteur

Le déploiement d’une application Fiori Elements sur SAP BTP comprend plusieurs étapes : de la création du projet dans le Business Application Studio à la configuration appropriée jusqu’à l’intégration dans le SAP Build Work Zone Launchpad. Dans cet article, nous vous guidons à travers l’ensemble du processus.

Vue d’ensemble : Processus de déploiement

┌─────────────────────────────────────────────────────────────────────┐
│                  Déploiement d'application Fiori Elements             │
├─────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  1. Créer l'app       2. Configurer         3. Build & Deploy        │
│  ─────────────────       ────────────────       ─────────────────    │
│  ┌───────────────┐       ┌───────────────┐      ┌───────────────┐   │
│  │    BAS        │       │ manifest.json │      │   MTA Build   │   │
│  │  Generator    │  →    │  xs-app.json  │  →   │   cf deploy   │   │
│  │               │       │  mta.yaml     │      │               │   │
│  └───────────────┘       └───────────────┘      └───────────────┘   │
│                                                         │            │
│                                                         ▼            │
│                              4. Intégration Launchpad                │
│                              ─────────────────────────              │
│                              ┌───────────────────────┐              │
│                              │  SAP Build Work Zone  │              │
│                              │  • Créer tile         │              │
│                              │  • Attribuer space    │              │
│                              │  • Gérer rôles        │              │
│                              └───────────────────────┘              │
│                                                                       │
└─────────────────────────────────────────────────────────────────────┘

Prérequis

Avant de commencer le déploiement :

Prérequis	Description
RAP Service	Service OData V4 fonctionnel sur BTP ABAP Environment
BAS Dev Space	SAP Fiori Dev Space dans Business Application Studio
Cloud Foundry	Accès au BTP Subaccount avec CF-Space
Build Work Zone	Souscription SAP Build Work Zone (Standard ou Advanced)
Destination	Destination configurée vers ABAP Environment

1. Création de l’application dans Business Application Studio

Préparer le Dev Space

Si pas encore disponible, créez un Fiori Dev Space :

1. Ouvrir BAS → "Create Dev Space"
2. Nom : "FioriDevelopment"
3. Type : Sélectionner "SAP Fiori"
4. Activer les extensions :
   ☑ HTML5 Application Template
   ☑ Fiori Tools
   ☑ MTA Build Tools
5. Cliquer sur "Create Dev Space"

Générer l’application Fiori Elements

Après le démarrage du Dev Space :

1. View → Command Palette (F1)
2. Saisir "Fiori: Open Application Generator"
3. Choisir le template : "List Report Page"
4. Cliquer sur Suivant

Configurer la source de données

Source de données : "Connect to SAP System"

Sélection du service :
├── System : BTP ABAP Environment
├── ABAP Environment : [Votre Service Key]
├── System URL : (automatique depuis Service Key)
└── Service : ZUI_FLIGHTBOOK_O4 (votre service OData)

Main Entity : FlightBook
Navigation Entity : None (ou Child-Entity si disponible)

Définir les attributs du projet

Nom du projet : flightbooking
Titre de l'application : Gérer les réservations de vol
Namespace de l'application : com.mycompany
Description : Application Fiori Elements pour les réservations de vol
Version minimale SAPUI5 : 1.127.0 (ou plus récente)

Dossier du projet : /home/user/projects
Ajouter la configuration de déploiement : Oui
Ajouter la configuration FLP : Oui

Configuration du déploiement et FLP

Fournir directement lors de la génération :

Configuration de déploiement :
├── Target : Cloud Foundry
├── Nom de destination : BTP_ABAP_ENV (votre destination)
└── Ajouter l'application au managed App Router : Oui

Configuration FLP :
├── Objet sémantique : FlightBooking
├── Action : manage
├── Titre : Gérer les réservations de vol
└── Sous-titre : Créer et modifier des réservations

2. Comprendre la configuration de déploiement

Après la génération, votre projet contient plusieurs fichiers de configuration.

Structure du projet

flightbooking/
├── webapp/
│   ├── manifest.json          # Configuration de l'application
│   ├── Component.js           # Composant UI5
│   ├── i18n/
│   │   └── i18n.properties    # Traductions
│   ├── localService/          # Données mock pour test local
│   └── test/                  # Tests OPA5
├── xs-app.json                # Routage App Router
├── mta.yaml                   # Descripteur Multi-Target Application
├── package.json               # Dépendances Node.js
├── ui5.yaml                   # Configuration UI5 Build
└── ui5-deploy.yaml            # Configuration UI5 spécifique au déploiement

manifest.json

Le manifest.json est le cœur de la configuration de l’application :

{
  "_version": "1.65.0",
  "sap.app": {
    "id": "com.mycompany.flightbooking",
    "type": "application",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata4/sap/zui_flightbook_o4/srvd/sap/zui_flightbook/0001/",
        "type": "OData",
        "settings": {
          "odataVersion": "4.0"
        }
      }
    },
    "crossNavigation": {
      "inbounds": {
        "FlightBooking-manage": {
          "semanticObject": "FlightBooking",
          "action": "manage",
          "title": "{{flpTitle}}",
          "subTitle": "{{flpSubtitle}}",
          "signature": {
            "parameters": {},
            "additionalParameters": "allowed"
          }
        }
      }
    }
  },
  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.127.0",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "sap.fe.templates": {}
      }
    },
    "routing": {
      "routes": [
        {
          "pattern": ":?query:",
          "name": "FlightBookList",
          "target": "FlightBookList"
        },
        {
          "pattern": "FlightBook({key}):?query:",
          "name": "FlightBookObjectPage",
          "target": "FlightBookObjectPage"
        }
      ],
      "targets": {
        "FlightBookList": {
          "type": "Component",
          "id": "FlightBookList",
          "name": "sap.fe.templates.ListReport",
          "options": {
            "settings": {
              "contextPath": "/FlightBook",
              "variantManagement": "Page",
              "navigation": {
                "FlightBook": {
                  "detail": {
                    "route": "FlightBookObjectPage"
                  }
                }
              },
              "initialLoad": "Enabled"
            }
          }
        },
        "FlightBookObjectPage": {
          "type": "Component",
          "id": "FlightBookObjectPage",
          "name": "sap.fe.templates.ObjectPage",
          "options": {
            "settings": {
              "contextPath": "/FlightBook",
              "editableHeaderContent": false
            }
          }
        }
      }
    }
  }
}

Paramètres importants :

Propriété	Description
`sap.app.id`	ID unique de l’application (Namespace + Nom)
`dataSources.mainService.uri`	Chemin vers le service OData
`crossNavigation.inbounds`	Intégration Launchpad (Semantic Object + Action)
`variantManagement`	Enregistrer les vues spécifiques à l’utilisateur
`initialLoad`	Charger les données directement au démarrage

xs-app.json

L’Application Router utilise ce fichier pour le routage :

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/sap/opu/odata4/(.*)$",
      "target": "/sap/opu/odata4/$1",
      "destination": "BTP_ABAP_ENV",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

Explication des routes :

Route	Objectif
`/sap/opu/odata4/(.*)`	Transmettre les requêtes OData à ABAP Environment
`^(.*)$`	Toutes les autres requêtes (HTML, JS, CSS) depuis HTML5 Repository

mta.yaml

Le Multi-Target Application Descriptor définit tous les composants :

_schema-version: '3.2"
ID: flightbooking
version: 1.0.0
description: Application Fiori Elements de réservation de vol

parameters:
  enable-parallel-deployments: true
  deploy_mode: html5-repo

build-parameters:
  before-all:
    - builder: custom
      commands:
        - npm ci
        - npx ui5 build --config=ui5-deploy.yaml --clean-dest --dest dist

modules:
  # HTML5 App Deployer
  - name: flightbooking-deployer
    type: com.sap.application.content
    path: dist
    requires:
      - name: flightbooking-html5-repo-host
        parameters:
          content-target: true

  # Destination Content
  - name: flightbooking-destination-content
    type: com.sap.application.content
    requires:
      - name: flightbooking-destination-service
        parameters:
          content-target: true
      - name: flightbooking-html5-repo-host
        parameters:
          service-key:
            name: flightbooking-html5-repo-host-key
      - name: flightbooking-uaa
        parameters:
          service-key:
            name: flightbooking-uaa-key
    parameters:
      content:
        instance:
          destinations:
            - Name: flightbooking_html5_repo_host
              ServiceInstanceName: flightbooking-html5-repo-host
              ServiceKeyName: flightbooking-html5-repo-host-key
              sap.cloud.service: com.mycompany.flightbooking
            - Authentication: OAuth2UserTokenExchange
              Name: flightbooking_uaa
              ServiceInstanceName: flightbooking-uaa
              ServiceKeyName: flightbooking-uaa-key
              sap.cloud.service: com.mycompany.flightbooking
          existing_destinations_policy: update

resources:
  # HTML5 Application Repository
  - name: flightbooking-html5-repo-host
    type: org.cloudfoundry.managed-service
    parameters:
      service: html5-apps-repo
      service-plan: app-host

  # Destination Service
  - name: flightbooking-destination-service
    type: org.cloudfoundry.managed-service
    parameters:
      service: destination
      service-plan: lite
      config:
        HTML5Runtime_enabled: true

  # UAA Service
  - name: flightbooking-uaa
    type: org.cloudfoundry.managed-service
    parameters:
      service: xsuaa
      service-plan: application
      path: ./xs-security.json

xs-security.json

Définit la configuration de sécurité :

{
  "xsappname": "flightbooking",
  "tenant-mode": "dedicated",
  "scopes": [],
  "attributes": [],
  "role-templates": [],
  "oauth2-configuration": {
    "redirect-uris": [
      "https://*.cfapps.*.hana.ondemand.com/**"
    ]
  }
}

3. Processus de déploiement étape par étape

Étape 1 : Connexion Cloud Foundry

Dans le terminal BAS :

# Connexion CF CLI
cf login -a https://api.cf.eu10.hana.ondemand.com

# Sélectionner Org et Space
cf target -o my-org -s dev

Étape 2 : Vérifier la destination

Dans le BTP Cockpit sous Connectivity → Destinations, une destination vers l’ABAP Environment doit exister :

Destination : BTP_ABAP_ENV
Type : HTTP
URL : https://<abap-env-host>.abap.eu10.hana.ondemand.com
Type de proxy : Internet
Authentication : OAuth2SAMLBearerAssertion

Propriétés supplémentaires :
├── sap-client : 100
├── HTML5.DynamicDestination : true
└── WebIDEUsage : odata_gen,odata_abap

Étape 3 : MTA Build

# Dans le répertoire du projet
cd /home/user/projects/flightbooking

# Exécuter MTA Build
mbt build

# Résultat : mta_archives/flightbooking_1.0.0.mtar

Le processus de build :

┌─────────────────────────────────────────────────────────┐
│                    MTA Build                              │
├─────────────────────────────────────────────────────────┤
│                                                           │
│  1. npm ci                                               │
│     └── Installer les dépendances                       │
│                                                           │
│  2. npx ui5 build                                        │
│     └── Compiler l'application UI5                      │
│     └── Minifier                                        │
│     └── Créer le répertoire dist/                       │
│                                                           │
│  3. mbt build                                            │
│     └── Assembler les modules                           │
│     └── Créer l'archive .mtar                           │
│                                                           │
│  Output : mta_archives/flightbooking_1.0.0.mtar          │
│                                                           │
└─────────────────────────────────────────────────────────┘

Étape 4 : Déploiement sur Cloud Foundry

# Déployer MTAR
cf deploy mta_archives/flightbooking_1.0.0.mtar

# Alternativement avec indicateur de progression
cf deploy mta_archives/flightbooking_1.0.0.mtar --version-rule ALL

Sortie du déploiement :

Deploying multi-target app archive flightbooking_1.0.0.mtar...

Uploading 1 of 1 done
Processing service "flightbooking-html5-repo-host"...
Processing service "flightbooking-destination-service"...
Processing service "flightbooking-uaa"...
Uploading content module "flightbooking-deployer"...
Deploying content module "flightbooking-destination-content"...

Process finished successfully.

Étape 5 : Vérifier le déploiement

# Vérifier les services
cf services

# Output :
# NAME                              SERVICE           PLAN
# flightbooking-html5-repo-host    html5-apps-repo   app-host
# flightbooking-destination-service destination      lite
# flightbooking-uaa                xsuaa             application

# Lister les applications HTML5
cf html5-list

# Output :
# name                              version   app-host-id
# com.mycompany.flightbooking       1.0.0     abc123-def456

4. Intégration Launchpad

Après le déploiement, l’application doit être intégrée dans le SAP Build Work Zone Launchpad.

Ouvrir le Site Manager

1. BTP Cockpit → Instances and Subscriptions
2. SAP Build Work Zone, standard edition → Go to Application
3. Channel Manager → Content Provider "HTML5 Apps" → Refresh

Content Explorer

1. Content Manager → Content Explorer
2. HTML5 Apps → Trouver votre application
3. Cliquer sur "Add to My Content"

Définir un rôle

1. Content Manager → Create → Role
2. Nom : "FlightBookingUser"
3. Description : "Accès à l'application de réservation de vol"
4. Attribuer les applications :
   ☑ Gérer les réservations de vol (votre application)
5. Save

Créer un groupe

1. Content Manager → Create → Group
2. Titre : "Réservation de vol"
3. Attribuer les applications :
   ☑ Gérer les réservations de vol
4. Save

Créer ou étendre le site

1. Site Directory → Create Site (ou ouvrir un existant)
2. Site Settings → Content Assignment
3. Attribuer le rôle "FlightBookingUser"
4. Save

Attribuer des utilisateurs

Dans le BTP Cockpit :

1. Security → Role Collections
2. Modifier "FlightBookingUser_RC" (créé automatiquement)
3. Users → Add User
4. Saisir l'e-mail ou l'ID utilisateur
5. Save

5. Dépannage

Problèmes courants de déploiement

Problème	Cause	Solution
”Service not found”	Service HTML5 Repo non disponible	Vérifier l’entitlement dans le Subaccount
”Destination not found”	Nom de destination incorrect dans xs-app.json	Vérifier le nom dans la configuration Destination
”CSRF token validation failed”	csrfProtection activé	Définir sur `false` dans xs-app.json
”Unauthorized”	Permission manquante	Vérifier UAA Service Key et rôles
”Cannot read property…”	Erreur de syntaxe manifest.json	Utiliser un validateur JSON

Erreurs de build

# Erreur : Module not found
# Solution : Mettre à jour les dépendances
npm ci
npm update

# Erreur : UI5 build failed
# Solution : Mettre à jour UI5 Tooling
npm install -g @ui5/cli

# Vider le cache
rm -rf node_modules
npm ci

Problèmes de connexion OData

Problème : "Failed to load metadata"

Vérifier :
1. Destination accessible ?
   → BTP Cockpit → Connectivity → Destinations → "Check Connection"

2. Service Binding actif ?
   → ADT → Ouvrir Service Binding → "Publish" pressé ?

3. CORS configuré ?
   → Destination : propriété sap-client définie ?

4. Utilisateur autorisé ?
   → Business Catalog IAM attribué à l'utilisateur ?

Problèmes Launchpad

Problème : L'application n'apparaît pas dans le Launchpad

Vérifier :
1. Content Explorer → Application visible ?
   → Sinon : Channel Manager → Refresh

2. Rôle attribué ?
   → Content Manager → Role → Application incluse ?

3. Role Collection créée ?
   → Security → Role Collections → _RC présent ?

4. Utilisateur dans Role Collection ?
   → Ouvrir Role Collection → Onglet Users

Activer le mode debug

Pour des messages d’erreur détaillés :

Paramètre URL : ?sap-ui-debug=true

Exemple :
https://mysite.launchpad.cfapps.eu10.hana.ondemand.com/site#Shell-home?sap-ui-debug=true

Analyser les logs

# Logs App Router (si managed approuter)
cf logs flightbooking-approuter --recent

# Logs HTML5 Deployer
cf logs flightbooking-deployer --recent

# Logs Service Instance
cf service flightbooking-html5-repo-host

Bonnes pratiques

Domaine	Recommandation
Versioning	Augmenter la version dans mta.yaml à chaque déploiement
Conventions de nommage	Structure de namespace uniforme (com.company.app)
Destination	`HTML5.DynamicDestination: true` pour la flexibilité
Testing	Test local avec données mock avant déploiement
CI/CD	Automatiser MTA Build dans pipeline
Caching	Activer cache-busting via version
Monitoring	Utiliser Application Logging dans BTP Cockpit

Déploiement automatisé avec CI/CD

Pour des déploiements automatisés dans un pipeline :

# Exemple GitHub Actions
name: Deploy Fiori App

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20"

      - name: Install MTA Build Tool
        run: npm install -g mbt

      - name: Install CF CLI
        run: |
          wget -q -O cf-cli.deb "https://packages.cloudfoundry.org/stable?release=debian64"
          sudo dpkg -i cf-cli.deb
          cf install-plugin multiapps -f

      - name: Build MTA
        run: |
          npm ci
          mbt build

      - name: Deploy to Cloud Foundry
        env:
          CF_API: ${{ secrets.CF_API }}
          CF_USER: ${{ secrets.CF_USER }}
          CF_PASSWORD: ${{ secrets.CF_PASSWORD }}
          CF_ORG: ${{ secrets.CF_ORG }}
          CF_SPACE: ${{ secrets.CF_SPACE }}
        run: |
          cf login -a $CF_API -u $CF_USER -p $CF_PASSWORD -o $CF_ORG -s $CF_SPACE
          cf deploy mta_archives/*.mtar -f

Conclusion

Le déploiement d’une application Fiori Elements sur SAP BTP nécessite plusieurs étapes de configuration, qui sont cependant bien supportées par le générateur Fiori. La clé réside dans la compréhension des composants individuels :

manifest.json définit les métadonnées de l’application et la connexion OData
xs-app.json configure le routage via l’App Router
mta.yaml orchestre tous les services et modules
Intégration Launchpad rend l’application accessible aux utilisateurs finaux

Avec ces connaissances, vous pouvez déployer de manière fiable les applications Fiori Elements sur BTP et les fournir dans le Launchpad.

Articles complémentaires

Business Application Studio - Configurer et utiliser BAS
SAP Build Work Zone Integration - Configuration Launchpad en détail
RAP Code-Generierung - Générer backend et frontend
CI/CD für ABAP Cloud - Déploiements automatisés