Julkaisu Azure Static Web Apps -sovelluksena

Sovelluksen julkaiseminen Azure Static Web Apps -sovelluksena onnistuu helpoiten Visual Studio Coden lisäosan avulla.

Lisäosan asennus

  1. Mene Visual Studio Codessa lisäosanäymään (Extensions) pikanäppäinyhdistelmällä Ctrl + Shift + X.

  2. Kirjoita hakukenttään Azure Static Web Apps, valitse listasta lisäosa ja paina Install-nappia.

    Visual Studio Coden lisäosanäkymä

    Kun Install-napin paikalle tulee Disable- ja Uninstall-napit, on lisäosa asennettu ja valmiina käytettäväksi.

Sovelluksen julkaiseminen

Seuraavaksi julkaisemme sovelluksen lisäosan avulla.

  1. Klikkaa vasemman reunan palkista Azure-ikonia.

    Visual Studio Coden Azure-lisäosa

  2. Valitse Sign in to Azure... -vaihtoehto ja valitse kirjautumissa oppilaitostunnus. Kun selaimeen avautuu You are signed in now and can close this page. -teksti, niin voit palata takaisin Visual Studio Codeen, jossa näkyy sinun Azure for Students -tilauksesi.

    Azure for Students -tilaus näkyy lisäosan alla

  3. Paina RESOURCES-tekstin vieressä olevaa +-nappia ja valitse Create Static Web App... -vaihtoehto.

    Uuden resurssin luominen

  4. Tämän jälkeen sinulta kysytään muutama asia luotavaan sovellukseen liittyen.

    • Hyväksy luotavan Static Web Appin oletuksena tarjottu nimi (lemon-clicker).
    • Valitse alueeksi West Europe. Tämä määrittelee, mihin resurssit sijoittuvat.
    • Valitse esiasetukseksi React.
    • Hyväksy sovelluksen sijainniksi /.
    • Määrittele kansioksi, jonne sovellus rakennetaan dist.

    Näiden kysymysten jälkeen lisäosa suorittaa taustalla uuden palvelun aktivoinnin ja sovelluksen julkaisemisen. Onnistuneen julkaisun jälkeen alaosan ikkunaan tulee teksti Create Static Web App "lemon-clicker" Succeeded.

    Julkaistu sovellus löytyy vasemman reunan näkymästä kohdasta RESOURCES > Azure for Students > Static Web Apps > lemon-clicker.

    Sovellus on julkaistu Static Web Appina

  5. Jos haluat testata julkaistun version toimintaa, niin osoitteen löydät painamalla hiiren kakkospainikkeella (oikealle) lemon-clicker -tekstin päällä ja valitsemalla ponnahdusvalikosta Browse site.

    Sovelluksen avaaminen selaimessa

    Esimerkiksi tämän materiaalin sovellus julkaistiin osoitteessa https://thankful-glacier-0b2aec903.3.azurestaticapps.net/.

Julkaisun toimintaperiaate

Julkaisun yhteydessä lisäosa lisäsi taustalla repoon GitHubille Actions-määritteet ja siirsi nämä muutokset myös GitHubin palvelimelle.

Actions-määritteet huolehtivat siitä, että joka kerta kun GitHubin repoon viedään uusi commit-talletus, niin GitHub rakentaa (buildaa) sovelluksen ja kopioi julkaisun tuloksena syntyneen dist-kansion sisällön Static Web Appin alle.

TESTAA

Tee sovellukseen jokin muutos, vie se versiohallintaan ja siirrä muutokset GitHubiin. Odota muutama minuutti ja käy tarkistamassa päivitys.

Huomaa kuitenkin, että joudut todennäköisesti avaamaan sovelluksen kahteen kertaan. Ensimmäisellä kerralla sovellus avataan välimuistista ja uusi versio ladataan taustalla. Toisella kerralla käynnistetään päivitetty sovellus.

TUTKI

Tutustu mitä projektin GitHub-repossa on Actions-osion alla. Samoin tutustu mitä löytyy repon .github/workflows-kansiosta. Huomaa, että repon tiedostoissa ei ole näkyvissä salaisia avaimia, joilla GitHub ottaa yhteyden Static Web App -palveluun.