Server compartido con Apache y ReactRouter

ServerCompartido.txt

_______________________________ Server Compartido _______________________________----_-

En el gist anterior se muestra como alojar un app de React js en el root de la carpeta
public, pero en general queremos alojar multiples app en nuestro server. 
Para esto debemos hacer algunas modificaciones en nuestra estructura.

La estructura anterior era: 
                            server/
                            |_ _ public_html
                                |_ _ .htaccess
                                |_ _ index.html 
                                |_ _ static                                
                                |_ _ manifest.json
                                |_ _ asset-manifest.json  
                                |_ _ favicon.ico 
                                |_ _ logo192.png 
                                |_ _ logo512.png
                                
Ahora queremos tener una estructura de apps compartidas, lo primero será
cambiar a: 
                            server/
                            |_ _ public_html
                                |_ _ myapp1
                                    |_ _ .htaccess
                                    |_ _ index.html 
                                    |_ _ static                                
                                    |_ _ manifest.json
                                    |_ _ asset-manifest.json  
                                    |_ _ favicon.ico 
                                    |_ _ logo192.png 
                                    |_ _ logo512.png
                                |_ _ myapp2
                                    |_ _ .htaccess
                                    |_ _ index.html 
                                    |_ _ static                                
                                    |_ _ manifest.json
                                    |_ _ asset-manifest.json  
                                    |_ _ favicon.ico 
                                    |_ _ logo192.png 
                                    |_ _ logo512.png
                                    
Y el archivo .htaccess 
        
          Options -MultiViews
          RewriteEngine On
          RewriteCond %{REQUEST_FILENAME} !-f
          RewriteRule ^ index.html [QSA,L]

          RewriteCond %{HTTPS} off
          RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
          
Hasta aca terminamos la configuración del lado del server, pero ahora debemos 
hacer algunas modificaciones en nuestra app.

_______________________________ MyApp1 _______________________________----_-

Existen dos maneras de exponer la url a la cual se debe referir el host,
la primera es en el enrutador de la app. Ejemplo:

            import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom'
                                    
            <Router basename="/myapp1">
                <Routes>
                    <Route
                        path="/home"
                        element={<Home/>}
                    />
                    <Route
                        path="/login"
                        element={<Login/>}
                    />
                    <Route path="/register" element={<Register/>} />
                    <Route path="*" element={<Navigate to="/home" replace />} />
                </Routes>
            </Router>
            
            
Otra forma sería asignar la url al package.json
            
              {
                  ....
                  "homepage": "https://mydomain.com/myapp1",
                  ....
              }
              
    una vez que generamos el distribuible de la app, lo pasamos 
    al subdirectorio myapp1/ reiniciamos el servicio de apache 
          $ sudo service apache2 restart
          
    y ya lo tendriamos, ahora podemos recargar nuestra página 
    o compartir las urls de nuestra app sin que nos devuelva 
    un error 404.
    
    
 __________________  Configuración para Centos  _________________________
  
  En el caso particular de trabajar con Centos y Apache, se deberá 
  realizar una configuración extra para que nos permita realizar 
  nuestros redireccionamientos a partir del archivo .htaccess. 
  En la ruta /etc/httpd/conf/httpd.conf editamos el archivo y asignamos 
  la carpeta publica y los permisos.
  
      # DocumentRoot: The directory out of which you will serve your
      # documents. By default, all requests are taken from this directory, but
      # symbolic links and aliases may be used to point to other locations.
      # Directorio principal/público 
      DocumentRoot "/home/my_apps/public_html"

      # Acceso a .htaccess  -  archivo de redireccionamiento de página
      # AccessFileName es global y debe ir fuera de cualquier tag <Directory></Directory>
      AccessFileName .htaccess


      # Further relax access to the default document root:
      <Directory "/home/my_apps/public_html/app1">
          #
          # Possible values for the Options directive are "None", "All",
          # or any combination of:
          #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
          #
          # Note that "MultiViews" must be named *explicitly* --- "Options All"
          # doesn't give it to you.
          #
          # The Options directive is both complicated and important.  Please see
          # http://httpd.apache.org/docs/2.4/mod/core.html#options
          # for more information.
          #
          Options Indexes FollowSymLinks MultiViews

          #
          # AllowOverride controls what directives may be placed in .htaccess files.
          # It can be "All", "None", or any combination of the keywords:
          #   Options FileInfo AuthConfig Limit
          #
          AllowOverride All
      </Directory>


      <Directory "/home/my_apps/public_html/cgi-bin">
          AllowOverride None
          Options None
          Require all granted
      </Directory>

  
  Ahora ya podemos colocar nuestro .htaccess sin recibir un error por consola. 
 ________________________________________________________________________


 PLUS__
      En caso de utilizar basename del router seria recomendable hacer 
      uso de alguna biblioteca como "dotenv" ó "env-cmd" para la 
      reutilización de urls segun el entorno de ejecición
      
 dotenv: https://www.npmjs.com/package/dotenv
 env-cmd: https://www.npmjs.com/package/env-cmd