Frontend-kehysten integrointi
Integroi Workers suosittuihin frontend-kehyksiin, kuten Reactiin, Vueen tai Svelteen, dynaamisten full-stack-sovellusten luomiseksi
Frontend-kehysten integrointi on ilmainen Reunalaskenta Cloudflare Workersilla ja Denolla-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Reunalaskenta Cloudflare Workersilla ja Denolla-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Reunalaskenta Cloudflare Workersilla ja Denolla-kurssilla on yhteensä 4 oppituntia.
Full-stack reunalla frontend-sovellusten avulla
Tervetuloa tutustumaan frontend-kehysten integrointiin Cloudflare Workersin kanssa! Tässä oppitunnissa tarkastelemme, miten suositut kehykset, kuten React, Vue ja Svelte, toimivat saumattomasti Workersiä käyttävien sovellusten kanssa ja mahdollistavat dynaamisten full-stack-sovellusten luomisen reunalla.
Yhdistämällä nämä saat molempien parhaat puolet: monipuolisen käyttöliittymän ja erittäin nopean, maailmanlaajuisesti hajautetun backendin.
Miten frontendit keskustelevat Workersistä
Perusperiaate on, että frontend-kehys (joka suoritetaan käyttäjän selaimessa) viestii Cloudflare Workerille tavallisten HTTP-pyyntöjen avulla. Worker toimii kevyenä API-backendinä.
- Frontend lähettää Workerille pyyntöjä (GET, POST jne.) sen URL-osoitteeseen.
- Worker käsittelee pyynnön ja palauttaa vastauksen, usein JSON-muodossa.
- Frontend päivittää käyttöliittymän näiden tietojen perusteella.
Worker: yksinkertainen JSON-API
Tutustutaan perusmuotoiseen Workeriin, joka toimii yksinkertaisena API:na ja palauttaa JSON-viestin. Frontend-sovelluksesi voi noutaa tietoja tästä päätepisteestä helposti.
Kokeile suorittaa tämä esimerkki nähdäksesi Workerin vastauksen.
export default {
async fetch(request, env, ctx) {
const data = {
message: "Hello from the Edge!",
timestamp: new Date().toISOString()
};
return new Response(JSON.stringify(data), {
headers: { 'Content-Type': 'application/json' }
});
}
}Frontend: GET-pyynnön lähettäminen
Frontend-sovelluksessasi (esimerkiksi React-komponentissa) voit kutsua Workeriä selaimen fetch-API:n tai Axion kaltaisen kirjaston avulla. Yleinen toteutus näyttää tältä (käsitteellistä koodia, jota ei voi suorittaa sellaisenaan):
fetch('/api/hello')
.then(response => response.json())
.then(data => console.log(data));Frontend lähettää Workerille GET-pyynnön, ja Worker palauttaa JSON-tiedot.
Worker: POST-pyyntöjen käsittely
Frontendit lähettävät backendille usein tietoja POST-pyyntöjen avulla esimerkiksi lomakkeen lähettämisen tai uuden kohteen luomisen yhteydessä. Worker voi lukea pyynnön rungon ja saada nämä tiedot käyttöönsä.
Suorita tämä Worker ja kuvittele, että frontendisi lähettää rungossa POST-pyynnön, jonka sisältö on {"name": "Coddy"}.
export default {
async fetch(request, env, ctx) {
if (request.method === 'POST') {
try {
const body = await request.json();
const name = body.name || 'Guest';
return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), {
headers: { 'Content-Type': 'application/json' }
});
} catch (error) {
return new Response('Invalid JSON body', { status: 400 });
}
}
return new Response('Please send a POST request.', { status: 405 });
}
}CORSin ymmärtäminen reunalla toimivissa API:issa
CORS (Cross-Origin Resource Sharing) on selainten käyttämä suojausominaisuus. Jos frontendisi (esimerkiksi myapp.com) yrittää noutaa tietoja eri alkuperässä toimivalta Workerilta (esimerkiksi myworker.workers.dev), selain estää pyynnön, ellei Worker erikseen salli sitä.
CORSin käyttöön ottamiseksi Workerisi vastauksiin on lisättävä tietyt HTTP-otsakkeet.
Perusmuotoisen CORSin toteuttaminen Workerissä
Jotta frontendisi voi viestiä Workerisi kanssa, lisää CORS-otsakkeet Workerisi vastauksiin. Access-Control-Allow-Origin-otsake on ratkaisevan tärkeä.
Tässä esimerkissä lisätään perusmuotoiset CORS-otsakkeet, jotka sallivat pyynnöt mistä tahansa alkuperästä (*). Tuotantoympäristössä määritä frontendisi tarkka verkkotunnus.
export default {
async fetch(request, env, ctx) {
const headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*', // Allow requests from any origin
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'
};
if (request.method === 'OPTIONS') {
// Handle preflight requests for CORS
return new Response(null, { headers });
}
const data = { message: 'CORS enabled response!' };
return new Response(JSON.stringify(data), { headers });
}
}Ympäristömuuttujat ja salaisuudet
Workersi saattavat tarvita API-avaimia tai muita arkaluonteisia asetustietoja. Käytä ympäristömuuttujia (joita kutsutaan Workersissä usein sidoksiksi eli bindingeiksi) niiden turvalliseen välittämiseen.
Älä koskaan upota salaisuuksia suoraan koodiisi tai paljasta niitä frontendille. Workers voi käyttää niitä turvallisesti suorituksen aikana ja toimia arkaluonteisten toimintojen välittäjänä.
- Määritä muuttujat tiedostossa
wrangler.toml. - Käytä niitä Workerissä
env-olion kautta.
Integroinnin parhaat käytännöt
Kun rakennat vankkoja full-stack-sovelluksia reunalle, huomioi seuraavat parhaat käytännöt:
- API-versiointi: Käytä polkuja, kuten
/api/v1/users, jotta päivitykset ovat helpompia. - Selkeä päätepisteiden nimeäminen: Tee Worker-reiteistä intuitiivisia (esimerkiksi
/productsja/orders). - Virheenkäsittely: Palauta Workeristä merkitykselliset HTTP-tilakoodit (400, 401, 404, 500) ja JSON-muotoiset virheilmoitukset.
- Todennus: Workers voi käsitellä todennustunnisteita (JWT:t) ja hallita frontendisi käyttäjäistuntoja.
Pikatesti: Worker-integraatio
Mikä on ensisijainen mekanismi, jolla frontend noutaa dynaamisia tietoja Cloudflare Workeriltä, kun frontend-kehys integroidaan siihen?
Kertaus: full-stack-integraatio reunalla
Tässä oppitunnissa tutustuimme frontend-kehysten integrointiin Cloudflare Workersin kanssa. Opimme, että Workers toimii tehokkaina, maailmanlaajuisesti hajautettuina API-backendeinä, joiden kanssa frontend-sovellukset voivat viestiä tavallisten HTTP-pyyntöjen avulla.
Keskeiset opit:
- Workers tarjoaa JSON-tietoja ja käsittelee useita pyyntömenetelmiä.
- CORS-otsakkeet ovat välttämättömiä eri alkuperien välisessä viestinnässä.
- Parhaita käytäntöjä ovat selkeä API-suunnittelu ja salaisuuksien turvallinen hallinta.
Tämän integraation avulla voit rakentaa nopeita ja skaalautuvia full-stack-sovelluksia reunalle!
Opi Reunalaskenta Cloudflare Workersilla ja Denolla tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 47
Usein kysytyt kysymykset
Onko oppitunti ”Frontend-kehysten integrointi” ilmainen?
Kyllä – oppitunnin ”Frontend-kehysten integrointi” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Reunalaskenta Cloudflare Workersilla ja Denolla-kurssin, päivitä CoddyKit PROhon. Reunalaskenta Cloudflare Workersilla ja Denolla-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Frontend-kehysten integrointi”?
Integroi Workers suosittuihin frontend-kehyksiin, kuten Reactiin, Vueen tai Svelteen, dynaamisten full-stack-sovellusten luomiseksi Harjoittelet Reunalaskenta Cloudflare Workersilla ja Denolla-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Reunalaskenta Cloudflare Workersilla ja Denolla-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Reunalaskenta Cloudflare Workersilla ja Denolla-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Frontend-kehysten integrointi”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Reunalaskenta Cloudflare Workersilla ja Denolla-oppitunnilla?
Kyllä. Jokainen Reunalaskenta Cloudflare Workersilla ja Denolla-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Workers Sites ja Pages
- Frontend-kehysten integrointi
- Tietokantavälityspalvelimet Denolla
- Palvelinpuolen renderöinti edgessä