Hoe een React-toepassing te implementeren naar het DigitalOcean App Platform

De auteur heeft Creative Commons geselecteerd om een donatie te ontvangen als onderdeel van het Write for DOnations-programma.

Inleiding

DigitalOcean’s App Platform is een Platform as a Service (PaaS)-product waarmee je applicaties kunt configureren en implementeren vanuit een bronrepository. Nadat je je app hebt geconfigureerd, zal DigitalOcean de applicatie op elke wijziging bouwen en implementeren, waardoor je profiteert van een volledige webserver en implementatiepijplijn met minimale configuratie. Dit kan een snelle en efficiënte manier zijn om je React-applicaties te implementeren, en als je React gebruikt om een site zonder backend te bouwen, kun je de gratis laag van App Platform gebruiken.

In deze tutorial zul je een React-toepassing implementeren naar het DigitalOcean App Platform met behulp van de gratis Starter-laag. Je zult een toepassing bouwen met Create React App, de code pushen naar een GitHub-repository, en vervolgens de toepassing configureren als een DigitalOcean-applicatie. Je zult de app verbinden met je broncode en het project implementeren als een set statische bestanden.

Tegen het einde van deze tutorial kun je een React-toepassing configureren om automatisch te implementeren bij elke push naar de hoofdbranch van een GitHub-repository.

Vereisten

• Op je lokale machine heb je een ontwikkelingsomgeving nodig met Node.js; deze tutorial is getest op Node.js-versie 10.22.0 en npm-versie 6.14.6. Om dit te installeren op macOS of Ubuntu 20.04, volg de stappen in Hoe Node.js te installeren en een lokale ontwikkelingsomgeving te maken op macOS of de sectie Node.js installeren met Apt met behulp van een NodeSource PPA van Hoe Node.js te installeren op Ubuntu 20.04.

• Git geïnstalleerd op uw lokale machine. U kunt de tutorial Bijdragen aan Open Source: Aan de slag met Git volgen om Git te installeren en in te stellen op uw computer.

• Een DigitalOcean-account.

• Een account op GitHub, dat u kunt aanmaken door naar de Maak uw account aan pagina te gaan.

• Je hebt ook basiskennis nodig van JavaScript, HTML en CSS, die je kunt vinden in onze How To Build a Website With HTML serie, How To Build a Website With CSS serie, en in How To Code in JavaScript.

Stap 1 — Een React Project aanmaken

In deze stap maak je een React-toepassing met behulp van Create React App en bouw je er een implementeerbare versie van.

Om te beginnen, maak een nieuwe applicatie aan met Create React App op je lokale machine. Voer in een terminal het commando uit om een applicatie genaamd digital-ocean-app te bouwen:

npx create-react-app digital-ocean-app

Het npx-commando zal een Node-pakket uitvoeren zonder het te downloaden naar je machine. Het script create-react-app zal alle afhankelijkheden installeren en een basisproject bouwen in de map digital-ocean-app. Voor meer informatie over Create React App, bekijk de tutorial Hoe je een React-project opzet met Create React App.

Het codeblok zal de afhankelijkheden downloaden en een basisproject maken. Het kan enkele minuten duren voordat het klaar is. Wanneer het voltooid is, ontvang je een succesbericht. Jouw versie kan enigszins verschillen als je yarn in plaats van npm gebruikt:

Output
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-app
  npm start

Happy hacking!

Nu je een basisproject hebt, voer je het lokaal uit zodat je kunt testen hoe het project er op de server uit zal zien. Verander eerst naar de betreffende directory:

cd digital-ocean-app

Voer het project uit met het npm start-script:

npm start

Wanneer het commando wordt uitgevoerd, ontvang je output met de URL voor de lokale ontwikkelingsserver:

Output
Compiled successfully!

You can now view digital-ocean-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

Open een browser naar http://localhost:3000 en je zult je project vinden:

Stop het project door CTRL+C of ⌘+C in de terminal in te typen.

Nu je een werkende React-toepassing hebt, kun je de code naar een GitHub-opslagplaats pushen.

Stap 2 – De code naar GitHub pushen

Om je app te implementeren, haalt App Platform je broncode op uit een gehoste code-opslagplaats. In deze stap duw je de code van je React-applicatie naar een GitHub-opslagplaats zodat App Platform er later toegang toe heeft.

Log in op je GitHub-account. Nadat je bent ingelogd, maak je een nieuwe opslagplaats met de naam digital-ocean-app. Je kunt de opslagplaats zowel privé als openbaar maken:

Create React App initialiseert je project automatisch met git, zodat je kunt instellen om de code rechtstreeks naar GitHub te pushen. Voeg eerst de opslagplaats toe die je wilt gebruiken met het volgende commando:

git remote add origin https://github.com/your_name/digital-ocean-app.git

Vervolgens geef je aan dat je naar de main-tak wilt pushen met het volgende:

git branch -M main

Tenslotte, push de code naar je opslagplaats:

git push -u origin main

Voer je GitHub-inloggegevens in wanneer daarom wordt gevraagd om je code te pushen.

