Server compartido con Apache y ReactRouter

Server-Compartido.md

_______________________________ 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
• env-cmd