{"id":26041,"date":"2021-06-10T20:25:00","date_gmt":"2021-06-10T17:25:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26041"},"modified":"2021-10-18T03:01:54","modified_gmt":"2021-10-18T00:01:54","slug":"distribuisci-gratuitamente-un-sito-web-statico-su-firebase-hosting","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/distribuisci-gratuitamente-un-sito-web-statico-su-firebase-hosting\/","title":{"rendered":"Distribuisci gratuitamente un sito Web statico su Firebase Hosting"},"content":{"rendered":"

L’hosting Firebase \u00e8 un servizio offerto da Google che ospita siti Web statici e dinamici in modo sicuro. \u00c8 il miglior servizio gratuito per gli sviluppatori. Puoi mostrare un design del sito, una versione di pre-produzione di un sito al client distribuendolo sull’hosting Firebase.<\/p>\n

Un utente pu\u00f2 utilizzare il piano gratuito di Firebase per ospitare un sito web. Il piano gratuito include il supporto per dominio personalizzato e SSL, 1 GB di spazio di archiviazione. Lo spazio di archiviazione da 1 GB \u00e8 sufficiente per i siti Web pi\u00f9 piccoli. Per ottenere un elenco di tutte le funzionalit\u00e0 incluse nei piani gratuiti e premium, controlla la loro pagina dei prezzi<\/a>.<\/p>\n

Sebbene l’hosting Firebase fornisca supporto per eseguire il codice Node.js\/JavaScript, in questo articolo ci concentriamo solo sulla distribuzione del sito Web statico. Per la distribuzione di un sito Web dinamico su Firebase scriver\u00f2 un altro articolo in futuro.<\/p>\n

Iniziare<\/h3>\n

Per iniziare, devi avere Node.js installato sul tuo sistema. \u00c8 possibile ottenere il pacchetto Node.js per l’installazione sul loro sito Web ufficiale<\/a>.<\/p>\n

Una volta installato Node.js sul tuo sistema, vai<\/a> alla console Firebase<\/a> e crea un progetto facendo clic sulla casella "Aggiungi progetto". Compila tutte le informazioni come richiesto.<\/p>\n

Dopo aver creato il progetto Firebase, verrai reindirizzato alla dashboard del progetto. Fai clic su "Hosting" dalla barra laterale sinistra e poi su "Inizia". Si aprir\u00e0 una pagina dove troverai le istruzioni per la distribuzione. Lo esamineremo nella parte successiva del tutorial.<\/p>\n

Distribuisci sito Web statico su Firebase Hosting<\/h3>\n

Dopo aver creato un progetto su Firebase, con l’aiuto di pochi comandi, possiamo distribuire un sito Web statico sull’hosting Firebase. Richiede prima di installare Firebase CLI e quindi di configurarlo localmente.<\/p>\n

Installa Firebase CLI<\/h4>\n

Per la distribuzione, la prima cosa che devi fare \u00e8 l’installazione di Firebase CLI. Hai installato Node.js, quindi usa npm per installare la CLI. Apri il terminale e installa Firebase CLI usando npm come segue:<\/p>\n

npm install -g firebase-tools<\/code><\/pre>\n
Nota che stiamo installando gli strumenti Firebase a livello globale utilizzando -g<\/code>. In questo modo, puoi eseguire i comandi Firebase da qualsiasi directory sul tuo computer. Ora dal terminale esegui il comando successivo:<\/p>\n
firebase login<\/code><\/pre>\n
Potrebbe reindirizzarti alla pagina di accesso dell’account Google. Basta seguire i passaggi come suggerito. \u00c8 solo un processo di autorizzazione con Firebase, quindi il progetto verr\u00e0 distribuito solo sul tuo account.<\/p>\n
Inizializzazione e distribuzione<\/h4>\n
Dopo aver autorizzato il tuo account Google con Firebase CLI, devi inizializzare Firebase nella directory principale del progetto. Per questo, esegui il comando seguente nella directory principale del tuo progetto.<\/p>\n
firebase init<\/code><\/pre>\n
Dopo aver eseguito il comando precedente, la CLI richiede un’opzione diversa da scegliere. Dovresti selezionare l’opzione "Hosting" navigando su una freccia e quindi premendo il tasto spazio. Premi Invio dopo aver selezionato l’opzione "Hosting".<\/p>\n
\"Distribuisci<\/a><\/p>\n
Quindi, seleziona il progetto che hai creato nella console Firebase. Premi il tasto Invio. La prossima domanda sarebbe: cosa vuoi usare come directory pubblica? (pubblico). Non c’\u00e8 bisogno di fare nulla qui. Basta premere il tasto Invio.<\/p>\n
Per la prossima domanda Configura come app a pagina singola (riscrivi tutti gli URL in \/index.html)? (y\/N), premi N e premi Invio poich\u00e9 non stiamo distribuendo un’applicazione a pagina singola.<\/p>\n
Dopo questo comando, vedrai un paio di file creati nella tua directory principale insieme alla public<\/code>cartella. Questa public<\/code>directory funger\u00e0 da root per la distribuzione. In questa public<\/code>directory devi conservare i file del tuo progetto.<\/p>\n
Ora creiamo pagine HTML statiche. Poich\u00e9 questo tutorial \u00e8 solo a scopo dimostrativo, sto creando pagine HTML di base.<\/p>\n
public\/index.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is Index Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public\/about.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is About Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public\/style.css<\/strong><\/p>\n
h1 {\n\u00a0\u00a0\u00a0\u00a0color: blueviolet;\n}<\/code><\/pre>\n
Queste sono le nostre pagine statiche che implementeremo sull’hosting Firebase.<\/p>\n
Se vuoi testare il progetto localmente prima della distribuzione, esegui il comando serve come segue:<\/p>\n
firebase serve<\/code><\/pre>\n
Inizier\u00e0 il tuo server locale su http:\/\/localhost:5000<\/a>. Testa il tuo progetto e se tutto va bene, distribuiscilo usando il comando:<\/p>\n
firebase deploy<\/code><\/pre>\n
Al completamento della distribuzione, dovresti vedere l’URL di hosting nella console.<\/p>\n
\"Distribuisci<\/a><\/p>\n
Esegui l’URL di hosting nel browser e dovresti vedere che il tuo sito web \u00e8 stato distribuito con successo. Tieni presente che puoi distribuire il tuo progetto tante volte. Dopo le modifiche, esegui il comando deploy e il tuo sito verr\u00e0 distribuito con la nuova versione.<\/p>\n
Ripristina la tua versione<\/h3>\n
Firebase conserva una cronologia di tutte le tue versioni di distribuzione. Puoi anche tornare alla versione precedente. Vai alla pagina Firebase Hosting dove troverai un’opzione di rollback (supponendo che tu abbia distribuito pi\u00f9 di una versione).<\/p>\n
\"Distribuisci<\/a><\/p>\n
Eseguendo un rollback alle versioni, puoi passare direttamente da una versione all’altra del tuo sito web. \u00c8 semplice e utile durante la fase di progettazione e sviluppo.<\/p>\n
Spero che tu abbia avuto modo di conoscere le basi sul processo di distribuzione dell’hosting Firebase. Si prega di condividere i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n