Pubblica il tuo
app React
Carica la build di produzione da Vite, Create React App o un'altra SPA React e pubblicala con route che reggono il refresh, HTTPS, distribuzione globale e domini personalizzati quando ne hai bisogno.
Carica l'output di build, non il progetto sorgente
I file sorgente React sono per lo sviluppo. DeployPages serve i file statici prodotti dalla build di produzione.
Vite React
L'output statico predefinito di Vite è dist. Se vite.config.js cambia build.outDir o base, pubblica la cartella di output e testa gli URL degli asset dopo il caricamento.
Create React App
CRA scrive i file di produzione in build. Se l'app viene servita da un sottopercorso, l'impostazione homepage può influire sugli URL degli asset generati.
Altre SPA React
Qualsiasi configurazione React può funzionare quando produce index.html, bundle JavaScript, CSS, immagini, font e asset che possono essere serviti come file statici.
Perché le app React si interrompono dopo la pubblicazione
Una SPA React parte comunque da un documento
La maggior parte delle app React a pagina singola fornisce un entrypoint HTML, poi lascia al router lato client decidere cosa renderizzare dopo il caricamento di JavaScript.
Funziona localmente perché il server di sviluppo sa tornare a index.html. Un host statico di base potrebbe non farlo: /dashboard può funzionare durante la navigazione, ma restituire 404 dopo un refresh.
Cosa si rompe al refresh
Un file server statico riceve GET /settings e cerca un file o una cartella settings reale.
La tua build React di solito contiene index.html più asset con hash, quindi il server restituisce 404 prima che il router React abbia la possibilità di leggere l'URL.
Come DeployPages lo risolve
DeployPages applica un fallback SPA per i percorsi dei documenti mancanti e serve index.html invece di un hard 404.
Una volta caricato il documento, React si avvia, il router legge l'URL corrente e renderizza la schermata corretta senza obbligarti a mantenere file di redirect.
Perché i team lo usano
Carica la cartella dist o build. Fallback di routing, HTTPS, compressione e pubblicazione globale fanno parte della pubblicazione, senza ricostruire una checklist per ogni piccola app React.
Controlli di produzione per app React
L'app può compilare correttamente e fallire comunque online. Controlla questi punti prima di inviare il link.
Percorso di base delle risorse
Se JavaScript o CSS viene caricato dall'URL sbagliato, la pagina potrebbe essere vuota. Le impostazioni della base Vite e della home page CRA sono i soliti luoghi da controllare.
Route lato client
Testa visite dirette e refresh per percorsi importanti come /login, /pricing, /dashboard ed eventuali link diretti condivisi.
Punti finali API
Una pubblicazione React statica può chiamare API esterne, ma non esegue autonomamente codice backend. Tieni i segreti del server e le chiavi API private fuori dal bundle frontend.
Variabili d'ambiente
La maggior parte degli strumenti di build React inserisce i valori di ambiente pubblici nel bundle durante la build. La modifica di una variabile dopo il caricamento in genere richiede una nuova build.
Flusso di pubblicazione React
Esegui la build dell'app
Esegui la build di produzione in locale in modo che React, CSS e asset siano raccolti in una cartella statica pubblicabile.
Verifica l'output
Verifica che la cartella di output contenga index.html più gli asset generati. Per Vite solitamente è dist; per Create React App in genere è build.
Carica l'intera cartella
Rilascia l'intera cartella dist in DeployPages. Non caricare solo index.html o perderai stili e script.
Testa una route interna
Apri una route nidificata, fai refresh nel browser e verifica che l'app continui a caricarsi invece di restituire un 404 dell'host.
Problemi comuni di pubblicazione di React
Schermo bianco dopo la pubblicazione
Apri DevTools e controlla prima i file JS o CSS mancanti. Percorsi di base errati, risorse mancanti o il caricamento della cartella sbagliata causano molti errori di pagina vuota.
Il refresh restituisce 404 su route nidificate
L'host statico sta tentando di trovare un file reale per la route. Usa un fallback SPA in modo che le route documento mancanti servano index.html.
Le risorse funzionano localmente ma non online
Controlla i percorsi assoluti, le impostazioni della base pubblica e se la cartella di output caricata include la directory assets generata.
Le modifiche alle variabili di ambiente non vengono visualizzate
Ricostruisci l'app con le nuove variabili pubbliche, quindi carica il nuovo output. Il bundle pubblicato non può leggere a runtime i valori env privati del server.
Domande frequenti sulla pubblicazione di React
Q:Perché la mia app React mostra una schermata bianca dopo la pubblicazione?
La maggior parte dei problemi con schermata bianca deriva da percorsi di risorse errati o bundle mancanti. Per Vite, verifica che base sia corretta per la destinazione di pubblicazione. Per CRA, controlla homepage e assicurati che la cartella caricata contenga gli asset generati.
Q:Devo configurare nginx o redirect manualmente?
No. DeployPages gestisce il fallback SPA per le rotte mancanti sul perimetro, quindi non è necessario gestire personalmente le riscritture del server.
Q:Devo caricare la cartella del progetto o la cartella dist?
Carica la cartella di output di produzione, non il progetto sorgente. Per Vite di solito è dist. Per Create React App di solito è build.
Q:Posso usare variabili d'ambiente?
Sì, ma i valori vengono risolti quando esegui la build localmente. DeployPages ospita l'output statico finale, quindi l'iniezione di variabili server a runtime non fa parte di questo flusso.
Q:Un'app React può chiamare un'API dopo la pubblicazione?
Sì. Un'app React statica può chiamare API esterne dal browser. Ricorda solo che tutto ciò che finisce nel codice frontend è visibile agli utenti, quindi i segreti privati richiedono un backend.
Q:Posso pubblicare Next.js anche qui?
Sì, se lo esporti come sito statico. Utilizza l'output: 'export' e carica la directory out generata. Le rotte Next.js renderizzate dal server richiedono un runtime oltre l'hosting statico.
Q:Posso collegare un dominio personalizzato in un secondo momento?
Sì. Dopo che il sito è attivo, aggiungi il tuo dominio nella console e segui le istruzioni DNS. DeployPages effettua il provisioning di HTTPS automaticamente una volta risolto il record.