Despliegue de la aplicación REACT con Nginx

February 15, 2019 • ☕️ 5 minutos de lectura

Primero instalaremos los paquetes necesarios

Instalación de nginx

Puedes instalar nginx instalanado el siguiente comando

sudo apt-get install nginx -y

Una vez completada la instalación, podremos verificar el estado.

sudo systemctl status nginx

Ctrl + C para cerrar. Si no se está ejecutando y el estado está inactivo, tenemos que iniciarlo.

sudo systemctl start nginx

Ejecutaremos la siguiente para que nginx se cargue al arranque:

sudo systemctl enable nginx

Para obtener más información sobre nginx, consulte la documentación. https://nginx.org/en/docs/

Instalación de Node.js

Ahora tenemos que instalar node.js en nuestro servidor. Vamos a utilizar NVM (Administrador de versiones de nodo). Empecemos las instalaciones.

sudo apt-get update

Ahora instalaremos los siguientes paquetes.

sudo apt-get install build-essential libssl-dev Es posible que tenga preguntas para las que debe responder con “Y”. Una vez completado, vamos a descargar el script de instalación de NVM:

cd ~
curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
nvm install 8.9.0 //as we are going to use node 8.9.0 LTS
nvm use 8.9.0
node -v
# Outputs: "v8.9.0"
npm -v
# output: "5.5.1"

otros métdos de para instalar nodejs

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

Configuración

Ahora es el momento de agregar el dominio. Primero necesitamos configurar el Nginx. Tenemos que eliminar el archivo de configuración por defecto original.

sudo rm /etc/nginx/sites-available/default

Luego tenemos que ingresar nuestra información al archivo por defecto. Vamos a utilizar nano para editar el archivo. Para guardar y salir de Nano, presione Ctrl X. Luego le preguntará si desea guardar el archivo (haga Ctrl + O). De lo contrario, haga Ctrl + X si no desea guardar los cambios.

sudo nano /etc/nginx/sites-available/default

Copie y pegue lo siguiente y reemplace su_dominio.com con su propio dominio.

server {
    listen 80;
    server_name your_domain.com www.your_domain.com;
    location / {
        proxy_pass http://127.0.0.1:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
     }
}

El tráfico HTTP es redirigido al puerto 5000. Voy a usar mi dmain https://domains.google/. En el lado del proveedor de su dominio, tendrá que apuntar el DNS a la IP pública de su VM Cloud Platform de Google, Digital Ocean, AWS…

Para el tipo “A”, ingrese ”@” en el campo “Host”. Luego introducimos la Ip de nuestra VM y guardamos.

El último paso es volver a cargar Nginx para aceptar nuestras nuevas configuraciones.

sudo systemctl reload nginx

Instalando nuestra app

  1. Crea un directorio raíz y clona tus repos en el servidor.
sudo mkdir /var/www
cd /var/www/

Ya que no querrá usar sudo cada vez que interactúe con archivos en /var/www o /www, daremos privilegios de usuario a esos directorios.

sudo gpasswd -a "$USER" www-data
sudo chown -R "$USER":www-data /var/www
find /var/www -type f -exec chmod 0660 {} \;
sudo find /var/www -type d -exec chmod 2770 {} \;

Ahora que está dentro de /www o /var /www y le ha dado privilegios de usuario, puedes clonar tu repositorio, instalar dependencias y crear tu apliación.

cd ~/
git clone REPO_PATH
  1. Instalando librerías npm
cd ./REPO_NAME
npm install --production

Instalará todas las bibliotecas que definimos en “dependencias” en nuestro archivo package.json. Usaremos estas bibliotecas para ejecutar los archivos del servidor. No vamos a instalar ninguna de las bibliotecas que definimos en “devDependencies”. Porque ya tenemos bundle.js construido para la producción.

  1. Iniciar la aplicación en la producción.

Tengo el siguiente comando en nuestro package.json

NODE_ENV=production node server.js

Una vez que la aplicación comience, puede ingresar la URL de su dominio en el navegador. Servirá su aplicación.

  1. Iniciar aplicación con pm2

But once you hit Crtl + C, your web application will stop. This doesn’t work as an option because we need it always running. We will use pm2 to keep it running. Install with:

npm install pm2 -g

Puede que necesites usar sudo para instalar pm2 de forma global.

Entonces necesitamos agregar un archivo de configuración pm2 a nuestra aplicación. http://pm2.keymetrics.io/docs/usage/application-declaration/

ecosystem.config.js

module.exports = {
  apps : [
      {
        name: "<your application name>",
        script: "./<path to>/server.js",
        watch: true,
        env: {
            "PORT": 8080,//you can choose
            "NODE_ENV": "development"
        },
        env_production: {
            "PORT": 3000,//you can choose
            "NODE_ENV": "production",
        }
      }
  ]
}

Es bueno colocar este archivo de configuración en el directorio raíz de su proyecto.

Ahora ejecutamos el siguiente comando.

pm2 start ecosystem.config.js --env production

Se iniciará su aplicación en modo de producción. Para ver la información sobre este proceso, debe ejecutar el siguiente comando.

pm2 show <app name>

Para detener e iniciar el servidor, puede ejecutar:

pm2 stop <app name> pm2 start <app name>

SSL Setup

Ahora vamos a configurar SSL. Estaremos usando Letsencrypt. Para esto necesita un nombre de dominio y es obligatorio dar un nombre de dominio mientras genera archivos clave para SSL.

Puedes seguir los pasos dados en digitalocean. https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-16-04

cd ~
sudo add-apt-repository ppa:certbot/certbot
# Este es el PPA para paquetes preparado por Debian Let's Encrypt Team y backported para Ubuntu.
# Para más informaión: https://launchpad.net/~certbot/+archive/ubuntu/certbot
# Press [ENTER] to continue or ctrl-c to cancel adding it
sudo apt-get update
sudo apt-get install python-certbot-nginx
# Y
sudo ufw status
# Status: inactive
sudo ufw allow 'Nginx Full'
# Make sure the domain is pointing to the server at this point.
sudo certbot --nginx -d <your_domain.com>-d <www.your_domain.com>
# Introduce tu email
# Acepta los términos
# ¿Quieres compartir tu email? Y/N
# Si no hay dominio falla
# De lo contrario puede redirigir el tráfico o al 1 o al 2.
# Se recomienda 2