Je lokale server leest de sleutel tijdens het bouwen en testen.
Les 5 van 8
Deploy je AI-integratie veilig
Je zet eerst de AI-app uit les 4 veilig op internet via een private GitHub-repository en Vercel. Je controleert de geheime API-sleutel en test de live koppeling. Daarna bouw je in een nieuw project zelf een kleine AI-feedbackapp.
Van lokaal naar live
.env.local blijft op jouw computer
Je lokale server leest OPENROUTER_API_KEY uit.env.local. Vercel krijgt dat bestand niet. Je zet dezelfde variabelenaam daarom apart in de beveiligde instellingen van het Vercel-project.
De live server krijgt de sleutel uit de instellingen van dit project.
Publiceer via private GitHub en Vercel
Laat je tool een private GitHub-repository maken, de code pushen en het project aan Vercel koppelen. Controleer in GitHub zelf dat de repository echt op Private staat.
Open de instellingen van het juiste project
Ga in Vercel naar Settings → Environment Variables. Controleer de projectnaam voordat je een sleutel toevoegt.
Voeg alleen de API-sleutel toe
Voeg OPENROUTER_API_KEY toe met dezelfde waarde als lokaal. Markeer de waarde als Sensitive als Vercel die keuze toont. De modelcodes uit les 4 staan in de servercode en hoeven niet als environment variables naar Vercel.
Kies de omgeving en deploy opnieuw
Kies Production voor de live site. Voeg Preview toe als je eerst een tijdelijke testlink gebruikt. Een nieuwe of gewijzigde variabele werkt pas in een nieuwe deployment.
Controleer de hele keten
Werkt de AI ook via de live URL?
Open de Vercel-link en voer één test uit. Controleer daarna in Vercel of OPENROUTER_API_KEY bij het juiste project staat. Een verwijderde of ongeldige sleutel zorgt ervoor dat de AI-aanvraag stopt; je hoeft je sleutel niet te verwijderen om dat zelf te testen.
Drie bewijzenDe GitHub-repository staat op Private.
Vercel bevat precies de beveiligde variabele OPENROUTER_API_KEY.
Na de nieuwe deployment geeft de live app een AI-antwoord.
Zelf aan het werk
Bouw nu zelf een kleine AI-feedbackapp
Maak een nieuwe, lege map en breid de app uit les 4 niet uit. Bouw een website met een vraag, een invoerveld voor het antwoord en AI-feedback nadat de leerling op een knop klikt. Kies zelf de vraag, vormgeving en feedbackinstructie. Terugkijken mag; deze tweede app hoeft in deze les nog niet online.
Je opdracht in één zinLaat een leerling iets invullen en geef daarna met AI een bruikbare reactie op dat antwoord.
Nu doen
Actie van deze les
Deploy les 4 veilig en bouw daarna zelf opnieuw
Publiceer eerst de app uit les 4 en controleer de live koppeling. Maak daarna in een nieuwe, lege map je eigen kleine AI-feedbackapp. Die tweede app hoeft nog niet online.
0van 4 stappen gedaan
Checklist
0 van 4 gedaan
De app uit les 4 staat in een private GitHub-repository en is aan Vercel gekoppeld.
Het Vercel-project bevat alleen OPENROUTER_API_KEY als beveiligde variabele en niet als NEXT_PUBLIC-variabele.
Ik heb opnieuw gedeployed en de AI-uitleg via de live URL getest.
Ik heb in een nieuwe, lege map een app gebouwd met een vraag, een invoerveld en AI-feedback.
Klaar als:
Je hebt de app uit les 4 veilig online gezet en daarna zelfstandig een nieuwe kleine AI-integratie gebouwd.
Vragen en opmerkingen
Praat verder over deze les
Stel een vraag, lees mee of help een andere cursist op weg.
Je kunt alle vragen lezen. Log in of registreer gratis om zelf mee te praten.
Log in of registreer0 vragenAlles is beantwoord
Vragen laden...