Webhotellin päivitys cPanelin ja Github Actionsin avulla

Tämä opas kertoo kuinka kotisivut voidaan tallentaa webhotellin palvelimelle Github Actionsien avulla ja kuinka niiden sisältöä päivitetään samaa menetelmää käyttäen.

Oppaan esimerkki ei ole “ainoa ja oikea tapa toimia”, vaan on tarkoitettu antamaan suuntaa tämän kaltaisen pulman eteen joutuvalle. Kaiken voi tehdä paremmin, mutta jostain on aina aloitettava.

Tehdään siis yksinkertainen kotisivu, joka tallennetaan nähtäville Webhotellin palvelimelle.

Projekti toteutetaan siten, että omalla koneella on työn alla oleva sivuston kehitysversio, josta sitten projektin edetessä voidaan julkaista palvelimelle nähtäville tuotantoversioita.

Lähtöoletukset

Oppaan suorittaminen edellyttää, että:

• käytössäsi on cPanelia tukeva Webhotelli
• sinulla on GitHub-tili
• koneellesi on asennettu Git-versionhallintaohjelmisto.

Mikäli edellytykset ovat kunnossa, lähdetään liikkeelle suorittamalla cPanelissa tarvittavat ennakkovalmistelut.

cPanel

Luodaan tätä projektia varten cPanelilla alidomain (subdomain), jonka alle tiedostot tullaan tallentamaan.

cPanelin pääsivun DOMAINS-välilehdeltä löytyy Subdomains-painike. Painike avaa Subdomains näkymän, joka sisältää lomakkeen, jonka avulla alidomaineja voidaan lisätä.

Lomakkeen Subdomain-kentän avulla määritetään minkä niminen subdomain halutaan lisätä, jonka jälkeen Create-painikkeen painallus lisää uuden alidomainin.

Mikäli toimenpide onnistui, ilmaantuu luotu alidomain sivun alalaidassa esitettävään listaan:

cPanelin pääsivulla FILES-välilehdeltä löytyy Filemanager-painike. Painike avaa tiedostojen hallintaa toimittavan File Manager -näkymän.

Hakemistojen joukkoon on ilmestynyt uusi hakemisto, johon juuri luodun alidomainin sisältö tallennetaan.

Seuraavaksi luodaan FTP-tunnukset, joiden avulla GitHub:sta käsin voidaan olla yhteydessä Web-palvelimelle.

Mikäli tilin luominen onnistuu, ilmestyy luotu tili sivun alalaidassa esitettävää FTP -tilien listaan:

Kopio Log In -sarakkeessa näkyvä käyttäjänimi talteen GitHub asetuksia varten.

Webhotellin puolella ollaan nyt valmiita ottamaan sivut vastaan.

GitHub

Luodaan uusi GitHub repository.

Kuvassa ollaan luomassa GitHub repositorya, jonka nimeksi tulee ajan-lasku. Nimeä valitessa on syytä pitää mielessä, että seuraavassa vaiheessa meidän pitää perustaa vastaavan niminen hakemisto omalle koneelle. Tätä hakemistoa tullaan käyttämään projektin työhakemistona.

Repositoryn luomisen jälkeen aukeaa näkymä, jossa on listattuna vaihtoehtoja, joita uuden repositoryn luomisen yhteydessä tyypillisesti tehdään seuraavaksi. Kopioidaan vaihtoehdoista ..or push an existing repository from the command line talteen myöhempää käyttöä varten.

    git remote add origin https://github.com/RaimoHaikari/ajan-lasku.git
    git branch -M main
    git push -u origin main
                

Huom! Sinulla ensimmäisellä rivillä oleva sanan origin jälkeen lukeva osuus vastaa sinun luomasi repositoryn nimeä.

Jatketaan edelleen GitHub:in parissa ja valitaan Settings-välilehti. Kun aukeavan sivun vasemman laidan valikosta valitaan kohta Secrets ja edelleen alavalinta Actions, aukeaa näkymä, jonka kautta voidaan syöttää FTP -päivityksessä tarvittavat tiedot.

Tämä tapahtuu New repository secret-painikkeen avulla.

Talletetaan kolme salaisuutta:

1. ftp_server(Muistiinpanojen FTP -osoite)
2. ftp_name(Muistiinpanojen Käyttäjä)
3. ftp_password(Muistiinpanojen Salasana)

Salaisuudet syötetään yksi kerrallaan.

Kun kaikki kolme salaisuutta on talletettu, sivun alalaidassa pitää sivun alalaidassa näkyä oheisen kaltainen listaus.

