Skip to content

Deployment Guide: Ubuntu Server (Nginx + SSL)

Diese Anleitung beschreibt, wie du das fertig gebaute Excel Add-in auf deinem privaten Ubuntu-Server unter der Domain https://kabel.casademm.de hosten kannst.

Voraussetzung

  1. Ein Linux-Server (Ubuntu) mit Root/Sudo-Zugriff.
  2. Die Domain kabel.casademm.de muss im DNS-Manager deines Domain-Anbieters auf die IP-Adresse (A-Record) dieses Servers zeigen.
  3. Du hast lokal auf deinem Entwicklungsrechner den Befehl npm run build ausgeführt. Dadurch wurde ein Ordner namens dist in deinem Projektverzeichnis (C:\EWSL_Add_in\CableConsolidation\dist) erstellt.

Schritt 1: Nginx installieren

Verbinde dich per SSH mit deinem Ubuntu-Server und aktualisiere die Paketquellen, um danach den Nginx Webserver zu installieren:

sudo apt update
sudo apt install nginx -y

Stelle sicher, dass Nginx läuft und beim Systemstart automatisch mitstartet:

sudo systemctl enable nginx
sudo systemctl start nginx

Falls du die ufw Firewall nutzt, erlaube den Nginx-Traffic:

sudo ufw allow 'Nginx Full'

Schritt 2: Dateien auf den Server kopieren

  1. Erstelle auf dem Server ein Verzeichnis für deine Domain:
sudo mkdir -p /var/www/kabel.casademm.de/html
  1. Passe die Rechte an, damit Nginx (und dein User) darauf zugreifen können:
sudo chown -R $USER:$USER /var/www/kabel.casademm.de/html
sudo chmod -R 755 /var/www/kabel.casademm.de
  1. Übertrage nun den Inhalt deines lokalen dist-Ordners in dieses Verzeichnis auf dem Server. Das kannst du z.B. über ein SFTP-Programm wie WinSCP oder FileZilla machen.
  2. Quelle: C:\EWSL_Add_in\CableConsolidation\dist\*
  3. Ziel (Server): /var/www/kabel.casademm.de/html/

(Tipp: Vergewissere dich, dass die Datei taskpane.html und der assets-Ordner direkt im /html/-Verzeichnis liegen!)

Schritt 3: Nginx für die Domain konfigurieren

Erstelle eine neue Server-Block Konfigurationsdatei für Nginx:

sudo nano /etc/nginx/sites-available/kabel.casademm.de

Kopiere folgenden Inhalt hinein (dies lauscht erstmal nur auf Port 80):

server {
    listen 80;
    listen [::]:80;

    root /var/www/kabel.casademm.de/html;
    index taskpane.html index.html index.htm;

    server_name kabel.casademm.de;

    location / {
        try_files $uri $uri/ =404;
        # Erlaubt CORS, was für Web-Add-Ins nützlich ist
        add_header Access-Control-Allow-Origin *;
    }
}

Speichere die Datei (in Nano: Strg+O, Enter, Strg+X).

Aktiviere die Konfiguration, indem du einen Symlink erstellst:

sudo ln -s /etc/nginx/sites-available/kabel.casademm.de /etc/nginx/sites-enabled/

Prüfe, ob Nginx meckert, und starte neu:

sudo nginx -t
sudo systemctl reload nginx

Schritt 4: SSL-Zertifikat sichern (WICHTIG!)

Microsoft Office weigert sich strikt, Add-ins ohne gültiges HTTPS-Zertifikat zu laden. Wir nutzen Certbot für ein kostenloses Let's Encrypt Zertifikat.

  1. Installiere Certbot:
sudo apt install certbot python3-certbot-nginx -y
  1. Generiere das Zertifikat:
sudo certbot --nginx -d kabel.casademm.de

Certbot wird dich nach deiner E-Mail-Adresse fragen und dir anbieten, den Traffic automatisch auf HTTPS umzuleiten (wähle Option "2: Redirect").

Sobald Certbot fertig ist, läuft dein Server sicher unter https://kabel.casademm.de.

Schritt 5: In Excel einbinden / ausrollen

Jetzt wo dein Server online ist, benötigst du (und deine Firma) nur noch eine einzige Datei: Die manifest.xml.

In der manifest.xml (welche du ebenfalls in deinem Projekt-Root hast) stehen bereits alle Verweise auf https://kabel.casademm.de.

Wie lade ich es im Office 365 Admin Center hoch? 1. Die IT geht auf admin.microsoft.com. 2. Gehe zu Einstellungen > Integrierte Apps. 3. Klicke auf Benutzerdefinierte Apps hochladen. 4. Lade die finale manifest.xml hoch. 5. Weise die App den entsprechenden Benutzern (oder allen) zu. 6. Sobald Excel von den Mitarbeitern neugestartet wird, erscheint der neue Button im Menüband!

(Für lokale Tests kannst du das Add-In in Excel auch einfach über "Meine Add-ins" > "Zusatz-Add-In hochladen" nutzen.)