Wanneer je de code pusht, ontvang je een succesbericht. Je bericht zal iets verschillen:

Output
Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/digital-ocean-app.git
   4011c66..647d2e1  main -> main

Je hebt nu je code gekopieerd naar de GitHub-opslagplaats.

In deze stap heb je je project naar GitHub gepusht zodat je er toegang toe hebt via DigitalOcean Apps. Vervolgens maak je een nieuwe DigitalOcean App met behulp van je project en stel je automatische implementatie in.

Stap 3 — Implementeren naar DigitalOcean App Platform

In deze stap implementeer je een React-toepassing naar het DigitalOcean App Platform. Je verbindt je GitHub-opslagplaats met DigitalOcean, configureert het project om te bouwen en bouwt je initiële project. Nadat het project live is, zal elke wijziging een nieuwe build triggeren en bijwerken.

Aan het einde van deze stap kun je een toepassing implementeren met continue levering op DigitalOcean.

Om te beginnen, log in op je DigitalOcean-account en klik op de Maken knop, en selecteer vervolgens Apps:

Je wordt vervolgens gevraagd om je GitHub-opslagplaats te koppelen. Als je het nog niet hebt verbonden, moet je inloggen met je gebruikersnaam en wachtwoord en DigitalOcean toestemming geven om toegang te krijgen tot je opslagplaatsen:

Zodra je je account hebt gekoppeld, selecteer je de opslagplaats die je wilt verbinden op het GitHub-autorisatiescherm. In dit geval gebruik je de digital-ocean-app opslagplaats, maar je kunt meer opslagplaatsen verbinden indien gewenst:

Nadat je het repository hebt geselecteerd, zul je opnieuw verbinding maken met de DigitalOcean-interface. Selecteer digital-ocean-app uit de lijst met repositories en druk vervolgens op Volgende. Hiermee wordt je App rechtstreeks verbonden met het GitHub-repo:

Nu je je repository hebt geselecteerd, moet je de DigitalOcean App configureren. In dit voorbeeld zal de server gebaseerd zijn in Noord-Amerika door New York te kiezen in het veld Regio, en de implementatiebranch zal main zijn. Kies voor je app de regio die het dichtst bij je fysieke locatie ligt:

Voor deze tutorial controleer je Automatisch code wijzigingen implementeren. Dit zal je app automatisch herbouwen telkens wanneer je de code bijwerkt.

Druk op Volgende om door te gaan naar het scherm Configureer je app.

Selecteer vervolgens het type applicatie dat je wilt uitvoeren. Aangezien React statische assets zal bouwen, selecteer Statische site uit het dropdown-menu in het veld Type.

Je hebt ook de mogelijkheid om een aangepast buildscript te gebruiken. Maar in dit geval kun je bij het standaard npm run build commando blijven. Je kunt ervoor kiezen om een aangepast buildscript te maken als je een ander buildscript hebt voor een kwaliteitsborging (QA) of een productieomgeving:

Druk op Volgende om verder te gaan naar de pagina Definitief maken en starten.

Hier kun je het prijsplan selecteren. De gratis Starter-laag is gemaakt voor statische sites, dus kies die:

Druk op de knop Start Starter App en DigitalOcean zal beginnen met het bouwen van je applicatie.

De app zal de scripts npm ci en npm build uitvoeren in je repository. Dit zal alle afhankelijkheden downloaden en de map build aanmaken met een gecompileerde en geminimaliseerde versie van al je JavaScript-, HTML-bestanden en andere assets. Je kunt ook een aangepast script maken in je package.json en de Opdrachten bijwerken in het Componenten-tabblad van je applicatie op het App Platform.

Het duurt enkele minuten voordat het buildproces is voltooid, maar wanneer het klaar is, ontvang je een succesbericht en een link naar je nieuwe site. Je link zal een unieke naam hebben en iets verschillen:

Druk op Live App om toegang te krijgen tot je project in de browser. Het zal hetzelfde zijn als het project dat je lokaal hebt getest, maar dit zal live op het web staan met een veilige URL:

Nu je project geconfigureerd is, zal bij elke wijziging die je aanbrengt in het gekoppelde repository een nieuwe build worden uitgevoerd. In dit geval, als je een wijziging pusht naar de main-branch, zal DigitalOcean automatisch een nieuwe implementatie uitvoeren. Je hoeft niet in te loggen; het zal worden uitgevoerd zodra je de wijziging pusht:

In deze stap heb je een nieuwe DigitalOcean-app gemaakt op het App Platform. Je hebt je GitHub-account verbonden en de app geconfigureerd om de main-branch te bouwen. Na het configureren van de applicatie, heb je geleerd dat de app een nieuwe build zal implementeren na elke wijziging.

Conclusie

De App Platform van DigitalOcean biedt je een snelle tool voor het implementeren van applicaties. Met een kleine initiële configuratie wordt je app automatisch geïmplementeerd na elke wijziging. Dit kan worden gebruikt in combinatie met React om snel je webtoepassing operationeel te krijgen.

A possible next step for a project like this would be to change the domain name of the app. To do this, take a look at the official documentation for App Platform.