1

Estou fazendo deploy de um projeto que tem o Front em React e o Back em NodeJs, mas meu host (KingHost) pede que eu faça o deploy do app Node e dentro da mesma pasta coloque a Build do React, o FTP fica assim:

inserir a descrição da imagem aqui

Dentro do index.js do Node, estou puxando o index.html da build da seguinte maneira:

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });

E isso funciona muito bem, a tela inicial é de Login, consigo logar e deslogar, mostrar informações do banco, o problema é que em uma página eu tenho um botão de Cadastro, e esse cadastro está na rota

<Container maxWidth="lg">
        <Switch>
          { !currentUser &&
          <Route exact path={`${process.env.PUBLIC_URL}/`} component={Login} /> }
          { showCadastroBoard &&
          <div>
            <Route exact path={`${process.env.PUBLIC_URL}/cadastro`} component={BoardCadastro} />
            <Route exact path={`${process.env.PUBLIC_URL}/`} component={CompreBem} />
          </div> }
          { showComumBoard &&
          <Route exact path={`${process.env.PUBLIC_URL}/`} component={CompreBem} /> }
          { showAdminBoard &&
          <Route exact path={`${process.env.PUBLIC_URL}/`} component={BoardAdmin} /> }
          { showTesteBoard &&
          <Route exact path={`${process.env.PUBLIC_URL}/`} component={BoardTeste} /> }
        </Switch>
      </Container>

Quando clico nesse botão para ir para a página de cadastro, aparece o seguinte erro no console:

Failed to load resource: the server responded with a status of 404 (Not Found)

e fica em uma página com "cannot GET /cadastro".

O que eu faço?

3 Respostas 3

1

poderia mostrar sua arvore de arquivos?

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

istó só vai enviar vai enviar o arquivo index.html, para arquivos estaticos aconselho você usar um middleware static, do express: reuna todos os arquivos estáticos em um pasta, e use o comando: app.use(express.static({caminho de sua pasta de estaticos})) exemplo para build:

app.use(express.static(path.join(__dirname, 'build')))

pelo que percebi seu endereço não tem extensão, então mesmo que vc use sendFile, você precisara definir o mimeType na resposta... uma abordagem mais fácil seria fazer a reescrita com middleware, o express executa os middlewares na ordem em que são inseridos, então você precisa definir o middleware de reescrita antes do static, o static já vai receber a url com estenção, e vai definir corretamente o mimeType... exemplo de middleware para rewrite (customize-o a seu favor):

app.use(function(req, res, next) {
   //se o nome da url da requisição não tiver um ponto depois do ultimo '/' (não tiver extensão)
   if (req.url.lastIndexOf('/') > req.url.lastIndeOf('.')) {
      //adicionar extensão de .html
      req.url += '.html';
   }
   //passa para o proximo middleware da pilha...
   next();
});
0

Olá,

Também estava com esse problema na KingHost. Local tudo funcionava normal, no host não funcionava.

Depois de um tempo, encontrei isso na documentação do React:

https://create-react-app.dev/docs/deployment -> Aba "Serving Apps with Client-Side Routing"

Resumindo:

1 - Criar um arquivo com nome .htaccess na pasta public e incluir as seguintes linhas.

Options -MultiViews
 RewriteEngine On
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteRule ^ index.html [QSA,L]

2 - Em seguida rodar npm run build

Espero que possa ajudar você ou um próximo amigo com o mesmo problema.

0

Consegui resolver apenas lendo: https://create-react-app.dev/docs/deployment seguindo apenas os tópicos: Other Solutions, Serving Apps with Client-Side Routing, Building for Relative Paths

Antes de fazer o build precisei ajustar algumas coisas:

Primeiro NÃO precisei adicionar process.env.PUBLIC_URL nas rotas como o @Agaka fez:

<Route exact path={`${process.env.PUBLIC_URL}/cadastro`} component={BoardCadastro} />

defini as rotas como de costume:

<Provider store={store}>
      <Router>
        <GlobalStyles />
        <Route exact path='/' component={Home} />
        <Route exact path='/detalhe' component={Detalhe} />
        <Route exact path='/painel' component={Painel} />
        <Route exact path='/login' component={Login} />
      </Router>
    </Provider>

depois criei um arquivo .htaccess na pasta public do meu projeto com o seguinte conteudo:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Na KingHost, pedem para vc separar o build dos arquivos staticos(frontend - React), eles devem estar na pasta www do servidor e a build dos arquivos do backend em nodejs devem estar na pasta apps_nodejs e nesta pasta deve ter um arquivo inicial que vc deve definir o nome no seu painel adm da Kinghost, no meu caso eu deixei com nome main.js e o condeudo dele ficou assim:

const http = require('http');
const express = require('express');
const path = require('path');
const app = express();

const port = 21016;
const baseDir = '../www/'

app.use(express.static(path.join(__dirname, `${baseDir}`)));    

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, `${baseDir}`, 'index.html'));
});

app.listen(port);

No meu package.json adicionei o atributo homepage:

"homepage": "http://www.meudominio.kinghost.net/",

Entao fiz o build do front, e depois fiz o build do back. Adicionei o build do front na pasta www do servidor da king host: inserir a descrição da imagem aqui

e adicionei a build do back na pasta apps_nodejs no servidor da king host: inserir a descrição da imagem aqui

e xazammm minhas rotas funcionaram corretamente! :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .