I det følgende vil jeg vise hvordan du kan deploye jeres gruppeprojekt fra det tværfaglige projekt. I behøver ikke at lave projektet færdigt først. Faktisk bør man deploye så tidligt i udviklingsprocessen som muligt, så hellere i dag end i morgen.
Jeg vil tage udgangspunkt i en projekt-skabelon, som det anbefales at I tager udgangspunkt i når I skal lave jeres projekt.
Skabelonen består af et node.js-program, der både fungerer som web-server for jeres d3.js-visualisering, men også laver en databaseforbindelse, som jeres d3-kode kan hente data fra.
Til at starte med skal du hente en kopi af skabelonen. Du kan hente skabelonen fra GitHub ved at klone denne URL:
https://github.com/kdorland/postgres-client-template
Skabelonen fungerer ved, at man smider sin d3.js-visualisering (html, css, d3.js) ind i public-folderen. Jeres HTML skal dog anvende samme teknik som i skabelonen, dvs. at data nu hentes sådan her:
d3.json("/api/helloQuery", {
method: "POST",
}).then(function(response) {
const data = response.data; // Henter data fra query i main.js
console.log("data", data);
// TODO: Brug data til en d3.js visualisering
For at teste skabelonen, skal du stå i roden at projektfolderen i terminalen, og bruge følgende kommandoer:
$ npm install
$ npm start
Kommandoen npm install behøver man kun at køre første gang. Det er for at hente alle de pakker som programmet er afhængigt af.
Hvis du kører npm start uden at have en postgres-server kørende på localhost, så fejler programmet, fordi den ikke kan få forbindelse til databasen. Mere om dette i næste trin.
I dette punkt skal du lave en opsætning, så skabelonen henter data fra en database du har kørende - enten på localhost, eller en du har oprettet på elephantsql.com.
For at forbindelsen til databasen virker, skal man indstille host, brugernavn, password og name på databasen.
Der er to måder at gøre det på. Den simple måde er ved at indsætte database credentials i main.js-filen, men den gode løsning er ved at sætte værdierne igennem environment variables. Det kan fx gøres midlertidigt i en bash eller zsh-terminal som følger (værdierne forsvinder igen når man lukker terminalen):
export DB_USER="postgres"
export DB_PW="password123"
export DB_NAME="kristians-database"
export DB_HOST="localhost"
Hvis du bruger elephantsql, så er database-navnet og brugernavnet typisk det samme.
Test herefter at skabelonen virker og forbinder til databasen når du starter den med npm start.
I dette punkt skal hele skabelonen, inklusiv din egen kode som du har lagt i public, lægges i et nyt friskt GitHub-repository. Her kan du følge guiden fra tidligere. Det er vigtigt, at det hele havner i roden af et repository, og ikke i en undermappe.
Nu skal du oprette en konto på www.render.com. Det er ganske gratis. Hvis du går ind på siden og trykker på “Get Started”, kan du oprette dig med din Google eller GitHub-account. Eller du kan starte fra bunden af med din email-adresse. Følg instruktionerne i den email du får.
Når du er kommet ind i Render.com Dashboard, skal du oprette en ny 'Web Service". Formålet med dette er, at du kan køre dit node.js-projekt i skyen på Render.com’s platform. Akkurat som når du kører npm start i din konsol, men nu “oppe i skyen”. Når du opretter en ny web service, vil du blive bedt om at forbinde din GitHub account, og det er så Render.com kan få adgang til den kode, der skal køres.
Når du har lavet forbindelsen til GitHub, skal du vælge det korrekte repository med dit node.js-projekt og trykke “Connect”.
Herefter er de tid til at udfylde nogle vigtige oplysninger for din web service:
npm install, da det er den kommando vi bruger til at bygge projektet.npm start.Hvis I har valgt den simple løsning hvor credentials står direkte i “main.js”, behøver I ikke gøre yderligere for at få forbindelse til databasen, men hvis I har valgt at bruge “environment variables”, skal I nu trykke på knappen “Advanced” og indsætte de fem environment variables herunder med korrekte key (navn) og value.
Nu skal I trykke på Create Web Service-knappen.
Når man kører med gratis-udgaven, er Render.com desværre ret sløv til at starte op. Der kan nemt gå 10 minutter.
Hold browser-tabben åben og følg med i hvad der sker i den indbyggede terminal. Den burde skrive hvis alt går godt, eller hvis der opstår fejl undervejs.
Render.com er indrettet sådan, at hver gang du pusher nye ændringer til jeres GitHub repository, så fanger Render.com ændringerne, og bygger en ny udgave af jeres web service. Det er et af kerneelementerne i “Continuous delivery”.
Nogle gange vil der opstå fejl, og så skal man ind I render.com og kigge i konsollen. Ofte vil samme fejl vise sig på localhost, så tjek også altid om jeres projekt kører som det skal lokalt på jeres egen PC, inden I begynder at fejlsøge direkte på Render.com. Det er sjældent at en fejl kun findes det ene sted, hvis I ellers kører med samme database, og bruger den rigtige opsætning.