Az API közzététele GitHub Actions-műveletekkel

Befejeződött

Hozzáadta az API-t a webalkalmazáshoz, és mindkettő helyileg fut. Eljött az ideje, hogy közzétegye az API-t és a webalkalmazást az Azure Static Web Apps-ban.

Amikor létrehozta az Azure Static Web Apps-példányt, és arra utasította, hogy figyelje a main ágat, a rendszer generált Önnek egy GitHub Actions-műveletet. A GitHub-művelet figyeli az adattár fő ágának módosításait, és amikor véglegesítési vagy lekéréses kérelmet észlel a főághoz, létrehozza és közzéteszi az alkalmazást.

Bizonyára emlékszik, amikor létrehozta az Azure Static Web Apps-erőforrást, amely megadta az API mappahelyét. Az api alapértelmezett értékét adta meg. Mivel azonban az api mappában ekkor nem volt API, az Azure Static Web Apps nem próbált meg API-t közzétenni.

Most minden megváltozik.

GitHub Actions-művelet konfigurációja

A GitHub Actions-művelet fájlja a .github/workflows mappában található. A fájl tartalmazza a webalkalmazás, az API és a létrehozási összetevők helyének beállításait. Az Azure Static Web Apps-erőforrás létrehozásakor kiválasztott helyek mostantól ebben a fájlban találhatók, az itt látható módon:

app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional
app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional
app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional
app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional

Az api_location a megfelelő értékre van állítva ahhoz, hogy az api mappában található API-ra mutasson.

A GitHub Actions-művelet aktiválása

A GitHub Actions-művelet készen áll a webalkalmazás és az API létrehozására és közzétételére, amint a main ág módosítását észleli. A GitHub-művelet aktiválásához véglegesíthet közvetlenül, vagy létrehozhat egy lekéréses kérelmet a főágban . A fő ágon észlelt módosítások aktiválják a GitHub-műveletet, hogy az alkalmazást ugyanazon az URL-címen tegye közzé az élő webhelyén.

Előnézeti URL-címek

Előfordulhat, hogy az élő webhelyen való közzététel előtt látni szeretné a módosításokat egy átmeneti webhelyen. Az Azure Static Web Apps előzetes verziójú URL-címekkel tekintheti meg a módosítások előnézetét. Előnézeti URL-címet úgy hozhat létre, hogy létrehoz egy lekéréses kérelmet a GitHub Actions-művelet által figyelt ágra vonatkozóan. Az élő webhelyre nincs hatással. Ehelyett létrejön az alkalmazás egy új, átmeneti verziója. Ha visszalép, és ellenőrzi a lekéréses kérelmet a GitHubon, a Beszélgetés lapon közzétett átmeneti verzióra mutató hivatkozást kell látnia.

Az alábbi táblázat azt mutatja be, hogy az Azure Static Web Apps hogyan teszi közzé az alkalmazást különböző URL-címeken. Az alkalmazás egy adott URL-címen, míg az ugyanarra az ágra vonatkozó lekéréses kérelmek egy másik URL-címen végeznek közzétételt.

Forrás Leírás URL-cím
main ág Élő webhely URL-címe https://purple-rain-062d03304.azurestaticapps.net/
5. lekéréses kérelem Előnézeti URL-cím https://purple-rain-062d03304-5.azurestaticapps.net/

Jelenleg az api ágat használja. Lekéréses kérést kezdeményezhet az API-ágról a ágra. A main ágra vonatkozó lekéréses kérelem létrehozásakor a GitHub Actions-művelet egy előnézeti URL-címen teszi közzé az alkalmazást.

Miután a munkafolyamat befejezte az alkalmazás összeállítását és üzembe helyezését, a GitHub-robot megjegyzést fűz a lekéréses kérelemhez, amely tartalmazza az előkészületi környezet URL-címét. Erre a hivatkozásra kattintva megtekintheti a szakaszos módosításokat.

Ezután létrehoz egy lekéréses kérelmet, és felkeresi az alkalmazás szakaszos verzióját.