Hola! en este post voy a enseñarles a configurar nginx para crear un dominio y ejecutar una aplicación en reactJs o angularJs.
Imagina que tienes un servidor con ubuntu donde quieres alojar 1 dominio o varios que corren una app en reactJs ó angularJs. El objetivo es configurar lo que se conoce como hosts virtuales en la máquina. La verdad es que es realmente sencillo hacer esto. incluso esye dominio esta implementado con nginx y ejecuta wordpress con php ya que tenemos varias páginas alojadas en un mismo servidor.
Si nuestra app en angularJs o reactJs contiene rutas en HTML5 como por ejemplo /about cada vez que recargues el navegador aparecera el error 404 ya que el archivo o la carpeta no existe, en este post mostraremos como configurar nginx para que siempre cargue el archivo index.html y nuestra app que usa el modo HTML5 cargue correctamente las rutas.
Paso 1: Instalar Nginx
Por supuesto, debemos tener Nginx instalado. puedes revisar la documentacion aqui.
Paso 2: Crear el directorio
El siguiente paso es crear una carpeta en nuestro sistema, si queremos añadir un dominio.com, hacemos lo siguiente:
sudo mkdir -p /var/www/{dominio.com ó nombre de la aplicación}/
Paso 3: Clonar repositorio
Si nuestro proyecto esta en git lo idea es clonar el reposotirio en la carpeta que creamos, si usamos react o angular con gulp ejecutamos los comando correspondientes:
npm run build |
ó
gulp build |
Paso4: Crear el Host Virtual en Nginx
A continuación vamos a decirle a Nginx que va a tener un nuevo host virtual que gestionar, es decir, que cuando el usuario introduzca en el navegador dominio.com, el servidor tendrá que leer el archivo de configuración que crearemos para saber qué hacer. En Nginx hay dos rutas importantes. La primera de ellas es sites-available, que contiene los archivos de configuración de los hosts virtuales disponibles en el servidor. La otra es sites-enabled, que contiene los archivos de configuración de los sitios habilitados, es decir, los que funcionan en ese momento. Vamos a crear un archivo para dominio.com ejecutando el siguiente comando:
sudo nano /etc/nginx/sites-available/dominio.com |
pregamos el siguiente contenido:
server {
## Escucha en el puerto 80 (HTTP)
listen 80;
## Raíz donde se encuentra la aplicación recuerda que react crea la carpeta build y angular con ## gulp crea la carpeta dist
root /var/www/dominio.com/build;
## Orden de prioridad de los archivos index
index index.html index.htm;
## dominbre de dominio que se ingresa en el navegador
server_name dominio.com;
##ruta principal
location / {
## si nuestra app usa modo html5 siempre que cargue el index.html
try_files $uri /index.html;
}
}
A pesar de haber creado este archivo, todavía no podemos acceder a nuestra página Web, ya que la configuración está en sites-available, pero no en sites-enabled. Para habilitar el host virtual crearemos un enlace simbólico entre ambas carpetas:
sudo ln -s /etc/nginx/sites-available/dominio.com /etc/nginx/sites-enabled/dominio.com
Paso 5: Reiniciar Nginx
A menos que reiniciemos Nginx, los cambios no se aplicarán:
sudo service nginx restart |
Paso 6: Configurar los DNS
Finalmente tendremos que configurar los registros DNS. si usamos cloudflare apuntamos el nombre de domino a la api de nuestro servidor
Paso 7: Usar certificado ssl
Si en nuestro dominio tenemos un certificado ssl debemos direccionar el puerto 80 (HTTP) al puerto 443 (HTTPS) usando la siguiente configuración:
server { ## Escucha en el puerto 443 (HTTPS) listen 443 ssl spdy; ## dominbre de dominio que se ingresa en el navegador server_name dominio.com; ## activamos el ssl en nginx ssl on; ## ruta de nuestro archivo ctr ssl_certificate /home/ubuntu/SSL/ssl_dominio.com.ctr; ## ruta de archivo key ssl_certificate_key /home/ubuntu/SSL/ssl_dominio.com.key; ## Raíz donde se encuentra la aplicación recuerda que react crea la carpeta build y angular con ## gulp crea la carpeta dist root /var/www/dominio.com/build; ## Orden de prioridad de los archivos index index index.html index.htm; ##ruta principal location / { ## si nuestr app usa modo html5 siempre que cargue el index.html try_files $uri /index.html; } } |
Gracias por leer y compartir este tutorial cuentame que te parecio y que podemos mejorar aqui algunos libros que me han ayudado a mejorar las buenas practicas a la hora de programar.