Infrastructuur

Infrastructuur

Go live!

Infrastructuur

  • Wat verstaan we onder infrastructuur?

Infrastructuur

  • Wat verstaan we onder infrastructuur?
    • Alles dat nodig is om uw applicatie te beheren
      • Servers
      • Databases
      • Domeinnamen
      • CDNs
      • ...

Infrastructuur

  • Vroeger
    • Veel on-premise en fysiek materiaal
  • Nu
    • Vooral cloud services (software)

Infrastructuur

  • De grote 3:
    • Amazon Web Services (AWS)
    • Microsoft Azure
    • Google Cloud Platform
  • Daarnaast levert België met team.blue (o.a. Combell)
    één van de grootste Europese spelers

Go live

  • Wat hebben we nodig?
    • Database (PostgreSQL) - Render
    • API server (Strapi) - Render
    • Static hosting (React) - Netlify
    • Deployment pipelines (Github) - Netlify

Go-live

  • What about the money?
    • Free tier van veel providers
    • Opschalen wanneer nodig

Go-live

  • Hoe werkt het (vaak) indien Gitflow wordt toegepast?
    • 3 live omgevingen:
      • DEV (develop)
      • ACC (release/x.y.z)
      • PROD (main)
    • Soms feature builds voor commits naar een feature branch
    • Elke omgeving heeft zijn eigen infrastructuur:
      server(s), database, statische hosting, (sub)domeinnamen ...

Gitflow

Go-live

  • Wij gaan voor een afgeslankte versie
    • 1 live-omgeving
    • Geen release branches
    • Commit naar main → build & deploy
    • Lokaal: eigen database

Go-live

  • Wat hebben we nodig?
    • Database (PostgreSQL) - Render
    • API server (Strapi) - Render
    • Static hosting (React) - Netlify ✅
    • Deployment pipelines (Github) - Netlify ✅
  • Wat hebben we nodig?
    • Database (PostgreSQL) - Render
    • API server (Strapi) - Render
    • Static hosting (React) - Netlify ✅
    • Deployment pipelines (Github) - Netlify ✅

Infrastructuur

Netlify

Netlify

  • Merge uw pull request
  • Merge develop naar main
  • Maak uw repository public
  • Maak een account op Netlify
  • New project
  • "Importeer" uw repository

Netlify

Netlify

  • Preview URL
    • xyz.netlify.app
  • Indien OK: elke push naar main start een nieuwe build
  • Test dit door iets klein te wijzigen

Netlify

  • Waarom werkt onze applicatie nog niet? 🤔

Netlify

  • Waarom werkt onze applicatie nog niet? 🤔
    • API URL is nog hard-coded op localhost
      • ​Oplossing? Omgevingsvariabelen (later)

Netlify

  • Wat hebben we nodig?
    • Database (PostgreSQL) - Render
    • API server (Strapi) - Render
    • Static hosting (React) - Netlify ✅
    • Deployment pipelines (Github) - Netlify ✅

Infrastructuur

Render - database

Render - database

  • Maak een account op Render
  • Add new → Postgres

Render - database

  • Laat alles zoveel mogelijk default.
    Pas enkel volgende settings aan:
    • Name: jammin (of iets anders ...)
    • Region: Frankfurt
    • Instance type: Free (!)
       
  • Note:
    • Je kan max. 1 free tier database hebben
    • Een free tier database vervalt na 1 maand

Render - database

  • Wat hebben we nodig?
    • Database (PostgreSQL) - Render ✅
    • API server (Strapi) - Render 
    • Static hosting (React) - Netlify ✅
    • Deployment pipelines (Github) - Netlify ✅

Render - database

  • Maar ...
    • Lokaal willen we niet werken tegen de
      productie database
    • Oplossing?
      Lokale PostgreSQL server 

Render - database

Render - database

  • Lokale PostgreSQL server
    • Windows
      • Open psql
      • Quit?
        → \quit

Render - database

  • .env aanpassen
    • Mac (Postgres.app)

Render - database

  • .env aanpassen
    • Windows

Render - database

  • .env aanpassen
    •  DATABASE_SSL=false 
  • database.js aanpassen
  • npm install pg

Render - database

  • Testen of dit werkt ...
    • npm run develop
       

Infrastructuur

Render - API server

Render - API server

  • Add new → Web Service
    • Name: jammin-api (of iets anders ...)
    • ​Root directory: server
    • Instance type: Free
    • Region: Frankfurt
    • Build command: npm install && npm run build
    • Start command: npm run start

Render - API server

  • Add new → Web Service
    • .env kopiëren naar Render
    • database.js aanpassen: verander sqlite naar postgres 
# kopieer onderstaande uit .env naar Render

HOST=0.0.0.0
PORT={leave unchanged}

APP_KEYS={leave unchanged}
API_TOKEN_SALT={leave unchanged}
ADMIN_JWT_SECRET={leave unchanged}
TRANSFER_TOKEN_SALT={leave unchanged}

DATABASE_CLIENT=postgres
DATABASE_HOST={Render database settings}
DATABASE_PORT={Render database settings}
DATABASE_NAME={Render database settings}
DATABASE_USERNAME={Render database settings}
DATABASE_PASSWORD={Render database settings}
DATABASE_SSL=true
DATABASE_FILENAME={leave unchanged}
JWT_SECRET={leave unchanged}
// database.js

module.exports = ({ env }) => {
  const client = env("DATABASE_CLIENT", "postgres");
  
  // ...
};

Render - API server

  • Add new → Web Service
    • Onder "Events" kan je de build (logs) opvolgen

Render - API server

  • Add new → Web Service
    • Indien succesvol krijg je "Your service is live" te zien
[2025-05-19 21:02:25.089] info: Strapi started successfully
[2025-05-19 21:02:25.448] http: HEAD / (11 ms) 302
==> Your service is live 🎉

Render - API server

  • Wat hebben we nodig?
    • Database (PostgreSQL) - Render ✅
    • API server (Strapi) - Render ✅
    • Static hosting (React) - Netlify ✅
    • Deployment pipelines (Github) - Netlify ✅

Render - API server

  • Onze React-applicatie op Netlify moet nu connecteren met onze API server i.p.v. localhost
    • Oplossing? Omgevingsvariabele NODE_ENV=production
  • import.meta.env.PROD === true
    in onze applicatie

Render - API server

  • In constants.js 
export const API_URL = import.meta.env.PROD
  ? "https://jammin-playground.onrender.com/api"
  : "http://localhost:1337/api";
  
export const API_TOKEN = import.meta.env.PROD
  ? "PROD token"
  : "local token";
Made with Slides.com