Jatketaan omalla koneella suoritettavan osion pariin.

Kehitysversio

Omalle koneelle luodaan GitHub repositoryn kanssa täsmälleen saman niminen hakemisto. Minun tapauksessani alihakemiston nimen pitää olla: ajan-lasku.

    mkdir ajan-lasku
                

Siirrytään kyseisen kansion sisälle ja tehdään kansiosta Git-projekti:

    cd ajan-lasku
    git init
                

Luodaan saman tien index.html tiedosto. Sen sisällöksi voi kopioida vaikka seuraavan koodinpätkän:

    <!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Suomalaisten vanha ajanlasku</title>
        </head>
        <body>
        <h1>Viikkolaskujärjestelmä</h1>
        <p>Vuosi jakaantui kahteen puolikkaaseen, talveen ja kesään.</p>
        <ul>
            <li>Ensimmäinen talvipäivä oli Calixtuksen päivänä 14. lokakuuta</li>
            <li>ensimmäinen kesäpäivä oli Tiburtiuksen päivänä huhtikuun 14:ntenä.</li>
        </ul>
        </body>
    </html>
                

Tämän jälkeen lisätään kaksi hakemistoa: ensiksi .github ja tämän hakemiston sisään: workflows

workflows hakemiston sisään luodaan actions.yml niminen tiedosto. Tässä tiedostossa määritellään toimenpiteet, jotka GitHub:in halutaan suorittavan.

actions.yml tiedoston sisällöksi kopioidaan seuraava json -koodi:

    on: push
    name: 🚀 Deploy website on push
    jobs:
        web-deploy:
        name: 🎉 Deploy
        runs-on: ubuntu-latest
        steps:
        - name: 🚚 Get latest code
            uses: actions/checkout@v2
        
        - name: 📂 Sync files
            uses: SamKirkland/FTP-Deploy-Action@4.3.2
            with:
            server: ${{ secrets.ftp_server }}
            username: ${{ secrets.ftp_name }}
            password: ${{ secrets.ftp_password }}
                

Koodi on peräisin osoitteesta: https://github.com/marketplace/actions/ftp-deploy. Kyseisellä sivulla esitellään automaattista, FTP:n avulla suoritettavaa päivitystä ja listataan tyypillisten käyttötilanteiden malleja.

Huomiota kannattaa kiinnittää koodinpätkän kolmeen viimeiseen riviin:

• secrets.ftp_server
• secrets.ftp_name
• secrets.ftp_password

Ne vastaavat GitHub repositoryn luomisen yhteydessä tallennettuja salaisuuksia.

Projektin juuresta käsi tilanteen pitäisi näyttää suurin piirtein seuraavalta:

Olemme valmiita tallettamaan tehdyt muutokset GitHub-repositoryyn.

Lisätään tehdyt muutokset committiin:

    git add .
    git commit -m 'Projektin avaus'
                 

Yhdistetään projekti GitHub repositoryyn:

    git remote add origin https://github.com/RaimoHaikari/ajan-lasku.git
                 

Sinulla originin jälkeen tulevan osuuden pitää vastaa omaa repositoryasi!

Pushataan tehdyt muutokset GitHub:iin:

    git branch -M main
    git push -u origin main
                 

Jos kaikki sujui hyvin, niin ensimmäisen päivityksen jälkeen:

GitHub:in Code-välilehti näyttää seuraavan kaltaiselta:

GitHub:in Actions-välilehdellä vallitsee jotakuinkin seuraava tilanne:

Luotu kotisivu näkyy cPanel:in tiedostolistauksessa:

Ja luotu alidomain on valmiina kaiken kansan tarkasteltavaksi:

Loppusanat

Kun latu on saatu avattua, niin kehitysversiossa tehdyt muutokset saadaan nyt helposti päivitettyä kotisivuille.

Tällöin riittävät seuraavat Git-käskyt:

    git add .
    git commit -m 'Kuvaus tehdyistä muutoksista'
    git push -u origin main
                

Joka ainoaa muutosta ei tietenkään kannata erikseen päivittää nähtäville, vaan päivityksiä on järkevämpää hoitaa paketteina, joissa on koottu yhteen mielekkäitä kokonaisuuksia. Seuraavaksi kannattaakin ottaa selvää versionhallinnan branch-ominaisuudesta ja siitä kuinka tätä ominaisuutta voidaan hyödyntää GitHub Actionseja koostettaessa.