Mukautetut verkkotunnukset ja ympäristöt
Oma nimenne ja turvalliset asetukset.
Mukautetut verkkotunnukset ja ympäristöt on ilmainen Vibe-koodaus-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vibe-koodaus-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.
Tee siitä omasi
Sovelluksenne on osoitteessa my-app.vercel.app — hyvä alku! Ammattimaisen vaikutelman saavuttamiseksi tarvitsette kuitenkin oman nimenne, kuten myapp.com.
Tarvitsette myös turvallisen paikan salaisten asetusten, kuten API-avainten, säilyttämiseen ilman, että lisäätte niitä koodiin. Tätä varten ovat olemassa ympäristöt.
Tässä oppitunnissa käsittelemme molemmat: mukautetut verkkotunnukset ja ympäristömuuttujat — kaksi viimeistelyä, jotka saavat sovelluksen tuntumaan oikealta tuotteelta.
Mikä on verkkotunnus?
Verkkotunnus on helppokäyttöinen nimi, jonka ihmiset kirjoittavat päästäkseen sovellukseenne, kuten google.com tai myapp.com.
Ilmainen .vercel.app- tai .netlify.app-osoite toimii mainiosti — mutta mukautettu verkkotunnus:
- Vaikuttaa luotettavammalta ja ammattimaisemmalta.
- On helpompi muistaa ja jakaa.
- Saa projektin tuntumaan oikealta tuotteelta.
Ostatte verkkotunnuksen kerran (usein hintaan 10–15 dollaria vuodessa) verkkotunnusvälittäjältä, kuten Namecheapilta tai GoDaddyltä, tai suoraan Vercelin kautta.
Verkkotunnuksen yhdistäminen
Kun verkkotunnus on hallussanne, sen yhdistäminen onnistuu muutamalla napsautuksella:
- Avatkaa Vercelissä tai Netlifyssä projektinne Domains-asetukset.
- Kirjoittakaa verkkotunnuksenne (esim.
myapp.com) ja lisätkää se. - Hosting-palvelu näyttää DNS-tietueet, jotka tulee määrittää verkkotunnusvälittäjän palvelussa.
- Tallentakaa tietueet, odottakaa muutama minuutti, ja verkkotunnuksenne on käytössä.
Jos ostatte verkkotunnuksen suoraan Vercelin kautta, prosessi on vieläkin helpompi — kaikki yhdistetään automaattisesti.
DNS ilman päänvaivaa
DNS (Domain Name System) on kuin internetin puhelinluettelo — se yhdistää verkkotunnuksenne sovelluksen hosting-palveluun. Se voi näyttää pelottavalta, mutta yleensä sitä ei tarvitse käsitellä suoraan.
Hosting-palvelu kertoo tarkasti, mitkä tietueet tulee lisätä. Jos jokin vaikuttaa epäselvältä, liittäkää se tekoälylle ja pyytäkää sitä muuttamaan vaiheet selkeiksi toimintaohjeiksi.
I bought myapp.com on Namecheap and deployed my app on Vercel.
Vercel told me to add these DNS records:
Type: A Name: @ Value: 76.76.21.21
Type: CNAME Name: www Value: cname.vercel-dns.com
Explain in beginner terms what these records do, and give me click-by-click steps to add them in Namecheap.HTTPS sisältyy ilmaiseksi
Olette ehkä huomanneet selaimen osoiterivillä lukkokuvakkeen. Se on HTTPS — se salaa liikenteen, jotta tiedot pysyvät turvassa.
Aiemmin tämän määrittäminen oli hankalaa. Nykyään Vercel ja Netlify lisäävät HTTPS:n automaattisesti jokaiseen verkkotunnukseen, myös mukautettuihin, ilmaiseksi.
Teidän ei tarvitse määrittää mitään. myapp.com-osoitteenne saa turvallisuudesta kertovan lukon automaattisesti. Yksi huolenaihe vähemmän.
Mitä ympäristöt ovat?
Ympäristö on käyttötilanne, jossa sovellus toimii omine asetuksineen. Useimmilla sovelluksilla on kaksi ympäristöä:
- Kehitys: kannettavallanne, kun rakennatte ja testaatte sovellusta.
- Tuotanto: julkinen versio, jonka oikeat käyttäjät näkevät.
Miksi ne kannattaa erottaa? Voitte käyttää kehityksen aikana testitietokantaa ja tuotannossa oikeaa tietokantaa. Kun pidätte ne erillään, kokeilut eivät riko julkista sovellusta.
Ympäristömuuttujat
Ympäristömuuttuja on nimetty asetus, jonka sovellus lukee ajon aikana — arvon kovakoodauksen sijaan tallennatte sen koodin ulkopuolelle.
Yleisiä esimerkkejä ovat API-avaimet, tietokantojen URL-osoitteet ja ominaisuusliput. JavaScriptissä luette niitä näin:
// Reading an environment variable in JavaScript
// (process.env holds your environment settings)
const apiUrl = process.env.API_URL || "https://api.example.com";
const isProd = process.env.NODE_ENV === "production";
console.log("Calling API at:", apiUrl);
console.log("Running in production?", isProd);Miksi avaimet eivät kuulu koodiin
Kuvitelkaa, että liitätte salaisen API-avaimenne suoraan koodiin ja työnnätte sen sitten GitHubiin. Nyt kuka tahansa koodivarastonne näkevä saa avaimenne — hän voi aiheuttaa valtavia laskuja tai varastaa tietoja.
Ympäristömuuttujat ratkaisevat tämän ongelman. Salaisuus säilyy hosting-palvelunne asetuksissa eikä koskaan päädy koodiin. Koodivarastonne on turvallista jakaa.
- Huono:
const key = "sk-live-abc123..."koodissanne. - Hyvä:
const key = process.env.API_KEY, kun arvo on tallennettu hosting-palveluun.
Muuttujien määrittäminen hosting-palvelussa
Sekä Vercelissä että Netlifyssä on tähän helppokäyttöinen hallintapaneeli:
- Avaa projektisi Settings → Environment Variables.
- Lisää nimi (kuten
API_KEY) ja sen arvo. - Valitse, mihin ympäristöön se koskee (tuotanto, esikatselu, kehitys).
- Tallenna — ota sitten käyttöön uusi julkaisu, jotta sovellus saa muuttujan käyttöönsä.
Koodisi lukee nyt arvon process.env.API_KEY, ja palveluntarjoaja täyttää oikean salaisuuden suorituksen aikana. Turvallista ja siistiä.
Anna tekoälyn määrittää kaikki
Verkkotunnukset ja ympäristömuuttujat ovat juuri sellaista määritystyötä, jossa tekoäly loistaa. Kuvaile tilanteesi ja anna sen laatia juuri sinulle sopiva tarkistuslista.
My app is deployed on Vercel. I want to finish setting it up properly.
Help me with two things, step by step:
1. Connect my custom domain "myapp.com" (I bought it on GoDaddy).
2. Move my OpenAI API key out of my code and into a Vercel environment variable, then read it safely in my JavaScript.
Give me a clear, numbered checklist for a beginner.Säilytä .env-tiedosto paikallisesti
Kun rakennat sovellusta omalla tietokoneellasi, tallennat samat muuttujat erityiseen tiedostoon nimeltä .env. Tiedosto sijaitsee projektissasi, mutta sitä ei koskaan viedä GitHubiin.
.env-tiedosto näyttää tältä:
API_KEY=sk-test-12345API_URL=https://api.example.com
Lisää ennen kaikkea .env tiedostoon nimeltä .gitignore, jotta Git ohittaa sen. Kysy tekoälyltä: "Add a .env file and make sure Git ignores it." Paikallinen tiedosto palvelee kehitystä ja palveluntarjoajan hallintapaneeli tuotantoa.
Pikatarkistus
Verkkotunnukset ja salaisuudet — kaksi ammattilaistason yksityiskohtaa. Varmistetaan tärkein ajatus.
Kertaus: viimeistelty ja turvallinen
Sovelluksesi tuntuu nyt oikealta tuotteelta:
- Oma verkkotunnus korvaa oletuslinkin — lisää se vain ja määritä DNS-tietueet.
- HTTPS (suojattu lukko) otetaan käyttöön ilmaiseksi ja automaattisesti.
- Ympäristöt erottavat kehityksen tuotannosta.
- Ympäristömuuttujat pitävät salaisuudet poissa koodista — määritä ne palveluntarjoajalla ja paikallisesti Gitin ohittamaan
.env-tiedostoon. - Tekoäly voi laatia kaikkeen tähän sopivan määritysten tarkistuslistan.
Seuraavaksi: päivitysten julkaiseminen tuotantoon turvallisesti niin, etteivät asiat rikkoudu.
Opi JavaScript 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
- 25
- Oppitunnit
- 100
Usein kysytyt kysymykset
Onko oppitunti ”Mukautetut verkkotunnukset ja ympäristöt” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vibe-koodaus-oppimispolun 3 oppituntia, myös oppitunnin “Mukautetut verkkotunnukset ja ympäristöt”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Mukautetut verkkotunnukset ja ympäristöt”?
Oma nimenne ja turvalliset asetukset. Harjoittelet Vibe-koodaus-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vibe-koodaus-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vibe-koodaus-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Mukautetut verkkotunnukset ja ympäristöt”-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ä Vibe-koodaus-oppitunnilla?
Kyllä. Jokainen Vibe-koodaus-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
- Mitä julkaiseminen tarkoittaa
- Julkaiseminen Verceliin tai Netlifyyn
- Mukautetut verkkotunnukset ja ympäristöt
- Julkaistun sovelluksen päivittäminen