Come creare un sito Web React in AWS entro 15 minuti

Questo tutorial ti aiuterà a lanciare un semplice sito web personale o professionale ospitato in AWS S3 e creato usando React. React è una libreria Javascript per la creazione di interfacce utente. Supponiamo che tu stia ancora imparando la reazione e altre tecnologie correlate al Web Design e desideri un modo economico di costruire e giocare con il tuo sito web dal vivo. Il modo migliore per raggiungere questo obiettivo è ospitare il sito Web in AWS S3 poiché offre un utilizzo gratuito dei livelli per 12 mesi: 5 GB di spazio di archiviazione standard Amazon S3, 20.000 richieste e 2.000 richieste put. Ciò significa che pagherai meno di un dollaro al mese fino a quando il tuo sito web non inizierà a ricevere traffico serio.

Passaggio 1: creare un'applicazione di reazione a livello locale

Per creare un'applicazione di reazione, devi prima installare node e npm. Per installare entrambi:

Se stai utilizzando Mac e Homebrew installati, esegui brew install node
Altre opzioni per Mac OS: https://nodejs.org/en/download/package-manager/#macos
Windows: https://nodejs.org/en/download/package-manager/#windows
Download: https://nodejs.org

Una volta completata l'installazione, è possibile creare una nuova applicazione eseguendo:

npx create -eagire-app la mia-app
cd my-app
inizio npm

Una volta completato, si aprirà il browser con l'indirizzo localhost: 3000. Qualsiasi modifica apportata al codice dell'app di reazione si rifletterà immediatamente nel browser.

Passaggio 2: creare il sito Web locale per la distribuzione

Dopo aver apportato modifiche alla versione locale del tuo sito Web, puoi crearlo per la produzione eseguendo il comando seguente nella cartella dell'app reagisci:

npm run build

Ciò esporterà tutte le risorse e creerà un singolo file Javascript minimizzato raggruppando correttamente React e ottimizzando l'app per le migliori prestazioni. Una volta completato questo comando, tutte le risorse del tuo sito Web saranno nella cartella build. Ora il tuo sito Web è pronto per la distribuzione in AWS.

Passaggio 3: creare un account AWS

Se hai già un account Amazon, puoi saltare questo passaggio. Vai su aws.amazon.com e crea un nuovo account. Tieni presente che la creazione di un account AWS richiede i dati della carta di credito per la fatturazione, i pagamenti e per evitare un utilizzo fraudolento.

Passaggio 4: creare un bucket S3

Accedi al tuo account AWS. Apri S3 dalla tua console AWS. Fai clic su "Crea bucket".

Se hai intenzione di utilizzare un nome di dominio per il tuo sito Web, crea il bucket con lo stesso nome. Se il nome del dominio del tuo sito Web è "abc.com", anche il nome del tuo bucket S3 dovrebbe essere "abc.com".

Inserisci un nome per il bucket e fai clic su "Crea".

Passaggio 5: configura l'hosting di siti Web statici in S3

Vai alle proprietà del bucket S3 e abilita "Hosting statico di siti Web". Seleziona "Usa questo bucket per ospitare un sito Web". Fornire "index.html" come documento indice e documento di errore.

Prendi nota del tuo endpoint. Questo è l'URL con cui puoi accedere al tuo sito web. Al termine, fai clic su Salva.

Passaggio 6: impostare le autorizzazioni di lettura del bucket S3 su pubbliche

Dal momento che il tuo sito Web deve essere accessibile a chiunque su Internet, l'accesso in lettura bucket S3 dovrebbe essere pubblico. Per fare ciò, apri il bucket "Autorizzazioni" e incolla il criterio seguente dopo averlo sostituito con il nome del bucket.

{
    "Versione": "2012-10-17",
    "Dichiarazione": [
        {
            "Sid": "PublicReadGetObject",
            "Effetto": "Consenti",
            "Principal": "*",
            "Azione": "s3: GetObject",
            "Risorsa": "arn: aws: s3 :::  / *"
        }
    ]
}

Passaggio 7: caricare i contenuti del sito Web su S3

Ora devi caricare i contenuti della tua cartella di build sul tuo bucket S3.

Apri il tuo bucket S3 e fai clic su "Upload". Trascina e rilascia i contenuti della tua cartella di build nella finestra di caricamento. Controlla se è presente tutto il contenuto della cartella di compilazione, incluse sottocartelle e file. Una volta verificato, fai clic su "Carica".

Questo è tutto. Il tuo sito web è live. È possibile accedervi utilizzando l'endpoint annotato come parte del passaggio 5.

Passaggio 8: (Facoltativo) Installazione della distribuzione rapida su S3

Ogni volta che si apportano modifiche al sito Web localmente, è necessario caricare manualmente i contenuti della directory di build su S3 per inviare le modifiche al sito Web live. Per evitarlo, puoi installare l'interfaccia della riga di comando di AWS e configurarla con le tue credenziali AWS. Una volta fatto, puoi caricare i contenuti della tua directory di build usando il seguente comando.

aws s3 cp build / s3: //  --recursive

Per semplificare ulteriormente ciò, puoi anche aggiungere questo comando alla sezione script del file package.json che puoi trovare nella cartella dell'app di reazione.

"script": {
  "start": "start-script start",
  "build": "reply-scripts build",
  "predeploy": "build-reazioni-script",
  "deploy": "aws cp build s3: //  --recursive",
  "test": "test di reazione-script --env = jsdom",
  "espulsione": "espulsione reagire-script"
}

Ora puoi eseguire npm run deploy per distribuire il contenuto della tua cartella di build su S3.

In base alla mia esperienza, l'utilizzo di AWS per un semplice sito Web è molto più economico rispetto a qualsiasi altra soluzione ospitata. Inoltre, puoi estendere la tua applicazione per utilizzare AWS Lambda e altre offerte AWS. Happy hacking!