Kuinka rakentaa React-verkkosivusto AWS: ssä 15 minuutissa

Tämä opetusohjelma auttaa sinua avaamaan yksinkertaisen henkilökohtaisen tai ammatillisen verkkosivuston, joka on isännöity AWS S3: ssa ja rakennettu Reaktin avulla. React on Javascript-kirjasto käyttöliittymien rakentamiseksi. Oletetaan, että opit edelleen reagoimaan ja muita verkkosuunnitteluun liittyviä tekniikoita ja haluat kustannustehokkaan tavan rakentaa ja pelata omalla live-verkkosivustollasi. Paras tapa saavuttaa tämä on isännöidä verkkosivustoa AWS S3: ssa, koska se tarjoaa ilmaisen tason käytön 12 kuukauden ajan - 5 Gt Amazon S3 -standardin varastotilaa, 20 000 hankintapyyntöä ja 2 000 latauspyyntöä. Tämä tarkoittaa, että maksat alle dollarin kuukaudessa, kunnes verkkosivustosi alkaa saada vakavaa liikennettä.

Vaihe 1: Luo reagointisovellus paikallisesti

Reaaliaikaisen sovelluksen luomiseksi sinun on ensin asennettava solmu ja npm. Asenna molemmat:

Jos käytät Mac ja Homebrew asennettuna, suorita brew install node
Muut vaihtoehdot Mac OS: https://nodejs.org/fi/download/package-manager/#macos
Windows: https://nodejs.org/en/download/package-manager/#windows
Lataukset: https://nodejs.org

Kun asennus on valmis, voit luoda uuden sovelluksen suorittamalla:

NPX Luo-reagoi-sovellus Oma sovellus
cd my-app
npm alku

Kun tämä on valmis, se avaa selaimesi osoitteella localhost: 3000. Mahdolliset reagoivan sovelluskoodisi muutokset heijastuvat heti selaimeen.

Vaihe 2: Luo paikallinen verkkosivusto käyttöönottoa varten

Kun olet muuttanut verkkosivustosi paikallista versiota, voit rakentaa sen tuotantoon suorittamalla seuraavan komennon react app -kansioon:

Npm run build

Tämä vie kaikki sisältö ja luo yhden pienennetyn Javascript-tiedoston niputtamalla React oikein ja optimoimalla sovelluksen parhaan suorituskyvyn saavuttamiseksi. Kun tämä komento on valmis, kaikki verkkosivustosi varat ovat rakennuskansiossa. Nyt verkkosivustosi on valmis käytettäväksi AWS: ään.

Vaihe 3: Luo AWS-tili

Jos sinulla on jo Amazon-tili, voit ohittaa tämän vaiheen. Siirry osoitteeseen aws.amazon.com ja luo uusi tili. Huomaa, että AWS-tilin luominen edellyttää luottokorttitietoja laskutusta, maksua ja väärinkäytön välttämiseksi.

Vaihe 4: Luo S3-ämpäri

Kirjaudu sisään AWS-tiliisi. Avaa S3 AWS-konsolista. Napsauta ”Luo ​​ämpäri”.

Jos aiot käyttää verkkotunnusta verkkosivustollesi, luo ämpäri samalla nimellä. Jos verkkosivustosi verkkotunnuksen nimi on “abc.com”, niin myös S3-kauhan nimen tulisi olla “abc.com”.

Kirjoita kauhan nimi ja napsauta Luo.

Vaihe 5: Määritä staattinen verkkosivustojen ylläpito S3: ssa

Siirry S3-kauhan ominaisuuksiin ja ota käyttöön "Staattinen verkkosivustojen hosting". Valitse ”Käytä tätä ämpäri verkkosivuston isännöintiin”. Anna hakemisto- ja virheasiakirjoina ”index.html”.

Tee muistiinpäätepisteesi. Tämä on URL, jolla pääset verkkosivustollesi. Kun olet valmis, napsauta Tallenna.

Vaihe 6: Aseta S3-kauhan lukuoikeudet julkisiksi

Koska kenen tahansa Internet-sivuston on käytettävä verkkosivustoasi, S3-kauhan lukuoikeuksien tulisi olla julkisia. Voit tehdä tämän avaamalla ämpäri “Permissions” ja liittämällä alla oleva käytäntö korvaamalla sen kauhan nimellä.

{
    "Versio": "2012-10-17",
    "Lausunto": [
        {
            "Sid": "PublicReadGetObject",
            "Vaikutus": "Salli",
            "Rehtori": "*",
            "Action": "s3: GetObject",
            "Resurssi": "arn: aws: s3 :::  / *"
        }
    ]
}

Vaihe 7: Lataa verkkosivuston sisältö S3: een

Nyt sinun on lähetettävä rakennuskansion sisältö S3-kauhaan.

Avaa S3-kauha ja napsauta Lähetä. Vedä ja pudota rakennuskansion sisältö latausikkunaan. Tarkista, onko koko rakennuskansion sisältö läsnä, mukaan lukien alikansiot ja tiedostot. Kun olet vahvistanut tämän, napsauta Lähetä.

Se siitä. Verkkosivustosi on suora. Voit käyttää sitä käyttämällä päätepistettä, jonka muistiin osana 5.

Vaihe 8: (Valinnainen) Asenna nopea käyttöönotto S3: een

Aina kun teet muutoksia verkkosivustoosi paikallisesti, sinun on ladattava rakennushakemistosi sisältö S3: een manuaalisesti siirtääksesi muutokset aktiiviseen verkkosivustoon. Tämän välttämiseksi voit asentaa AWS CLI: n ja määrittää sen AWS-käyttöoikeustiedoillasi. Kun olet tehnyt sen, voit lähettää rakennushakemistosi sisältö seuraavan komennon avulla.

aws s3 cp build / s3: //  - rekursiivinen

Tämän yksinkertaistamiseksi lisäämällä tämä komento react app -kansiosta löytyvän pack.json-tiedoston komentosarjoihin.

"skriptit": {
  "start": "reagoi-skriptit alkavat",
  "build": "react-scripts build",
  "predeploy": "react-scripts build",
  "käyttöönotto": "aws cp build s3: // <_korisi_nimi> - rekursiivinen",
  "test": "react-scripts test --env = jsdom",
  "eject": "react-scripts eject"
}

Nyt voit tehdä npm run asennuksen asentaaksesi rakennuskansion sisällön S3: een.

Kokemukseni mukaan AWS: n käyttö yksinkertaisessa verkkosivustossa on paljon halvempaa kuin minkä tahansa muun isännöidyn ratkaisun käyttö. Voit myös laajentaa sovellustasi käyttämään AWS Lambda- ja muita AWS-tarjouksia. Hyvää hakkerointia!