deployment

Deployment

Voordat DogeMeet online te bezoeken is moest ik hem deployen. Ik heb gekozen om hiervoor Heroku te gebruiken. Ik heb mede voor Heroku gekozen, omdat mijn medestudenten er positief over Heroku waren. Verder had Heroku een hele overzichtelijke en complete documentatie en is het via de terminal te gebruiken. Het is dus heel eenvoudig om een nieuwe versie van je project op Heroku te zetten.

Hoe heb ik het gedaan?

1. Het installeren van Heroku

Via de website van Heroku was het heel eenvoudig om een account aan te maken. Het was helaas niet mogelijk om via Google in te loggen. Na het aanmaken van een account heb ik Heroku met de installer op de getting started pagina geïnstalleerd.

Ik heb vervolgens door het commando heroku in mijn terminal gecontroleerd of Heroku correct was geïnstalleerd. Dit werkte zonder enige problemen dus Heroku was correct geïnstalleerd. Met het commando heroku login kon ik via de browsen inloggen op Heroku in mijn terminal. Volgens de documentatie moest ik ook controleren of Git, Node.js en NPM correct waren geïnstalleerd. Ik wist al dat deze op mijn machine stonden, vandaar dat ik deze stap heb overgeslagen.

2. Het aanmaken van het Heroku project

Door in de root folder van je project het commando heroku create uit te voeren werd er een extra remote repository voor mijn project aangemaakt. De code in de main of master branch van deze repository wordt gedraaid zodra iemand mijn Heroku website bezoekt. Deze repository was na het aanmaken natuurlijk nog leeg. Door het commando git push heroku main uit te voeren werd mijn code in de repository gezet.

3. Het toevoegen van de Procfile

Heroku heeft een zogenaamde Procfile nodig om een applicatie te kunnen opstarten. Hierin moet je het commando neerzetten die moet worden uitgevoerd om je applicatie te starten. Het bestand moest Procfile genoemd worden, zonder file extension. In mijn geval was het commando web: npm start.

4. Toevoegen van de variabelen uit je .env bestand

Het .env bestand, waar al de gevoelige variabelen in zijn opgeslagen, staat natuurlijk in mijn .gitignore. Toen de code bij de tweede stap in de Heroku repository is gezet is dit bestand natuurlijk niet meegenomen. Deze variabelen moeten nu dus op een andere manier worden ingevoerd. Heroku gebruikt hier het commando heroku config voor. Bij het uitvoeren van deze stap gingen er bij mij een aantal dingen mis.

Op het moment van schrijven werkt mijn feature nog zonder back-end. Ik heb echter al wel een test functie geschreven die verbinding maakt met mijn database en dit in de console weergeeft. Mijn project draaide dus al op Heroku na de derde stap, maar ik wilde graag ook controleren of hij al via Heroku was verbonden met mijn database.

Ik heb dus door het commando heroku config:set DB_URI=”value” uit te voeren de DB_URI variabele aan mijn Heroku config toegevoegd. Om te controleren of dit was gelukt voerde ik het commando heroku logs --source app uit. Door dit commando uit te voeren kon ik al de logs zien die normaal in je terminal komen te staan zien. De server draait nu natuurlijk op Heroku dus de logs zullen daar ook worden weergegeven. Ik kon hier echter niet de verwachte logs vinden. Er werd een error weergegeven dat de DB_URI waarde niet valide was.

Het wachtwoord van mijn database user eindigde met een uitroepteken. In de DB_URI link werd dit uitroepteken gevolgd door een @ symbool. Wanneer ik het commando uitvoerde om de DB_URI variabele toe te voegen kreeg ik de volgende output.

zsh: event not found: @project

Toen ik de DB_URI probeerde in te vullen zonder het uitroepteken aan het einde van het wachtwoord werkte het commando wel. Dit moest ik natuurlijk ook even wijzigen in mijn database user op MongoDB Atlas. Hier heb ik ook 0.0.0.0/0 toegevoegd aan de whitelist. Dit heb ik gedaan omdat Heroku ook bij de gegevens op mijn database moet kunnen komen.

Hier eindigde mijn problemen echter nog niet. Blijkbaar had ik per ongeluk de verkeerde waarde ingevuld bij het uitvoeren van het volgende commando. Ik had namelijk het volgende geschreven.

heroku config:set DB_URI=”DB_URI=value”

Hierdoor klopte de waarde van mijn DB_URI variable natuurlijk niet. Na dit gecorrigeerd te hebben kreeg ik de verwachte output na het uitvoeren van heroku logs --source app.

5. Nieuwe wijzigingen doorgeven

Het doorgeven van veranderingen in de code moet op dezelfde manier gedaan worden als het pushen naar je repository op github namelijk:

1. git add .
2. git commit -m “Super cool commit message”
3. git push heroku main

De wijzigingen kunnen dan terug worden gevonden op mijn live Heroku site.

Bronnen

• Heroku Dev Center. (z.d.). Getting Started on Heroku with Node.js. Geraadpleegd op 18 mei 2021, van https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up
• Heroku Dev Center. (z.d.). Preparing a Codebase for Heroku Deployment. Geraadpleegd op 18 mei 2021, van https://devcenter.heroku.com/articles/preparing-a-codebase-for-heroku-deployment
• Heroku Dev Center. (z.d.). Deploying with Git. Geraadpleegd op 18 mei 2021, van https://devcenter.heroku.com/articles/git#creating-a-heroku-remote