Ammattikorkeakoulututkinnon opinnäytetyö
Tietojenkäsittelyn koulutus, Hämeenlinnan korkeakoulukeskus kevät, 2021
Olli Nokkonen
Tietojenkäsittelyn koulutus Tiivistelmä Hämeenlinnan korkeakoulukeskus
Tekijä Olli Nokkonen Vuosi 2021
Työn nimi Blazor web-sovelluskehitys Docker-ympäristössä Ohjaajat Mirlinda Kosova-Alija
TIIVISTELMÄ
Tämän opinnäytetyön tavoitteena oli kuvata ja havainnollistaa käytännössä, kuinka Docker- ympäristössä kehitetään ja hallitaan Microsoftin Blazor web-viitekehyksellä toimivaa web- sovellusta, joka hyödyntää myös MariaDB-tietokantaa. Motiivina aihevalinnalle oli
kirjoittajan oma mielenkiinto kyseisiin tekniikoihin.
Opinnäytetyö on toiminnallinen. Työssä käydään läpi tarvittavat asennukset Windows 10 Home -käyttöjärjestelmälle, joka toimii kehitysympäristönä opinnäytetyössä. Blazor web- sovelluksen ohjelmointiprosessi käydään läpi esittelemällä sen ohjelmakoodit, sekä
antamalla perustelemalla eri valintoja, joihin ohjelmakoodeissa on lopulta päädytty. Lopuksi annetaan käytännön esimerkki, kuinka luodun web-sovelluksen Docker-kuva (Docker image) jaetaan Docker Hub -palvelun avulla, sekä pohditaan tarkemmin projektin aikana
ilmaantuneita huomioita, sekä ongelmatilanteita.
Opinnäytetyön perimmäinen tavoite saavutettiin, ja sen aikana kertyneiden kokemuksien perusteella kirjoittaja voi suositella jokaiselle kiinnostuneelle perehtymistä Dockeriin, sekä Blazor web-viitekehykseen. Erityisesti Dockerin ja sen periaatteiden hallinnasta voi olla käyttäjälle hyötyä muuallakin, kuin pelkästään web-sovelluskehityksessä.
Avainsanat ASP.NET Core, Docker, Docker Hub, C#, Razor, Blazor Sivut 39 sivua ja liitteitä 7 sivua
Degree Programme in Business Information Technology Abstract Hämeenlinna University Centre
Author Olli Nokkonen Year 2021
Subject Blazor Web app development in Docker environment Supervisors Mirlinda Kosova-Alija
ABSTRACT
The goal of this thesis was to describe and show in practice how to develop a web app, using both Microsoft’s Blazor web framework and MariaDB-database inside a Docker
environment. The motivation behind the choosing of the subject is based on the writer’s own interest in learning the techniques as described above.
The thesis is practical in nature. It will go through the required installations for the Windows 10 Home operating system which will be the target environment during this thesis. The programming portion of the Blazor web app is done by presenting the essential program codes and describing the process while also giving context for the different choices made.
Finally, an example on how to upload a finished Docker container image into the Docker Hub service is provided, before giving a more extensive description of the problems and
interesting notes that occurred during the project.
The main goals of the thesis were successfully met in the end. Based on the experiences that were gained during it, the writer recommends anyone with an interest in web development to get acquainted with both Docker and the Blazor web framework. Having knowledge of the Docker environment can be especially useful in projects beyond just web app development.
Keywords ASP.NET Core, Docker, Docker Hub, C#, Razor, Blazor Pages 39 pages and appendices 7 pages
Sanasto
Razor Ohjelmointisyntaksi, jota käytetään yhdessä HTML:n kanssa
HTML HyperText Markup Language, merkintäkieli, jolla rakennetaan web-sivuja CSS Cascading Style Sheets, WWW-dokumenteille kehitetty tyyliohjeiden laji ASP.NET Microsoftin web-ohjelmistokehys
back end Sovelluksen taustalla toimiva järjestelmä, joka hallitsee toimintoja ja tietokantaa
front end Sovelluksessa käyttäjälle näkyvä osuus, esim. interaktiivinen näkymä internetselaimessa
MVC Model-View-Controller, ohjelmistosuunnittelumalli
Wasm WebAssembly, avoimen standardin matalan tason ohjelmointikieli
W3C World Wide Web Consortium, kansainvälinen web-standardeja ylläpitävä ja kehittävä organisaatio
YAML "YAML Ain't Markup Language", merkintäkieli, jota käytetään usein konfiguraatiotiedostoissa
WSL Windows Subsystem for Linux, Windows-käyttöjärjestelmille tarkoitettu yhteensopivuustaso, joka mahdollistaa Linux-pohjaisten sovellusten ja komentojen suorittamisen
Webhook Tekniikka, jonka tarkoitus on manipuloida web-sivuston tai -sovelluksen toimintaa sen ulkopuolelta tulevalla signaalilla
CRUD Create, Read, Update and Delete. Neljä oleellisinta funktiota pysyvän datan varastoimiseen.
Sisällys
1 Johdanto ... 1
2 Microsoft ASP.NET Core ... 2
2.1 MVC-suunnittelumalli ... 2
2.2 Blazor ... 4
2.2.1 Komponentit ... 4
2.2.2 Palvelumallit ... 5
3 Docker ... 7
3.1 Docker Engine ... 7
3.2 Docker-compose ... 8
3.3 Docker Desktop ... 9
3.4 Docker Hub ... 10
4 Ohjelmointiprojektin tavoite ja menetelmät ... 13
5 Ohjelmointiympäristön valmistelu ... 14
5.1 Docker ... 14
5.1.1 Windows Subsystem for Linux (WSL2) ... 14
5.1.2 Docker Hub & Docker Desktop ... 15
5.2 Microsoft Visual Studio Community 2019 ... 16
6 Ohjelmointiprojektin toteutus ... 17
6.1 Projektin aloitus ja tietokantaluokan luominen ... 17
6.2 Docker-ympäristön verkkomääritykset & MariaDB ... 19
6.3 Blazor-komponenttien ohjelmointi... 22
6.4 Rakentaminen ja julkaisu Docker Hubiin ... 29
7 Pohdinnat projektin lopputuloksesta ... 32
7.1 Pohdinnat Dockerista ... 32
7.2 Pohdinnat Blazor web-viitekehyksestä ... 33
8 Yhteenveto ... 35
Lähteet ... 36
Kuvat, ohjelmakoodit ja taulukot
Kuva 1 MVC-suunnittelumalli havainnollistettuna (TutorialsTeacher.com, 2020) ... 3Kuva 2 Blazor Server -palvelumalli havainnollistettuna (Microsoft, 2020) ... 5
Kuva 3 Blazor WebAssembly -palvelumalli havainnollistettuna (Microsoft, 2020) ... 6
Kuva 4 Docker Enginen toiminnallisuus havainnollistettuna (Docker Docs, n.d.) ... 8
Kuva 5 Docker Desktopin Dashboard. Paikalliset Docker-kuvat listattuna. ... 10
Kuva 6 Ruutukaappaus Ubuntun Docker Hub -säilöstä ja sen sisältävistä eri tageista... 11
Kuva 7 Kuvakaappaus web-sovelluksesta julkaisuvaiheessa. ... 34
Ohjelmakoodi 1 Esimerkki Razor-komponentista ... 4
Ohjelmakoodi 2 Esimerkki docker-compose.yml -tiedoston koostumuksesta ... 9
Ohjelmakoodi 3 SqlAccess.cs -luokan metodit tietokannan kanssa kommunikointiin (IAmTimCorey, 2020) ... 18
Ohjelmakoodi 4 Startup.cs -luokan ConfigureServices-metodi ... 19
Ohjelmakoodi 5 Dockerfile-tiedosto MariaDB-tietokannan rakentamiseen ... 19
Ohjelmakoodi 6 SQL-skripti tietokannan alustamiseen ... 20
Ohjelmakoodi 7 Muutokset projektin .csproj- ja appsettings.json -tiedostoihin ... 21
Ohjelmakoodi 8 Malliluokat tietokantakyselyihin ... 23
Ohjelmakoodi 9 TypingGame.razor -käytetyt moduulit ja luokat ... 24
Ohjelmakoodi 10 TypingGame.razor - Cascading Values ... 25
Ohjelmakoodi 11 TypingComponent.razor -komponentin ”input”-elementti ... 25
Ohjelmakoodi 12 TypingComponent.razor - CheckGuess-metodi ... 26
Ohjelmakoodi 13 TypingComponent.razor - Alikomponenttiin viety arvo ... 26
Ohjelmakoodi 14 MadeTopListComponent.razor -komponentin ohjelmakoodi ... 27
Ohjelmakoodi 15 Muutokset Blazor-projektin Dockerfile-tiedostoon ... 29
Ohjelmakoodi 16 Web-sovelluksen docker-compose.yml -tiedosto ... 29
Komento 1 PowerShell-komennot WSL2-riippuvuuksien asettamiseksi ... 15
Komento 2 PowerShell-komennot Docker-verkon luomiseen ja MariaDB-tietokannan määritykseen ... 21
Komento 3 PowerShell-komento Docker-compose tiedoston suorittamiseen ... 30
Komento 4 PowerShell-komennot sovelluskonttikuvien listaukseksi ja uuden kuvan vienti Docker Hub -palveluun ... 31
Liitteet
Liite 1 Aineistonhallintasuunnitelma Liite 2 Ohjelmakoodit
1 Johdanto
Erilaiset Javascriptiin perustuvat web-viitekehykset ovat nykypäivänä suuressa suosiossa web-ohjelmistokehityksessä ja ne tarjoavat kehittäjille kattavasti informaatiota sekä
vertaistukea heidän omiin tarpeisiinsa. Microsoft tarjoaa vaihtoehtoisen tavan dynaamisten web-sivujen luontiin kehittämällään Blazor web-viitekehyksellä, joka hyödyntäen Microsoftin omaa Razor-syntaksia käyttää Javascriptin sijasta C#-ohjelmointikieltä yhdistettynä
perinteiseen HTML-merkintäkieleen.
Docker tarjoaa sovelluskehitykseen hallitun virtuaalisen ympäristön, jonka puitteissa
sovellusta voidaan testata välittämättä siitä, minkälainen ympäristö itse isäntäkoneella juuri sillä hetkellä on, helpottaen huomattavasti myös sovelluksen siirrettävyyttä ja
skaalautuvuutta. Tämä on tulevaisuuden kannalta varteenotettava ratkaisu, jos palvelua tai palveluita halutaan myöhemmin laajentaa, minimoiden mahdolliset ongelmat riippuvuuksien tai uuden ympäristön kanssa.
Tämän opinnäytetyön perimmäinen tarkoitus on kirjoittajan oma kiinnostus oppia ja tutustua työskentelyyn yllä mainituilla tekniikoilla. Käytännön osuuden alussa käydään läpi kaikki oleelliset vaiheet ja toimenpiteet, jotka mahdollistavat web-ohjelmoinnin aloittamisen Windows 10 Home -käyttöjärjestelmällä, jonka jälkeen tarkoituksena on aloittaa web-
sovelluksen ohjelmointi käyttäen Microsoftin Visual Studio 2019 Community - kehitysympäristöä.
Tutkimuskysymykset:
• Minkälaista web-sovelluskehitys on Blazor-viitekehyksellä?
• Mitä haasteita tai hyötyjä Docker tuo mukanaan ohjelmointivaiheeseen käytännössä?
• Kuinka helppokäyttöinen Docker on konttien ja kuvien siirrettävyydeltään käytännössä?
2 Microsoft ASP.NET Core
ASP.NET Core on Microsoftin kehittämä vapaan lähdekoodin web-ohjelmistokehys, joka on osa laajempaa .NET -sovellusviitekehystä. ASP.NET Coren avulla on mahdollista rakentaa moderneja web-sovelluksia sekä -palveluita monelle eri alustalle, kuten Windowsille, Linuxille, macOS:lle, sekä Dockerille (Microsoft, 2021a). ASP.NET Core on
uudelleensuunniteltu versio alkuperäisestä ASP.NET 4.x web-ohjelmistokehyksestä, jonka merkittävimmät muutokset ovat tuki useammalle eri käyttöjärjestelmälle ja alustalle, sekä lisätyt työkalut, joilla on mahdollista rakentaa dynaamisia web-sivuja Microsoftin Blazor- viitekehyksen avulla (Microsoft Docs, 2020a).
Tässä kappaleessa käydään yleisesti läpi kaksi eri tapaa suunnitella ASP.NET Core web- sovellus; ensimmäisenä MVC-suunnittelumallia hyödyntävä viitekehys, ja toisena Blazor- viitekehys. Tarkoituksena on esitellä molempien mallien merkittävimmät ominaisuudet ja täten vertailla modernia Blazor-mallia ja perinteisempää web-sovelluskehityksessä suosittua MVC-mallia.
2.1 MVC-suunnittelumalli
MVC (Model-View-Controller, suom. Malli-Näkymä-Käsittelijä) -suunnittelumalli perustuu tapaan, jolla sovelluksen toiminnot jaetaan kolmeen eri osa-alueeseen, jotka kommunikoivat keskenään, muodostaen kokonaisen sovelluksen. Tämä toiminnallisuuksien jako sovelluksen kehittämisvaiheessa takaa sille joustavamman rakenteen, mahdollistaen esimerkiksi uuden käyttöliittymän integroimisen sovelluksen näkymäosuudessa, käyttäen silti vanhaa
toiminnallisuutta malli- ja käsittelijäosuudessa. (Deacon, 2009)
Konsepti ensimmäiselle versiolle MVC-suunnittelumallista syntyi 70- ja 80-luvun taitteessa, jolloin se lisättiin osaksi Smalltalk-80-ohjelmointikielen luokkakirjastoja (Reenskaug, ei pvm).
Mallia on sittemmin kehitetty eri tavoin ja sen luomia perusteita käytetään edelleen hyödyksi monessa modernimmassakin ohjelmointikielessä, erityisesti web-
sovelluskehityksen maailmassa (Sol, 2020).
Kuva 1 MVC-suunnittelumalli havainnollistettuna (TutorialsTeacher.com, 2020)
Malli (Model) kuvaa sovelluksen käyttämää dataa (TutorialsTeacher.com, 2020). Usein tämä tarkoittaa web-sovellusten kohdalla tietokantaa, joka voi koostua esimerkiksi
henkilötiedoista, tai jonkinlaisen tuoteryhmän eri artikkeleista (Tutorialspoint, ei pvm).
Näkymän (View) tehtävänä on toimia sovelluksen käyttöliittymänä (Smith, 2020). Tämä tarkoittaa sovelluksen visuaalista puolta, jonka avulla käyttäjällä on mahdollisuus hallita sovelluksen eri ominaisuuksia esimerkiksi internetselaimen kautta (Tutorialspoint, ei pvm).
Käsittelijä (Controller) toimii pääasiallisesti osapuolena, joka hallitsee pyyntöjä Näkymän ja Mallin välillä (Tutorialspoint, ei pvm). Kuvassa 1 havainnollistetaan visuaalisesti, kuinka Käsittelijä hallitsee pyyntöjä Näkymän ja Mallin välillä (TutorialsTeacher.com, 2020).
Jakamalla sovelluksen eri osiin tehtävien perusteella, sen rakenne ja toiminta on
ohjelmistokehittäjälle helpommin ymmärrettävissä, mikä auttaa erityisesti suurten toiminta- ja datamäärien käsittelyssä (Reenskaug, ei pvm).
Kuvitellaan, että kalenterisovelluksen käyttäjä haluaa merkitä itselleen tapahtuman tietylle ajankohdalle. Käyttäjä tekee ensin merkintäpyynnön käyttäen sovelluksen käyttöliittymää, eli Näkymää, jonka jälkeen sovelluksen Käsittelijä vastaanottaa pyynnön ja tekee muutoksen tietokantaan hyödyntäen Mallia. Aina kun käyttäjä avaa kalenterisovelluksen, Käsittelijä hakee merkinnät Mallilta, ja tuo ne Näkymään käyttäjän tarkasteltavaksi.
2.2 Blazor
Blazor on Microsoftin kehittämä web-viitekehys ASP.NET web-sovellusten rakentamiseen, joka tukee WebAssembly- sekä perinteisempiä palvelimia hyödyntäviä palvelumalleja (Roth
& Latham, Introduction to ASP.NET Core Blazor, 2020). Sen merkittävin ominaisuus on C#- ohjelmointikielen käyttö web-sivujen toimintojen rakentamisessa, tarjoten vaihtoehdon suosituille Javascript-ohjelmointikieleen perustuville viitekehyksille (Microsoft, 2021b).
2.2.1 Komponentit
Blazor-sovelluksien rakenne perustuu komponentteihin, jotka tarjoavat erilaisia
toiminnallisuuksia web-sivuille. Nämä komponentit, joita muodollisesti kutsutaan Razor- komponenteiksi, koostuvat sisällöltään HTML:stä, CSS:stä sekä C#-ohjelmointikielestä, joita merkitään Razor-syntaksilla. (Roth & Latham, Introduction to ASP.NET Core Blazor, 2020) Ohjelmakoodi 1 Esimerkki Razor-komponentista (Microsoft, 2021c)
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount() {
currentCount++;
} }
Razor-syntaksissa C#-kieli erotetaan HTML:stä käyttämällä @-merkkiä. Ohjelmakoodi 1 esitellyssä komponentissa on luotu yksinkertainen laskuri, joka näyttää kuinka monta kertaa komponentissa olevaa nappia on painettu. Huomion arvoista tässä esimerkkikoodissa on tapa, jossa sekä visuaalinen, että looginen ohjelmakoodi on sisälletty samaan tiedostoon;
@code -merkinnän jälkeen ohjelmakoodissa alustetaan muuttujat ja metodit, joita käytetään ylempänä HTML:n kanssa komponentin visuaalisessa osassa.
2.2.2 Palvelumallit
Blazor-sovelluksia on mahdollista tarjota joko palvelin, tai WebAssemblyyn (lyh. Wasm) perustuvalla -palvelumallilla. Blazor Server julkaistiin osana .NET Core 3.0 -
sovellusviitekehystä ja puoli vuotta myöhemmin työkalut vaihtoehtoiselle palvelumallille, Blazor WebAssemblylle lisättiin mukaan .NET Core -ympäristöön (Ofner, 2020).
Kuva 2 Blazor Server -palvelumalli havainnollistettuna (Microsoft, 2020)
Palvelimia hyödyntävä Blazor Server -palvelumalli perustuu tapaan, jossa web-sovelluksen taustalla olevat toiminnot hoidetaan palvelimella, joka verkkoyhteyden välityksellä
kommunikoi käyttäjän internet-selaimen kanssa. Blazor-sovelluksien tapauksessa palvelimen ja selaimen välistä yhteyttä hallitaan ASP.NET Core SignalR -sovelluskirjaston avulla. Kuvassa 2 on visuaalisesti havainnollistettu tämä jako internet-selaimen (Browser) ja palvelimella toimivan Blazor Server -sovelluksen (Blazor) välillä. (Roth, ASP.NET Core Blazor hosting models, 2020)
SignalR-sovelluskirjasto mahdollistaa reaaliaikaisten toiminnallisuuksien lisäämisen web- sivuille. Palvelin pystyy lähettämään asiakaspäätteelle uutta tietoa ilman, että sitä pitäisi erikseen pyytää palvelimelta. Hyvä esimerkki tällaisesta toiminnallisuudesta on
reaaliaikainen chatti internet-selaimella. (Fletcher, 2014)
Blazor Server -palvelumallissa datan latausmäärät ja -koot pysyvät pienenä käyttäjän osalta, web-sovelluksen toimintaan tarvittavien riippuvuuksien sijaitessa palvelimella käyttäjän
oman ympäristön sijasta. Tämä tekee web-sovelluksesta kuitenkin riippuvaisen jatkuvasta verkkoyhteydestä. (Roth, ASP.NET Core Blazor hosting models, 2020; Ofner, 2020)
Kuva 3 Blazor WebAssembly -palvelumalli havainnollistettuna (Microsoft, 2020)
Blazor WebAssemblyn toiminnallisuus perustuu tapaan, jossa web-sovellus ladataan käyttäjän internet-selaimeen sisältäen sen kaikki toiminnallisuudet ja riippuvuudet. Tämä ratkaisu poistaa tarpeellisuuden jatkuvalle kommunikoinnille palvelimen kanssa. Kuvassa 3 on visuaalisesti havainnollistettu internet-selaimessa (Browser) toimiva Blazor WebAssembly -sovellus (Blazor). (Roth, ASP.NET Core Blazor hosting models, 2020)
WebAssembly (lyh. Wasm) on World Wide Web Consortiumin (W3C) tukema avoimen standardin matalan tason ohjelmointikieli, jonka yksi perimmäisistä käyttötarkoituksista on kääntää ja suorittaa monia eri ohjelmointikieliä web-ympäristössä, tarjoten niille lähes natiivin suoritusnopeuden (MDN Web Docs, 2020). Blazor WebAssemblyn tapauksessa tämä tarkoittaa mahdollisuutta kirjoittaa käyttäjän internet-selaimessa suoritettavia web-
sovelluksia C#-ohjelmointikielellä.
Blazor WebAssembly -palvelumallin oleellisin etu on tarpeettomuus jatkuvalle
palvelinyhteydelle web-sovelluksen toimintojen kannalta. Jotta sovellus voisi kuitenkin hyödyntää ulkoisia tietokantayhteyksiä tai muuta salattua dataa, on turvallisuussyistä välttämätöntä käyttää erillistä ohjelmointirajapintaa (API) tietokantakyselyissä. (Roth, ASP.NET Core Blazor hosting models, 2020; Ofner, 2020)
3 Docker
Docker on Docker Inc. -yrityksen kehittämä alusta, joka mahdollistaa sovelluskehittäjille tavan kehittää ja julkaista sovelluksiaan sovelluskonteilla eristetyssä ympäristössä virtuaalikoneiden tapaisesti. Virtuaalikoneista eroten Dockerin tapa virtualisoida
ympäristönsä vaatii suoritettaessa huomattavasti vähemmän tietokoneen laskentatehoa.
(Skilbeck, 2020; Docker Inc., 2021a)
Sovelluskonttien etu sovelluskehityksessä on niiden riippumattomuus isäntäkoneen laitteistosta ja siihen asennetuista sovelluksista, mikä suoraviivaistaa erityisesti testausprosessia ja vianetsintää ongelmatilanteissa. Myös sovelluskonttien helppo siirrettävyys laitteelta toiselle on etu palveluiden mahdollisessa skaalautumisessa tulevaisuutta ajatellen. (Docker Docs, 2020a)
Tässä kappaleessa käydään yleisesti läpi Dockerin toimintaperiaatteet, sekä esitellään suosittu sovelluskonttien jakopalvelu Docker Hub ja lopuksi Docker Desktopin toiminta Windows 10 Home -käyttöjärjestelmällä.
3.1 Docker Engine
Dockerin sovelluskonttien hallitsemiseen kehitettyä sovellusta kutsutaan yleisesti nimellä Docker Engine. Sen toiminta perustuu asiakas-palvelin-arkkitehtuuriin (Client-server model), koostuen kolmesta pääkomponentista; palvelimena toimivasta taustaprosessista (Daemon), asiakasohjelmasta (Client), sekä joukosta ohjelmointirajapintoja (API), joiden avulla
komponentit keskustelevat toistensa kanssa. (Paer-Gotch, 2020; Docker Docs, 2020b) Docker Engine toimii natiivina Linux-ytimen (engl. Kernel) pohjalta, tarjoten myös virtualisoinnin avulla tuen sen käyttöönottamiseen Windows, sekä macOS -
käyttöjärjestelmillä (Docker Docs, 2020c). Microsoft on myöhemmin kehittänyt yhteistyössä Docker-tiimin kanssa tavan luoda ja hallita natiiveja Windows-sovelluskontteja Windows- ympäristössä (Docker Inc., 2021b).
Kuva 4 Docker Enginen toiminnallisuus havainnollistettuna (Docker Docs, n.d.)
Yksinkertaisesti selitettynä asiakasohjelma (Client) on komponentti, jossa käyttäjä antaa komentoja palvelimelle (Docker daemon) suoritettavaksi. Kuvassa 4 on annettu esimerkkejä erilaisista komennoista ja havainnollistettu erilaisilla katkoviivoilla, kuinka palvelin suorittaa näitä komentoja. Esimerkkinä komento docker pull, jonka tarkoitus on hakea ja ladata jokin määrittelemätön Docker-kuva (Image) rekisteristä käyttövalmiiksi. Rekisterinä (Registry) toimii useimmissa tapauksissa Docker Hub -palvelu, mutta käyttäjillä on myös mahdollisuus luoda omia Docker-kuvia tarjoavia rekistereitään (Docker Docs, 2021a).
3.2 Docker-compose
Docker-compose on työkalu, jonka avulla on mahdollista määrittää ja suorittaa monia eri sovelluskonttikuvia käyttämällä YAML-merkintäkielellä kirjoitettuja tiedostoja. Docker- composen käyttöprosessi on usein kolmivaiheinen. Ensin luodaan jokaisen
sovelluskonttikuvan oma Dockerfile-tiedosto, jonka jälkeen nämä tiedostot lisätään yhteen Docker-compose -tiedostoon, jossa sovelluskonttikuvat määritellään toimimaan samassa Docker-ympäristössä. Lopuksi Docker-compose tiedosto suoritetaan komentoriviltä, jolloin kaikki sen määrittelemät sovelluskonttikuvat toimivat yhdessä hallitussa ympäristössä.
(Docker Docs, 2021g)
Ohjelmakoodi 2 Esimerkki docker-compose.yml -tiedoston koostumuksesta
services:
app:
build: ./app-example/
ports:
- 8080:8080 mariadb:
image: mysql:5.7 ports:
- 3900:3306 nginx:
image: nginx:stable-alpine
Docker-compose-tiedosto koostuu eri palveluista, jotka listataan Ohjelmakoodi 2 esimerkin mukaisesti. Palveluiden oman Docker-sovelluskonttikuvan lisäksi näille voidaan muun muassa lisätä omat verkkomääritykset, joiden pohjalta kaikki Docker-compose-tiedostossa määritellyt palvelut voivat keskustella keskenään samassa Docker-ympäristössä. (Ligios, 2019)
3.3 Docker Desktop
Windows 10 ja macOS -käyttöjärjestelmille kehitetty Docker Desktop suoraviivaistaa Docker- alustan asennuksen ja käyttöönottamisen. Docker Desktop sisältää tarpeelliset sovellukset, lisätyökaluja, sekä visuaalisen käyttöliittymän sovelluskonttien ja Docker-kuvien hallintaan (Docker Docs, 2021b).
Windows-alustalla Dockerin sovelluskonttien ja kuvien hallinta suoritetaan Microsoftin Hyper-V-virtualisoinnilla, ja vaatii toimiakseen joko Windows 10 Pro- tai Enterprise-version, tai vaihtoehtoisesti Windows 10 Home-version, jolle on asennettu Windows Subsystem for Linux 2 (WSL2) -yhteensopivuustaso (Docker Inc, 2021c). Microsoftin kehittämä tuki
natiiveille Windows-sovelluskonteille ei ole vielä tätä opinnäytettä kirjoittaessa tarjolla Windows 10 Home -käyttöjärjestelmän käyttäjille.
Windows Subsystem for Linux 2 (WSL2) on yhteensopivuustaso Windows-
käyttöjärjestelmille, joka mahdollistaa Linux-pohjaisten sovellusten ja komentojen
suorittamisen Hyper-V-virtualisointia hyödyntävällä Linux-ytimellä (Bisson, 2020). Docker Enginen toiminnallisuus perustuu Linux-ympäristöön, mikä tekee WSL2-tuesta
välttämättömän Windows-ympäristöissä (Docker Docs, 2020c).
Kuva 5 Docker Desktopin Dashboard. Paikalliset Docker-kuvat listattuna.
Docker Desktopin visuaalisen hallintapaneelin (Dashboard) avulla käyttäjä voi hallita Docker- kuvia ja sovelluskontteja helppokäyttöisesti. Kuvassa 5 on esimerkki käyttäjälle listatuista paikallisesti käytettävissä olevista Docker-kuvista, joista käy ilmi niiden nykyinen tila, sekä muun muassa tietoa niiden koosta ja luomisajankohdasta. Käytettynä yhdessä tavallisten komentokehotteiden kanssa, tämä visuaalinen hallintapaneeli toimii hyvin reaaliaikaisena sovelluskonttien monitorina. (Docker Docs, 2021c)
Asentaessaan Docker Desktopin käyttäjä saa myös käyttöönsä Kubernetes-ohjelmiston, jota käytetään yleisesti sovelluskonttien hallinnan automatisointiin. Kubernetes on erityisesti hyödyllinen työkalu tapauksissa, joissa käyttäjän tai yrityksen on hallittava monia eri sovelluskontteja, jotka ovat toisistaan riippuvaisia. (Kubernetes, 2021)
3.4 Docker Hub
Docker Hub on maailman suurin sovelluskonttikuvia käyttäjien ladattavaksi tarjoava palvelu.
Docker-tiimin ja Microsoftin lisäksi monet tunnetut vapaaseen lähdekoodiin perustuvat IT- alan toimijat jakavat Docker Hub:issa sovelluskonttikuvia omista tuotteistaan
sovelluskehittäjien käytettäväksi. Docker Hub tarjoaa myös tiimeille tai yksittäisille käyttäjille
alustan jakaa omia sovelluskonttikuviaan joko yksityiseen- tai julkiseen käyttöön. Docker Hub on käyttäjilleen ilmainen, rajoittaen kuitenkin yksityisten säilöjen (Repository) määrän
yhteen per käyttäjä ilman erityistä sopimusta. (Docker Docs, 2021d)
Kuva 6 Ruutukaappaus Ubuntun Docker Hub -säilöstä ja sen sisältävistä eri tageista.
Sovelluskonttikuvilla on Docker Hub:issa omat säilönsä (Repository). Säilöissä voi olla samasta sovelluskonttikuvasta monta eri versiota, mitkä merkitään uniikilla tagilla (Docker Docs, 2021e). Kuvassa 6 ovat listattuina kolme eri tagia, joista jokainen sisältää
komentokehotteelle kopioitavan latauskomennon kokonaisuudessaan, jota hyödyntämällä käyttäjä voi ladata kyseisen version sovelluskonttikuvasta omalle Docker-alustalleen. Haluttu tagi määritetään komennossa sovelluskonttikuvalle annetun nimen jälkeen ja erottamalla ne kaksoispistemerkillä.
Eri palveluiden integraatiot Docker Hub:iin ovat myös mahdollisia. Käyttäjän GitHub-tili voidaan yhdistää käyttäjän Docker Hub -sovelluskonttisäilöön, jolloin sovelluskonttikuvan rakentaminen ja testaaminen voidaan automatisoida käyttäjän viedessä uutta lähdekoodia omaan GitHub-säilöönsä (Lamb, 2019). Käyttäjällä on myös mahdollisuus luoda
sovelluskonttisäilöillensä omia webhook-toimintoja, jotka aktivoituvat aina käyttäjän viedessä säilöihinsä uuden sovelluskonttikuvan (Docker Docs, 2021f).
4 Ohjelmointiprojektin tavoite ja menetelmät
Tämän opinnäytetyön tavoitteena on tutustuttaa sen lukija Docker-ympäristöön, sekä Blazor web-viitekehykseen web-sovelluskehittäjän näkökulmasta. Seuraavat kappaleet tulevat sisältämään opinnäytetyön varsinaiset käytännön osuudet, joissa käydään läpi tarvittavat valmistelut ja asennukset, sekä varsinainen web-sovelluksen ohjelmointi. Web-sovelluksen aiheeksi on valittu suht yksinkertainen kirjoitusnopeustesti, joka hyödyntää tietokantaa hakemalla sieltä kirjoitettavat sanat, sekä tallentamalla sinne käyttäjien parhaimmat tulokset.
Ohjelmointiprosessiin keskittyvissä luvuissa edetään mahdollisuuksien mukaan askelittain alusta loppuun. Tapa, jolla web-sovelluksen komponentit tulevat lopulta toimimaan yhdessä, tarkoittaa ettei tätä käytännön osuutta voida käydä läpi orgaanisesti alusta loppuun tyylillä, jossa komponentteihin lisättäisiin askelittain lisää koodia samalla, kun uusia toimintoja lisätään. Yksinkertaisuuden vuoksi kappaleissa käydään läpi jokainen komponentti tai luokka kokonaisuudessaan, selittäen samalla lyhyesti niiden eri ohjelmakoodit ja toiminnot.
Tarkoituksena tällä käytännön osuudella on toimia ikään kuin ohjeena tai yleiskatsauksena lukijalle, joka on mahdollisesti kiinnostunut työskentelemisestä Blazorin tai Dockerin kanssa.
Eri luvuissa perustellaan valitut metodit yleisellä tasolla sillä oletuksella, että lukijalla on jonkinlaista kokemusta HTML- ja CSS-tekniikoista, sekä C#- Java- tai Javascript-
ohjelmointikielistä.
Selitykset ja perustelut eri ratkaisujen valinnoista, sekä projektin aikana ilmaantuneista ongelmista kerrotaan yksityiskohtaisemmin opinnäytetyön loppuvaiheessa sille omistetussa kappaleessa. Linkit projektin GitHub-sivulle sekä valmiiden sovelluskonttien Docker Hub- säilöön jaetaan opinnäytetyön liitteissä.
5 Ohjelmointiympäristön valmistelu
Tässä kappaleessa käydään läpi asennukset, jotka ovat tarpeellisia Blazor web-sovelluksen kehittämiseen Docker-ympäristössä. Docker Desktopin lisäksi ohjelmointiin tarkoitetulle tietokoneelle asennetaan Visual Studio Community 2019 -ohjelmointiympäristö. Visual Studion Community-versio on ilmainen kaikille käyttäjille ja se vastaa ominaisuuksiltaan hyvin tämän opinnäytetyön projektin tarpeita. Käyttöjärjestelmänä opinnäytetyössä käytetään Windows 10 Home 1909 -versiota.
5.1 Docker
Windowsin tapauksessa Docker Enginen ja sen lisätyökalujen asennus ja hallinta on suoraviivainen prosessi Docker Desktopin avulla. Windows 10 Home -käyttöjärjestelmän käyttäjille on kuitenkin välttämätöntä asentaa ensin Microsoftin WSL2-
yhteensopivuusalusta, jota Docker Engine vaatii toimiakseen Windows-alustalla, sekä tarpeen mukaan aktivoida prosessorin virtualisointi tietokoneen BIOS (UEFI BIOS) - hallintapaneelin kautta.
5.1.1 Windows Subsystem for Linux (WSL2)
Heti ensimmäiseksi on hyvä tarkistaa käyttöjärjestelmän nykyinen versio ja varmistaa, että se tukee WSL2-yhteensopivuusalustaa. Avaa suoritusikkuna painamalla näppäimistöstä pohjaan Windows-nappi ja R, jonka jälkeen kirjoita ilmestyneelle riville winver avataksesi tiedot käyttöjärjestelmän nykyisestä versiosta. Jos versionumerosi on korkeampi kuin 1903, on käyttöjärjestelmälläsi mahdollista käyttää WSL2-tukea. Muussa tapauksessa päivitä Windows-käyttöjärjestelmäsi uudempaan versioon.
Tarkista myös onko suorittimellasi aktivoituna virtualisointituki. Avaa tehtävienhallinta- paneeli, mene Suorituskyky (Performance)-välilehdelle ja valitse vasemmasta paneelista Suoritin (CPU). Sivulla luetelluista tiedoista pitäisi löytyä tieto prosessorin nykyisestä virtualisointituesta. Jos kyseisessä kohdassa ilmoitetaan, että virtualisoinnille ei ole tukea, mene tietokoneen BIOS-hallintapaneeliin aktivoidaksesi prosessorin virtualisointituki.
Lisätietoja tästä prosessista löydät emolevysi- tai prosessorisi valmistajalta.
Komento 1 PowerShell-komennot WSL2-riippuvuuksien asettamiseksi (Microsoft Docs, 2020f)
dism.exe /online /enable-feature /featurename:Microsoft-Windows- Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
wsl –set-default-version 2
Avaa Windows PowerShell-komentorivi järjestelmänvalvojana ja suorita Komento 1 listatut kaksi ensimmäistä komentoa. Ensimmäinen komento aktivoi WSL-tuen käyttöjärjestelmässä ja toinen komento aktivoi virtualisointituen käyttöjärjestelmässä. Tämän jälkeen käynnistä Windows uudestaan viimeistelläksesi riippuvuuksien asennukset WSL-tuelle.
Kun Windows on käynnistetty uudestaan ja prosessorin virtualisointituki on aktivoitu, lataa ja asenna uusin WSL2-paketti Microsoftin tarjoamasta luotettavasta lähteestä. Lopuksi aseta WSL-oletusversioksi 2 avaamalla Windows PowerShell-komentorivi järjestelmänvalvojana, ja suorittamalla Komento 1 listattu kolmas komento. WSL2-yhteensopivuusalusta on nyt asennettu ja valmiina käyttöjärjestelmälläsi.
5.1.2 Docker Hub & Docker Desktop
Luo ilmainen käyttäjätili Docker Hub -palveluun (https://hub.docker.com) ja kirjaudu sisään uudella käyttäjälläsi. Käyttäjänimesi on uniikki tunnus, jota käytetään osana osoitepolkua muiden käyttäjien ladattaessa julkisia säilöjäsi.
Lataa Docker Desktopin asennusohjelma Windowsille Docker Hub -palvelusta. Asennuksen aikana sovellus kysyy WSL2-ominaisuuksien aktivoimisesta, mitkä ovat Dockerin
toiminnallisuuden kannalta tärkeät. Pidä siis huoli, että ”Enable WSL2 Features”-optio on valittuna asennuksen sitä kysyessä.
Asennuksen onnistuttua käynnistä Docker Desktop -sovellus. Ensimmäisellä
käynnistyskerralla sovellus tarjoaa lyhyttä ohjeistettua opastusta Docker-kuvien käsittelystä, mikä on myös hyvä tapa todentaa Docker-asennuksesi toimivuus. Kirjaudu sovelluksessa sisään tunnuksillasi, jotka loit aiemmin Docker Hub -palvelussa ja käy ohjattu opastus läpi.
Lopputuloksena Docker Hub -tililtäsi pitäisi löytyä docker101tutorial niminen säilö.
5.2 Microsoft Visual Studio Community 2019
Lataa Visual Studio Community 2019 (https://visualstudio.microsoft.com/vs/community/) ja suorita sovellus päästäksesi Visual Studio Installer -asennusnäkymään. Sovellus listaa jo valmiiksi asennetut-, sekä valittavina olevat Visual Studio -versiot omilla välilehdillään.
Jos käyttöjärjestelmällesi on jo asennettu Visual Studio Community 2019 -
ohjelmointiympäristö, varmista ensin, että se on päivitetty uusimpaan versioon, sekä varmista Modify-nappia painamalla, että asennuksesi sisältää ASP.NET and web development, sekä .NET Core cross-platform development -ominaisuudet. Muussa tapauksessa avaa sovelluksen Available-välilehti ja asenna Visual Studio Community 2019 aikaisemmilla mainituilla ominaisuuksilla.
Asennuksen jälkeen on hyvä tarkistaa tarvittavien ominaisuuksien saatavuus
ohjelmointiympäristössä. Luo uusi projekti ja valitse Blazor App -projektimalli Visual Studion tarjoamista projektimalleista. Kun luot uutta Blazor-projektia, valitse palvelumalliksi Blazor Server App ja ota Visual Studion Docker-integraatio käyttöön Linux-ytimellä oikealla olevasta paneelista. Varmista, että Docker Desktop on käynnissä taustalla ja viimeistele projektin luonti. Projektin luotuaan Visual Studio määrittelee sille vielä Docker-tuen. Voit seurata tämän prosessin edistystä sovelluksen alapuolella olevasta Output-ikkunasta Container tools -pudotusvalikosta.
Prosessin loputtua ja Visual Studio -projektin ollessa vielä käynnissä, varmista
ohjelmointiympäristön sekä Dockerin asennuksien onnistuminen avaamalla Docker Desktop ja etsimällä käynnissä olevista säilöistä Blazor-projektisi niminen sovelluskontti.
6 Ohjelmointiprojektin toteutus
Ennen uuden projektin aloittamista Visual Studiossa käynnistä Docker Desktop -sovellus, sekä PowerShell-komentorivi järjestelmänvalvojan oikeuksilla. Käytämme projektin aikana PowerShell-komentoriviä pääasiallisena työkaluna Docker Enginen hallinnassa, mutta helppokäyttöisyyden vuoksi on myös suositeltavaa hyödyntää Docker Desktopin dashboard- käyttöliittymää esimerkiksi sovelluskonttien ja -kuvien monitoroimisessa.
6.1 Projektin aloitus ja tietokantaluokan luominen
Luo uusi Blazor App -projekti ja nimeä se vapaavalintaisella tavalla. Sovelluksen rakenteen selkeyttämiseksi on hyvä tapa erottaa projekti ja itse työtilasta (Solution) omiin
työkansioihin, sillä tulemme lisäämään työtilaan uuden projektin hallitsemaan
tietokantayhteyksiä. Tässä opinnäytetyössä projekti on nimetty muotoon BlazorOppari, ja työtila muotoon BlazorOppariApp. Käytämme projektissa Blazor Server App -palvelumallia, sillä se mahdollistaa sovelluksellemme Docker-tuen WebAssembly-palvelumallista poiketen.
Varmista, että valittu ohjelmistoviitekehys-versio on .NET 5.0 tai uudempi, ja että HTTPS- konfigurointi sekä Docker-tuki Linuxille on aktivoituna. Tässä projektissa emme tarvitse erillistä autentikointia.
Käytämme tietokannan hallintaan itse Blazor-projektista erillistä luokkakirjastoa. Luo uusi luokkakirjasto (Class library)-projekti työtilan juurihakemistoon oikeaklikkaamalla Solution
’ProjektinNimi’ -kohtaa Solution Explorer -sivupalkissa. Valitse Class Library (.NET Standard) - projekti ja nimeä se muotoon DatabaseLib. Ensimmäiseksi haemme uuteen luokkakirjasto- projektiimme tietokannan hallintaa helpottavia paketteja Microsoftin NuGet-
paketinhallintapalvelusta. Klikkaa DatabaseLib-projektin alla olevaa Dependencies-kansiota oikealla hiirenpainikkeella ja valitse Manage NuGet Packages. Hae ja asenna Dapper-, sekä MySql.Data -paketit luokkakirjastomme käytettäväksi. Dapper tarjoaa .NET-sovelluksille kevyen ja nopean tavan suorittaa CRUD (Create, Read, Update and Delete)-komentoja ja MySql.Data-paketti lisää projektiimme luokkakirjaston MySql-pohjaisten tietokantojen hallinnan avuksi.
Ohjelmakoodi 3 SqlAccess.cs -luokan metodit tietokannan kanssa kommunikointiin (IAmTimCorey, 2019)
public async Task<List<T>> LoadSqlData<T, U>(string sql, U parameters, string connectionString)
{
using (IDbConnection connection = new MySqlConnection(connectionString)) {
var rows = await connection.QueryAsync<T>(sql, parameters);
return rows.ToList();
} }
public Task WriteSqlData<T>(string sql, T parameters, string connectionString)
{
using (IDbConnection connection = new MySqlConnection(connectionString)) {
return connection.ExecuteAsync(sql, parameters);
} }
Luo DatabaseLib-projektille uusi luokka, tai muokkaa jo valmiina olevaa Class1.cs-luokkaa, ja anna sen nimeksi SqlAccess.cs. Lisää luokkaan kaksi Ohjelmakoodi 3 esiteltyä metodia.
LoadSqlData-metodi toimii tietokannalle tehtyjen kyselyjen toimittajana ja WriteSqlData- metodi antaa tietokannalle käskyjä lisätä tai päivittää tietoja tietokannassa. Molemmat metodit vastaanottavat kolme eri parametria; SQL-kyselyn tai -komennon tekstimuodossa, kyselyssä tai komennossa käytettävät attribuutit objektimuodossa, sekä määritykset yhteyden muodostamiseksi SQL-tietokantaan.
Seuraavaksi luomme juuri luodustamme SqlAccess.cs-luokasta uuden rajapintaluokan (Interface). Erillisen rajapintaluokan luominen tietokantaluokastamme on yleisesti hyvä tapa tulevaisuuden kannalta tapauksissa, jossa sovelluksen ohjelmakoodia muunnellaan tai jos sovelluksen pohjaa halutaan käyttää myöhemmin uudestaan johonkin toiseen tarkoitukseen (Mccutchen, 2010). SqlAccess.cs-luokan tekstinäkymässä klikkaa luokan nimeä public class SqlAccess -kohdasta ja paina Ctrl + . näppäinyhdistelmää saadaksesi näkyviin valikon, josta valitset Extract Interface luodaksesi uuden rajapintaluokan. Käytä Visual Studion
ehdottamaa oletusnimitystä ISqlAccess ja hyväksy rajapintaluokan luominen.
Lopuksi otamme tietokantapalvelumme käyttöön Blazor-projektissamme luomalla siihen ensin riippuvuuskytkennän. Kuten aiemmin DatabaseLib-projektin tapauksessa; klikkaa
oikealla hiirenpainikkeella Solution Explorer -sivupalkissa Blazor-projektin Dependencies- kansion kohdalta, ja valitse Add Project Reference. Valitse ikkunasta DatabaseLib-projekti ja hyväksy riippuvuuskytkentä. Nyt voimme lisätä tietokantapalvelumme osaksi sovellustamme Blazor-projektin Startup.cs-luokassa.
Ohjelmakoodi 4 Startup.cs -luokan ConfigureServices-metodi
public void ConfigureServices(IServiceCollection services) {
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<ISqlAccess, SqlAccess>();
}
Lisää Ohjelmakoodi 4 esitetty vahvennetulla tekstillä merkitty ohjelmakoodi osaksi
ConfigureServices-metodia. Singleton-palvelun elinikä on sama kuin itse sovelluksella, mikä sopii hyvin tietokannan käyttötarkoitukseen (Trivedi, 2020). Metodista on poistettu
alkuperäinen WeatherForecastService-palvelu, joka on osa Blazor App -projektimallin esimerkkejä sen eri toiminnallisuuksista.
6.2 Docker-ympäristön verkkomääritykset & MariaDB
Projektin tietokantana toimiva MariaDB-sovelluskonttikuva on hyvä alustaa käyttövalmiiksi jo ennen ohjelmointiprosessin alkua projektin debug-tarkoituksia varten. Tulemme
käyttämään tietokannan sovelluskonttikuvan rakentamiseen tarvittavaa Dockerfile-tiedostoa myös myöhemmin, kun rakennamme ja julkaisemme sovelluksen tuotantovaiheeseen.
Ohjelmakoodi 5 Dockerfile-tiedosto MariaDB-tietokannan rakentamiseen
FROM mariadb:10.5.8
ADD typing.sql /docker-entrypoint-initdb.d ENV MYSQL_ROOT_PASSWORD salasana
EXPOSE 3306
Luo Dockerfile-tiedosto muistiolla (Notepad) tai muulla vastaavalla tekstinkäsittelyeditorilla.
Lisää tiedostoon Ohjelmakoodi 5 esitetyt komennot ja tallenna tiedosto projektimme DatabaseLib-kansioon. Dockerfile-tiedoston sijainnilla ei ole sinänsä väliä tässä tapauksessa, mutta säilyttäessämme sen projektimme kansiorakenteessa on myöhemmin hyötyä, kun
käytämme Docker-compose-tiedostoa koko sovelluksen rakentamiseen. Huomioi, että Dockerfile-tiedostoilla ei ole määriteltyä tiedostopäätettä.
Ohjelmakoodi 6 SQL-skripti tietokannan alustamiseen
CREATE DATABASE `typinggame`;
SET time_zone = `Europe/Helsinki`;
USE `typinggame`;
CREATE TABLE `word` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`length` INT NOT NULL,
`typed` TEXT NOT NULL );
INSERT IGNORE INTO word (length, typed) VALUES
(4, "home"),(4, "move"),(4, "luck"),(4, "bass"),(4, "love"),(4,
"harm"),
(5, "pizza"),(5, "icons"),(5, "labor"),(5, "gauge"),(5, "cable"),(5,
"large"),
(6, "cactus"),(6, "iconic"),(6, "ladder"),(6, "abduct"),(6,
"easily"),(6, "income");
CREATE TABLE `highscore` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`time` DECIMAL(5,3) NOT NULL,
`datetime` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`username` VARCHAR(8) NOT NULL );
INSERT IGNORE INTO highscore (time, username) VALUES
(27.231, "Pertti"),(31.122, "Jimmy"),(37.621, "Johnny"),(17.838,
"Bob"),(26.915, "Helmut"),
(45.021, "Ismo"),(29.592, "Pirjo"),(32.532, "Tarja"),(22.122,
"Homer"),(27.784, "Jimbo");
Juuri luomassamme Dockerfile-tiedostossa on määritetty ADD-komento, joka käyttää Ohjelmakoodi 6 esiteltyä SQL-skriptiä alustaakseen tietokannan, jota tulemme käyttämään Blazor-sovelluksessamme. Luo uusi SQL-skriptitiedosto samaan kansioon aiemmin luodun Dockerfile-tiedoston kanssa ja anna sen nimeksi typing.sql. Avaa PowerShell-komentorivi järjestelmänvalvojana ja navigoi DatabaseLib-projektikansioon, joka sisältää luomamme Dockerfile- ja SQL-skripti-tiedostot. Rakenna uusi sovelluskonttikuva komennolla docker build -t mariaoppari:dev. Tämä komento rakentaa uuden sovelluskonttikuvan Dockerfile- tiedoston määrittelemillä asetuksilla ja antaa sille nimen mariaoppari tagilla dev.
Komento 2 PowerShell-komennot Docker-verkon luomiseen ja MariaDB-tietokannan määritykseen
docker network create -d bridge --subnet 172.25.100.0/16 oppari-nw docker run --name blazoroppari-maria --mount
type=volume,source=mariavol,target=/var/lib/mysql -p 3306:3306 -- network oppari-nw --ip 172.25.100.11 -e MYSQL_ROOT_PASSWORD=salasana - d mariaoppari:dev
Syötä PowerShell-komentoriville Komento 2 listattu ensimmäinen komento, jolla luodaan uusi Docker-verkko nimeltä oppari-nw. Docker käyttää oletuksena aliverkkoa 172.17.0.0/16 sovelluskonteille, joten antamalla omalle aliverkollemme osoitteen 172.25.100.0/16 erottaa sen selkeästi oletusarvosta.
Seuraavaksi suoritamme tietokantamme sovelluskontin ja annamme sille käyttöön juuri luomamme verkon lisäksi oman volyymin (Volume), jossa säilytetään pysyvästi tietokannan sisältämää dataa. Komento 2 listatun toisen komennon mukaan käyttämäämme MariaDB- sovelluskonttia tullaan kutsumaan nimeltä blazoroppari-maria, sen volyymia tullaan kutsumaan nimeltä mariavol, sen IPv4-osoite oppari-nw-verkossa tulee olemaan
172.25.100.11:3306, ja root-käyttäjän salasanaksi on asetettu helppokäyttöisyyden vuoksi
”salasana”. Huomioi komennon viimeisenä argumenttina oleva sovelluskonttikuva, joka on nimetty aikaisemmin rakentamamme MariaDB-sovelluskonttikuvan mukaan
mariaoppari:dev.
Ohjelmakoodi 7 Muutokset projektin .csproj- ja appsettings.json -tiedostoihin
#BlazorOppari.csproj
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
<UserSecretsId>27b75b61-2723-45c4-9ea8-200f7af8bbca</UserSecretsId>
<DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
<DockerfileRunArguments>--network oppari-nw --ip 172.25.100.10</DockerfileRunArguments>
</PropertyGroup>
#appsettings.json
"AllowedHosts": "*",
"ConnectionStrings": {
"default":
"Server=172.25.100.11;Port=3306;Database=typinggame;Uid=root;Pwd=s alasana;"
}
Palaa takaisin Visual Studio -työtilaan ja valitse Solution Explorer -valikosta projektin nimi, josta pääset muokkaamaan projektin .csproj -tiedostoa. Lisää tiedostoon Ohjelmakoodi 7
vahvennetulla tekstillä merkitty rivi, jossa määritetään sovelluksemme käyttämä Docker- verkko ja IPv4-osoite. Avaa vielä projektin appsettings.json-tiedosto ja lisää siihen Ohjelmakoodi 7 vahvennetulla tekstillä merkitty tietokantayhteyden määritys. Tallenna muutokset ja käynnistä Visual Studion työtila uudestaan, jotta muutokset sovelluksemme käyttämään sovelluskonttiin tulevat voimaan.
Varmista, että Blazor-projektin sekä MariaDB:n sovelluskontit ovat käynnissä joko
dashboard-käyttöliittymän avulla, tai kirjoittamalla PowerShelliin docker ps --all -komento.
Kirjoita PowerShelliin komento docker network inspect oppari-nw tutkiaksesi aiemmin luotua Docker-verkkoamme ja huomaa, kuinka verkkoon on liitetty sekä Blazor-, että MariaDB-sovelluskontit, ja kuinka ne käyttävät määrittelemiämme IPv4-osoitteita.
6.3 Blazor-komponenttien ohjelmointi
Blazor-projektimalli tarjoaa käyttäjälleen valmiiksi hyvän rakenteen, jonka pohjalle on mahdollista rakentaa nopeasti uusia web-sivuja tai komponentteja. Pages-kansiossa sijaitseva _Host.cshtml-tiedosto määrittää web-sivullemme varsinaisen HTML-pohjan, ja Shared-kansiossa sijaitseva MainLayout.razor-tiedosto määrittää sille ”body”-osuuden, joka taas saa sisältönsä Pages-kansiossa sijaitsevista Razor-komponenteista. Tämän lisäksi
projektimallissa on valmiiksi ladattuna Bootstrap 4 CSS-viitekehys, jonka avulla on
mahdollista tehdä nopeita muokkauksia web-sivuston ulkoasuun. Käyttäjän omiin koko web- sivustoa kokevat CSS-tyylit on mahdollista lisätä site.css-tiedostoon, joka sisältää wwwroot- kansiossa. Tämä kansio on myös Blazor-sovelluksen rakenteessa paikka, josta haetaan kaikki staattiset tiedostot, kuten kuvat web-sivuston käyttöön (Microsoft Docs, 2020b).
Aloitetaan kirjoittamalla Blazor-sovelluksellemme malliluokat, joita käytämme käsittelemään kahta tietokantataulua, jotka luotiin aiemmin alustaessasi MariaDB-tietokannan
sovelluskontin (Ohjelmakoodi 5). Nämä malliluokat noudattavat samoja periaatteita kuin yleisissä MVC-suunnittelumalleissa, sisältäen metodit jokaiselle tietokantataulun eri muuttujalle. Pitääksemme sovelluksemme rakenteen selkeänä, nämä luokat on hyvä pitää erillään omissa kansioissaan, kuten esimerkiksi jo valmiina olevassa Data-kansiossa.
Ohjelmakoodi 8 Malliluokat tietokantakyselyihin
public class HighScoreModel {
public int Id { get; set; } public double Time { get; set; }
public DateTime Datetime { get; set; }
[Required(ErrorMessage = "A name is required.")]
[StringLength(8, ErrorMessage = "Max 8 characters.")]
[MinLength(4, ErrorMessage = "Min 4 characters.")]
public string Username { get; set; } }
public class WordModel {
public int Id { get; set; } public int Length { get; set; } public string Typed { get; set; } }
Molemmat malliluokat ovat nimetty kuvaavasti TaulunNimiModel.cs-muotoon, ja ne sisältävät kaikki tarpeelliset metodit tietokantataulujen käsittelyyn, kuten Ohjelmointikoodi 8 esittää. Poikkeuksellista HighScoreModel-malliluokassa on Username-metodia edeltävät attribuuttihuomautukset (en. Data annotations), joiden avulla on mahdollista määrittää mallin vastaanottamat hyväksyttävät parametrit, ennen kuin se hyväksytään lähetettäväksi tietokantaamme. Huomautuksiin on myös lisätty oma virheilmoitus, joka voidaan näyttää web-sovelluksen käyttäjälle hänen yrittäessään lähettää parametreja, joita malliluokkaamme ei ole määrätty hyväksymään. Ohjelmakoodi 8 esitettyjä huomautuksia tullaan käyttämään sovelluksessamme myöhemmin, kun käyttäjälle annetaan mahdollisuus tallentaa tuloksensa kirjoitusnopeustestistä tietokantaamme.
Seuraavaksi luomme projektiimme ensimmäisen Razor-komponentin, joka toimii
kirjoitusnopeustestisivumme pääkomponenttina (Parent component). Tämä komponentti tulee sisältämään aloitusnäkymän lisäksi listan kymmenestä parhaasta tuloksesta, jotka haetaan tietokannastamme heti komponentin käynnistyessä. Aloitusnäkymä sisältää lyhyen tekstin lisäksi painikkeen, josta käyttäjä voi aloittaa pelin. Aloittaessaan pelin
pääkomponentti muuttaa tilaansa, jolloin aloitusnäkymän tilalle tulee näkymä itse peliin, jota kutsutaan erikseen omasta alikomponentistaan. Tämän alikomponentin (Child component) tulemme luomaan myöhemmässä vaiheessa.
Ohjelmakoodi 9 TypingGame.razor -käytetyt moduulit ja luokat
@page "/typing"
@using DatabaseLib
@using BlazorOppari.Data
@using BlazorOppari.Components
@using Microsoft.Extensions.Configuration
@inject IConfiguration _config
@inject ISqlAccess _sql
Luo uusi Razor-komponentti (Razor Component) projektimme Pages-kansioon ja nimeä se muotoon TypingGame.razor. Aloita komponentti lisäämällä siihen Ohjelmakoodi 9 esitetyt seitsemän ohjelmakoodirivit, joissa määritetään komponentin käyttämä osoite web-
selaimessa, sekä tarvittavat luokkakirjastot ja palvelut, joista komponentti on
toiminnallisuuksiltaan riippuvainen. Huomaa, että kutsumme komponenttiin suurimmaksi osaksi palveluita, jotka olemme luoneet itse aikaisemmin. DatabaseLib-luokka ja ISqlAccess- palvelu sisältävät ohjaajat tietokantamme hallintaan ja BlazorOppari.Data on kansio, johon loimme malliluokkamme. BlazorOppari.Components on myös kansio, jota tulemme
käyttämään projektimme myöhemmässä vaiheessa, kun alamme rakentamaan sovellukseemme tarvittavia alikomponentteja.
Lisää juuri luomamme TypingGame.razor-komponentin jatkeeksi Liite 2 esitetyt
TypingGame.razor -ohjelmakoodirivit. Nämä koodirivit sisältävät HTML-koodin lisäksi C#- ohjelmointikielellä kirjoitettuja metodeja ja muuttujia, jotka yhdessä luovat Razor-
komponenttimme toiminnallisuuden. Käyttäjille näytettäviä HTML-elementtejä hallitaan if- else-lausekkeilla riippuen komponentin sen hetkisestä tilasta. Ensimmäisessä if-else-
lausekkeessa käyttäjälle näytettävää HTML-elementtiä hallitaan boolean-muuttujalla, jonka tilaa voidaan muuttaa GameStart()- ja GameStop()-metodeilla. Näiden metodien kutsut ovat hallittavissa button-elementeillä, joille on annettu Razor-syntaksin mukaiset @onclick- attribuutit. Toisella if-else-lausekkeella näytetään käyttäjälle Top10-lista sillä ehdolla, että tietokannasta on haettu vaadittu lista, ja että se on tallennettu scores-listamuuttujaan. Lista käydään läpi foreach-luupissa ja täydennetään taulukkoon Razor-syntaksin mukaisesti tyyliin
@muuttuja. Top10-listan haku tietokannasta tapahtuu OnInitializedAsync()-metodissa, joka suoritetaan komponentin käynnistyessä. Asynkroninen metodi pystyy suorittamaan
tehtävänsä ilman, että koko sovelluksen täytyisi odottaa sen valmistumista ennen seuraavia tehtäviä, mikä on etu esimerkiksi tietokantakyselyissä, joissa voi ilmaantua viivettä
(Microsoft Docs, 2020c).
Ohjelmakoodi 10 TypingGame.razor - Cascading Values
<CascadingValue Value="lowestScore" Name="LowestScore">
<TypingComponent @ref="typingComp"
RefreshTypingGame="@GameStop"/>
</CascadingValue>
Ohjelmakoodi 10 esitetyt ohjelmakoodirivit tarkoittavat TypingComponent-nimisen alikomponentin lisäämistä käyttäjän näkymään. Tälle alikomponentille on määritelty oma viite (@ref=), jonka avulla sille on mahdollista antaa komentoja pääkomponentista käsin (Microsoft Docs, 2020d). Tässä tapauksessa käytämme viitettä kutsuaksemme metodia, joka sijaitsee kyseisessä alikomponentissa. Alikomponentille on tämän lisäksi määritelty oma RefreshTypingGame niminen parametri, jonka avulla alikomponentti pystyy kutsumaan pääkomponentin metodin, joka on tässä tapauksessa GameStop()-metodi. Alikomponentin ympärille määritelty CascadingValue niminen Blazor-komponentti mahdollistaa nimensä mukaisesti vesiputousmaisen tavan viedä muuttujia alempiin komponentteihin. Tässä tapauksessa alikomponenttiimme viedään Top10-listamme viimeisen henkilön saavuttama aika lowestScore-muuttujassa, joka toimii minimituloksena kaikille käyttäjille pääsyksi Top10-listalle.
Seuraavaksi luomme ensimmäisen alikomponenttimme. Luo ensin projektimme
juurihakemistoon Components-niminen kansio, jota tulemme käyttämään säilönä kaikille alikomponenteillemme. Pitämällä Pages-kansiossa sijaitsevien varsinaisten web-sivu- komponentit erossa pienemmistä alikomponenteista on yksi hyvä tapa selkeyttää projektin rakennetta. Luo Components-kansioon uusi Razor-komponentti ja nimeä se muotoon TypingComponent.razor. Huomaa, että tämä on sama alikomponentti, jota kutsutaan Ohjelmakoodi 10 esitetyssä HTML-koodissa, ja että komponentin polku on otettu käyttöön Ohjelmakoodi 9 alussa rivillä @using BlazorOppari.Components.
Ohjelmakoodi 11 TypingComponent.razor -komponentin ”input”-elementti
<p style="font-size: 40px">
@(countdown != 0 ? countdown : currentWord)</p>
@if (!gameOver) {
<input style="height: 35px;margin-bottom: 1rem;" @bind="wordGuess"
@bind:event="oninput" @onkeyup="@CheckGuess" />
}
Lisää juuri luomaamme TypingComponent.razor-komponenttiimme Liite 2 esitetyt TypingComponent.razor -ohjelmakoodirivit. Tämä komponentti sisältää varsinaisen
toimintalogiikan pelillemme. Komponentin käynnistyttyä käyttäjälle näytetään Ohjelmakoodi 11 esitetty ”input”-elementillä määritelty tekstikenttä, sekä lyhyt kolmen sekunnin
lähtölaskenta, ennen kuin käyttäjä voi alkaa kirjoittamaan ruudulle ilmestyviä sanoja.
Lähtölaskennan päätyttyä komponentti käynnistää ajastimen, joka mittaa käyttäjän suoritusnopeuden aina pelin loppuun saakka.
Ohjelmakoodi 12 TypingComponent.razor - CheckGuess-metodi
private void CheckGuess() {
if (wordGuess == currentWord) {
wordGuess = "";
GetWord();
InvokeAsync(StateHasChanged);
} }
Tapa, jolla komponentti joutuu lähes jatkuvasti päivittämään siinä esiintyviä muuttujiaan, vaatii useasti erillisen komponentin päivityspyynnön, joka hoidetaan ohjelmakoodissa InvokeAsync(StateHasChanged)-metodilla. Tämä metodi kutsutaan esimerkiksi
Ohjelmakoodi 12 esitetyssä CheckGuess()-metodissa, jota kutsutaan aina kun käyttäjä on syöttänyt tekstikenttään jonkin kirjainmerkin. Käyttäjän syötteet määritetään wordGuess- muuttujaan ”input”-elementin @bind-attribuuteissa. Nämä @bind-attribuutteihin sidotut tapahtumat eivät vaadi komponentin erillistä uudelleen päivittämistä (Microsoft Docs, 2020e), vaan käyttäjän syöttämää tekstiä voidaan verrata oikeaan vastaukseen aina, kun syötetty teksti muuttuu käyttäjän toimesta, kuten ”input”-elementin @onkeyup-
attribuutissa on määritelty.
Ohjelmakoodi 13 TypingComponent.razor - Alikomponenttiin viety arvo
// From TypingGame.razor
[CascadingParameter(Name = "LowestScore")]
private double lowestScore { get; set; } // Callback from MadeTopListComponent.razor [Parameter]
public EventCallback RefreshTypingGame { get; set; }
Pääkomponentista tuotu lowestScore-muuttujan arvo vastaanotetaan alikomponentissa Ohjelmakoodi 13 esitetyllä tavalla. Tätä arvoa verrataan käyttäjän omaan tulokseen
määrittääksemme käyttäjän mahdollisuudet päästä uudelle Top10-listalle, jossa tapauksessa käyttäjälle näytetään lomake, johon hän voi syöttää oman nimimerkkinsä. Tämä lomake ja sen toiminnot sijaitsevat erillisessä alikomponentissa. Tälle alikomponentille viedään käyttäjän saavuttama tulos totalTime-muuttujan muodossa hyödyntämällä Blazorin CascadingValue-komponenttia täysin samalla tavalla, kuin veimme aiemmasta
pääkomponentista lowestScore-muuttujan arvon. Tälle alikomponentille on määritelty myös sama RefreshTypingGame-parametri, joka aikaisemmin annettiin pääkomponentissa
TypingComponent-komponentille. Tämän parametrin avulla alikomponentti voi kutsua RefreshRequest()-metodin, jonka tehtävänä on suorittaa EventCallback-tapahtumakutsu tämän komponentin pääkomponentille, joka tässä tapauksessa tarkoittaa
TypingGame.razor-komponenttia. Kutsuttaessa pääkomponentin metodeja alikomponenttia alemmista komponenteista parametreilla, käsky metodin suorittamiseen täytyy tulla
vesiputousmallin mukaisesti jokaisen välillä olevan komponentin kautta.
Luo Components-kansioon Razor-komponentti ja nimeä se MadeTopListComponent.razor muotoon. Tämä komponentti tulee sisältämään toiminnot käyttäjän tuloksen viemiseksi tietokantaamme, ja se on myös viimeinen komponentti web-sovelluksemme
toiminnallisuuksien kannalta.
Ohjelmakoodi 14 MadeTopListComponent.razor -komponentin ohjelmakoodi
@using DatabaseLib
@using BlazorOppari.Data
@using Microsoft.Extensions.Configuration
@inject IConfiguration _config
@inject ISqlAccess _sql
<h3>You made the top list!</h3>
<EditForm Model="@highScore" OnValidSubmit="@SendData">
<DataAnnotationsValidator />
<InputText id="name" placeholder="Your name" @bind- Value="highScore.Username" />
<button class="btn btn-primary" type="submit">Send</button>
<ValidationSummary />
</EditForm>
@code {
private HighScoreModel highScore = new HighScoreModel();
[CascadingParameter(Name = "TotalTime")]
private double totalTime { get; set; } [Parameter]
public EventCallback RefreshTypingGame { get; set; } private async Task SendData()
{
highScore.Time = totalTime;
string sql = "insert into highscore (time, username) values (@Time, @Username);";
await _sql.WriteSqlData(sql, highScore, _config.GetConnectionString("default"));
await RefreshTypingGame.InvokeAsync();
} }
Lisää MadeTopListComponent.razor-komponenttiin Ohjelmakoodi 14 esitetty ohjelmakoodi.
Tässä komponentissa käyttäjälle esitetään lomake Blazorin EditForm-komponentilla, joka sisältää tekstisyötteen ja lähetä-napin lisäksi komponentit tekstisyötteen hyväksymiseksi ennen sen lähettämistä tietokantakäsittelijällemme. EditForm-komponentit voidaan määrittää noudattamaan tietyn malliluokan määrityksiä, kuten Ohjelmakoodi 8 esitettyä HighScoreModel-malliluokkaa, jonka loimme aiemmin voidaksemme käsitellä
tietokannassamme säilytettyjä käyttäjien tuloksia. HighScoreModel-malliluokassa määrittelemämme attribuuttihuomautukset otetaan käyttöön tässä komponentissa DataAnnotationsValidator-komponentilla, ja sen havaitsemat huomautukset tulostetaan erikseen käyttäjälle näkyviin ValidationSummary-komponentilla. Lomakkeen
OnValidSubmit-parametri kutsuu komponenttimme tietokantakyselyn pyytävän SendData()- metodin, kun käyttäjän tekstisyöte vastaa malliluokkamme sille määritettyjä ehtoja.
Tietokantataulun päivittäminen uudella tiedolla vaatii käyttäjänimen lisäksi käyttäjän saavuttaman tuloksen, joka tuodaan ylemmästä komponentista totalTime-muuttujana CascadingParameter-attribuutin avulla. Lisäksi komponenttimme lähettää onnistuneen tietokantakyselyn päätteeksi EventCallback-tapahtumakutsun sen pääkomponentille, joka on tässä tapauksessa TypingComponent.razor. Tämä tapahtumakutsu aloittaa pyyntöketjun, jonka tarkoituksena on kutsua TypingGame.razor-komponenttimme GameStop()-metodi, tarkoituksenaan päivittää koko sivu lähtötilanteeseen, jossa käyttäjän näkyvillä on vain aloitusnäkymän lisäksi Top10-lista parhaimmista tuloksista.
Projektin lopuksi voit lisätä Shared-kansiossa sijaitsevaan NavMenu.razor-komponenttiin uuden NavLink-komponentin kirjoitusnopeustestipelillemme, sekä vaihtoehtoisesti poistaa Blazor-projektimallipohjan esimerkkisivut kokonaan projektistamme. Tässä kappaleessa esitetyt HTML-koodit käyttävät tyylinään Blazor-projektimallipohjan tarjoaman Bootstrap CSS-viitekehyksen oletusarvoja, sekä kahta muokattua arvoa TypingGame.razor-
komponentin kohdalla. Lisää nämä kaksi CSS-tyyliä site.css-tyylitiedostoon .h-40 ja .h-60 muodoissa.
6.4 Rakentaminen ja julkaisu Docker Hubiin
Kun aloitimme uuden Blazor Server App -projektin, valitsimme siihen Docker Engine -tuen, joka antaa projektillemme muun muassa automaattisesti tuen käyttää debug-toimintoa suoraan Docker-ympäristössä. Varmista sovelluksen toimivuus käynnistämällä debug-tila, ja käymällä peli ainakin kerran läpi. Huomioi, että luomamme MariaDB-sovelluskontti on myös käynnissä taustalla. Kun olet varmistanut web-sovelluksen toimivuuden, on aika käydä läpi itse sovelluksen rakentaminen siirrettäviksi sovelluskonttikuviksi. Käytämme tähän
tarkoitukseen Docker-compose-työkalua, joka rakentaa kaikki sovelluksemme tarvitsemat sovelluskontit, sekä tarvittavat Docker-verkot ja volyymit.
Ohjelmakoodi 15 Muutokset Blazor-projektin Dockerfile-tiedostoon
FROM mcr.microsoft.com/dotnet/sdk:5.0-buster-slim AS build WORKDIR /src
COPY ["BlazorOppari/BlazorOppari.csproj", "BlazorOppari/"]
COPY ["DatabaseLib/DatabaseLib.csproj", "DatabaseLib/"]
RUN dotnet restore "BlazorOppari/BlazorOppari.csproj"
COPY . .
WORKDIR "/src/BlazorOppari"
RUN dotnet build "BlazorOppari.csproj" -c Release -o /app/build
Avaa projektisi BlazorOppari-kansiossa oleva Dockerfile-tiedosto omavalintaisella
tekstinkäsittelyeditorilla ja lisää siihen Ohjelmakoodi 15 vahvennetulla tekstillä esitetty rivi.
Tämä Dockerfile-tiedosto on luotu automaattisesti Visual Studion toimesta ja se sisältää komennot sovelluksen rakentamiseen julkaisutilaan. Kun loimme uuden DatabaseLib- projektin tietokantakäsittelyjä varten, tätä projektia ei lisätty automaattisesti tähän Dockerfile-tiedostoon. Tekemällä tämän muutoksen varmistamme, että projektimme Docker-sovelluskonttikuvan rakentaminen sujuu ongelmitta.
Ohjelmakoodi 16 Web-sovelluksen docker-compose.yml -tiedosto
services:
db:
container_name: oppari-db build: ./DatabaseLib ports:
- 3306:3306 networks:
nw:
ipv4_address: 172.25.100.11 volumes:
- voldb:/var/lib/mysql app:
container_name: oppari-app build:
context: .
dockerfile: BlazorOppari/Dockerfile ports:
- 8080:80 networks:
nw:
ipv4_address: 172.25.100.10 depends_on:
- db networks:
nw:
name: oppari-nw ipam:
driver: default config:
- subnet: "172.25.100.0/16"
volumes:
voldb:
name: oppari-vol
Luo projektisi juurihakemistoon docker-compose.yml niminen tiedosto valitsemallasi tekstinkäsittelyeditorilla ja kopioi siihen Ohjelmakoodi 16 esitetyt rivit kokonaisuudessaan.
Projektisi juurihakemisto on kansio, joka sisältää koko projektisi soluutio (Solution)-
tiedoston, jonka tunnistaa .sln-tiedostopäätteestä. Tämä Docker-compose-tiedosto sisältää kaikki web-sovelluksemme tarvitsemat palvelut, sekä Dockerin verkko- ja
volyymimääritykset. Sovelluksemme käyttämä Docker-verkko, sekä molempien palvelujen käyttämät IP-määritykset ovat samat, kuin mitä määritimme ohjelmointiprojektin alussa.
Selkeyden vuoksi kaikille palveluille ja määrityksille on annettu oppari-etuliitteellä alkavat nimet, jolloin kaikki sovellukseen liittyvät osuudet ovat helposti tunnistettavissa Dockerin käyttäjälle.
Komento 3 PowerShell-komento Docker-compose tiedoston suorittamiseen
docker-compose up –build
Avaa PowerShell-komentorivi ja navigoi projektisi juurihakemistoon, jonne tallensit äskettäin luodun docker-compose.yml-tiedoston. Syötä Komento 3 esitetty komento aloittaaksesi prosessin, jossa luodaan tarvittaessa määrittelemäsi Docker-verkko ja -volyymi, sekä rakennetaan kahden palvelusi sovelluskonttikuvat, joiden pohjalta web-sovellus
käynnistetään Docker-ympäristössä. Seuratessasi prosessin edistystä komentoriviltä voit
huomata, kuinka Docker-compose tiedosto käy läpi palvelumme molemmat Dockerfile- tiedostot, luoden ja poistaen samalla tilapäisiä sovelluskontteja. Lopuksi Docker käynnistää molemmat palvelut juuri luoduista sovelluskonttikuvista, jolloin web-sovelluksemme on käyttövalmiina localhost-verkossa. Voit varmistaa palveluiden toimivuuden web-selaimessa navigoimalla http://localhost:8080-osoitteessa. Web-sovelluksen http-protokolla
määritettiin aiemmin docker-compose.yml tiedostossa, ja se käyttää tässä tapauksessa porttia 8080.
Komento 4 PowerShell-komennot sovelluskonttikuvien listaukseksi ja uuden kuvan vienti Docker Hub -palveluun
docker images
docker tag de5 dockertilisi/uusinimi docker push dockertilisi/uusinimi
Vie juuri rakentamasi Blazor web-sovelluksen sovelluskonttikuva Docker Hub -tilisi säilöön ottamalla mallia Komento 4 esitetyistä komennoista. Ennen kuin pystymme viemään sovelluskonttikuvan Docker Hub -palveluun, on se nimettävä muotoon, jossa määritämme oman Docker Hub -tilimme käyttäjätunnuksen sen nimen eteen. Sovelluskonttikuvan nimi toimii siis myös sen hakemistona Docker Hub -palvelussa, kuten Komento 4 esitetty viimeinen rivi havainnollistaa.
Varmistaaksesi sovelluskonttikuvan nimen; kirjoita komentoriville docker images -komento ja etsi sovelluskonttikuva, jonka nimi muodostuu Visual Studiolla luomasi projektin soluution (Solution) nimestä, sekä _app-päätteestä. Sovelluskonttikuvan varsinaisen nimen sijasta voit käyttää viittausta siihen ottamalla vain kolme ensimmäistä kirjainta kyseisen
sovelluskonttikuvan IMAGE ID -attribuutista. Komento 4 esitetty toinen rivi havainnollistaa tämän tavan, jossa sovelluskonttikuva luodaan eri tunnuksella käyttäen IMAGE ID -
attribuuttia. Käytä komennossa omaa Docker Hub -tilisi käyttäjätunnusta ja erota varsinaisen säilön nimi vinoviivalla. Lopuksi vie sovelluskonttikuva Docker Hubiin syöttämällä Komento 4 kolmannen rivin esittämällä tavalla. Säilön nimi on vapaavalintainen ja jos antamasi nimen mukaista säilöä ei jo löydy Docker Hub -tililtäsi, tullaan se luomaan sinulle automaattisesti.
