Ένα από τα υπέροχα χαρακτηριστικά που έχει το Azure Web Apps είναι η δυνατότητα ανάπτυξης ιστοσελίδων χρησιμοποιώντας το Git. Το μόνο που χρειάζεται να πληκτρολογήσετε είναι git push azure master και ο ιστότοπος σας αναπτύσσεται αυτόματα στο Azure. Αυτό το άρθρο δεν θα καλύψει τον τρόπο με τον οποίο μπορείτε να ρυθμίσετε το Web app σας να κάνει deploy στο Azure. Κάτι τέτοιο το καλύψαμε άλλωστε στο προηγούμενο άρθρο.

Αυτό το άρθρο θα σας δείξει πώς να προσαρμόσετε αυτή τη διαδικασία ώστε να μεταγλωττίσετε το Sass σε CSS όταν κάνετε git push στο Azure.

Πώς λειτουργεί.

Το Azure web app αναπτύσσεται από ένα git repository χρησιμοποιώντας ένα engine που ονομάζεται Kudu. Το deployment ενεργοποιείται από ενα post-receive hook. Το Kudu στην συνέχεια:

• Ελέγχει το σχετικό commit
• Εντοπίζει το αρχείο csproj που πρόκειται να κάνει built
• Εκτελεί το msbuild και σε έναν προσωρινό φάκελο
• Αντιγράφει την έξοδο από τον προσωρινό φάκελο στο wwwroot

Για περισσότερες λεπτομέρειες, ανατρέξτε στην ενότητα Deployment

Προσθήκη του Deployment script.

Για να προσθέσετε ένα deployment script στο web app σας, θα πρέπει να έχετε εγκατεστημένο το node.js. Εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε το Azure Command-Line Interface (Azure CLI).

npm install azure-cli -g

Το CLI περιέχει ένα εργαλείο δημιουργίας script που θα δημιουργήσει ένα deployment script. Η εντολή για τη δημιουργία ενός τέτοιου είναι:

azure site deploymentscript [options]

Οι επιλογές που απαιτούνται για αυτό το παράδειγμα είναι:

• –aspWAP: ASP.NET web application (το path προς το αρχείο .csproj)
  -s: path το path προς το αρχείο .sln

Παραδείγματος χάριν

azure site deploymentscript --aspWAP src\psmakos\psmakos.Web.csproj -s src\psmakos.sln

Η εντολή θα δημιουργήσει δύο αρχεία στο root σημείο του repository σας.

.deployment
deploy.cmd

Το Kudu κοιτάζει στο αρχείο .deployment για μια εντολή και το τρέχει αν το βρίσκει. Αν δείτε στο αρχείο, θα μοιάζει με αυτό.

[config]
command = deploy.cmd

Το deploy.cmd είναι το deployment script και μπορεί να εκτελεστεί τοπικά ώστε να τεστάρει τις αλλαγές πριν κάνει commit και το run στο production.

Εκτέλεση του deployment τοπικά.

Όταν το script εκτελείται τοπικά, ο ιστότοπος εξάγεται σε ένα φάκελο artifacts που δημιουργείται στο root του repository. Η γραμμή εντολών του NuGet απαιτείται από το script για την επαναφορά πακέτων.

Μπορείτε να το εγκαταστήσετε με το chocolatey.
choco install nuget.commandline

Compiling του SASS

Πριν επεξεργαστούμε το script, είναι σημαντικό να κατανοήσουμε τα τρία βήματα ανάπτυξης.

Βήμα 1 Τα πακέτα Nuget για την ιστοσελίδα αποκαθίστανται
Βήμα 2 Η ιστοσελίδα τοποθετείται σε έναν προσωρινό φάκελο
Βήμα 3 Το Kudu αντιγράφει τον ιστότοπο στο φάκελο wwwroot.

Εμείς θα πάμε να κάνουμε compile τα αρχεία Sass μετρά το βήμα 2. Το πρώτο πράγμα που πρέπει να βεβαιωθείτε είναι ότι όλα τα αρχεία .scss, package.json και gruntfile.js έχουν το Build Action ορισμένο στο content. Σε αντίθετη περίπτωση δεν θα αντιγραφούν στον προσωρινό φάκελο.

Το νέο βήμα του deployment μας μοιάζει με αυτό.

:: 3. Restore Grunt packages and run Grunt tasks
pushd %DEPLOYMENT_TEMP%
echo Installing Grunt packages
call npm install
IF !ERRORLEVEL! NEQ 0 goto error
echo Running Grunt tasks
call grunt prod
IF !ERRORLEVEL! NEQ 0 goto error

Αυτό κάνει τα εξής:

• Αλλάζει τον κατάλογο στον προσωρινό φάκελο
• Εγκαθιστά τα πακέτα κόμβων στο package.json
• Τρέχει το grunt task στο gruntfile.js

Τώρα, το deployment script μας μεταγλωττίζει το Sass σε CSS στον προσωρινό φάκελο πριν την αντιγράψει στο wwwroot.

Ας καθαρίσουμε τα απομεινάρια τώρα…
Κατά την άποψη μου καλό είναι να «ρίχνουμε και ένα σφουγγάρισματακι» μετά από την εκτέλεση των scripts. Μόλις ολοκληρωθούν τα πάντα, πρέπει να διαγράψουμε όλα τα αρχεία .scss, package.json και gruntfile.js. Δεν χρειάζονται πλέον. Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε το rimraf.

Το ολοκληρωμένο script με προσθήκη καθαρισμού είναι…

:: 3. Restore Grunt packages and run Grunt tasks
pushd %DEPLOYMENT_TEMP%
echo Installing Grunt packages
call npm install rimraf -g
call npm install
IF !ERRORLEVEL! NEQ 0 goto error
echo Running Grunt tasks
call grunt prod
echo cleaning up...
call rimraf node_modules Content\sass package.json gruntfile.js
IF !ERRORLEVEL! NEQ 0 goto error

Οπός βλέπετε στο script εγκαθιστούμε το rimraf πάρα την προσθήκη στο package.json, καθώς είναι μόνο απαίτηση του deployment και όχι του project μας αυτού καθαυτού.