Deploy React em Subdomínio com NGINX

💡 Essas instruções consideram o uso de create-react-app e react-router-dom.

1. Configurando uma Homepage

O atributo "homepage" no arquivo package.json define a URL base onde a aplicação ou projeto será hospedado. Esse atributo é útil em projetos front-end que serão posteriormente implantados em servidores num determinado endereço na web.

Quando "homepage" é devidamente designado, as ferramentas de construção utilizam essa informação para gerar caminhos corretos para recursos estáticos, como imagens, scripts, estilos, entre outros, durante o processo de construção da versão de produção.

{
  "name": "meu-projeto",
  "version": "1.0.0",
  "homepage": "<https://meudominio.com/minha-aplicacao>",
  "scripts": {
    // ...outros scripts
  },
  // ...outras configurações
}

Por exemplo, se a aplicação referenciar uma imagem usando um caminho relativo:

<img src="/imagens/minha-imagem.png" alt="Minha Imagem">

Ao construir a aplicação e considerando a URL base definida no "homepage", o caminho será ajustado automaticamente para refletir a estrutura correta:

<img src="<https://meudominio.com/minha-aplicacao/imagens/minha-imagem.png>" alt="Minha Imagem">

Isso garante que, independentemente do local onde a aplicação é hospedada, os recursos estáticos sejam corretamente referenciados.

2. Configurando o React Router

A propriedade "basename" é usada no React Router para especificar a parte da URL que deve ser considerada como a base para todas as rotas definidas em uma aplicação.

Ao configurar o React Router, a propriedade "basename" pode ser passada para o componente <BrowserRouter> ou <Router> para definir a base da URL para todas as rotas aninhadas.

<Router basename="/calendario" >
    <Route path ="/minha_pagina" element={<MinhaPagina />}/> 
<Router/>

Quando a aplicação é acessada, a rota "/minha_pagina" será interpretada em relação ao "basename" configurado. Se o "basename" for "/calendario", a rota será acessada em:

https://seu-domínio.com/calendario/minha_pagina

3. Build da aplicação

A etapa de construção (build) de uma aplicação é um processo de deploy de um software. Durante essa fase, os arquivos fonte da aplicação são processados, otimizados e preparados para implantação em um ambiente de produção. A etapa de build normalmente inclui:

• Minificação e Concatenação: Reduzir o tamanho dos arquivos CSS, JavaScript e outros recursos, além de combinar vários arquivos em um único arquivo para reduzir o número de solicitações ao servidor.

• Otimização de Imagens: Comprimir e otimizar imagens para diminuir o tamanho dos arquivos sem comprometer a qualidade visual.

• Resolução de Dependências: Instalar e gerenciar dependências do projeto para garantir que todas as bibliotecas e pacotes necessários estejam corretamente integrados na aplicação.

O processo de construção é iniciado executando um script definido no arquivo package.json. Por exemplo:

"scripts": {
    "build": "react-scripts build",
  },

Ao executar o comando npm run build ou yarn build, dependendo da sua configuração de gerenciamento de pacotes, a ferramenta de construção associada ao projeto será acionada e executará todas as tarefas necessárias para gerar a versão otimizada da aplicação para produção.

Após a conclusão bem-sucedida da etapa de build, será gerado um conjunto de arquivos otimizados prontos para implantação localizados na pasta build do projeto. Esta pasta build deverá ser provida estaticamente pelo NGINX.

4. Configurando o NGIX

💡 Este tópico considera que o servido NGINX já está configurado e operacional

O NGINX é um servidor web popular conhecido por sua escalabilidade, desempenho e capacidade de atuar como um servidor proxy reverso para manipular solicitações HTTP. Para prover a aplicação estaticamente podemos referenciar a mesma usando uma location na configuração do servidor NGINX.

O bloco location é utilizado para definir diretivas de configuração específicas para diferentes URLs em um servidor NGINX. Ele permite direcionar requisições para diferentes locais no sistema de arquivos do servidor, para aplicações ou para outros servidores.

Para uma aplicação React podemos prover unicamente a pasta build através de um location.

location /myapp {
        alias /caminho/para/myapp/build;
        try_files $uri $uri/ /myapp/index.html;
 }

• location /myapp define o bloco location para o caminho /myapp, indicando que todas as requisições feitas para /myapp serão tratadas por este bloco.

• alias /caminho/para/myapp/build especifica o diretório onde os arquivos estáticos da aplicação "MyApp" estão localizados no servidor. Aqui, supomos que os arquivos estão no caminho /caminho/para/myapp/build.

• try_files $uri $uri/ /myapp/index.html é a diretiva try_files que instrui o NGINX a tentar encontrar o recurso solicitado ($uri). Se não for encontrado, redireciona a requisição para o arquivo index.html dentro do diretório da aplicação.

O uso de try_files com o redirecionamento para index.html é comum em aplicações Single Page Application (SPA) para permitir o roteamento interno da aplicação característica do React.

Por fim é necessário reiniciar o NGINX para tornar as modificações efetivas usando o seguinte comando no linux:

systemctl restart nginx

A partir deste momento a aplicação deve estar disponível no endereço designado.

Recursos utilizados na construção de material

How to deploy a React app to a subdirectoryMedium

Deployment | Create React App