---
# System prepended metadata

title: '**ENVIO DE PROGRAMA PRODUCTIVO A Google Cloud Platform**'

---

# **ENVIO DE PROGRAMA PRODUCTIVO A Google Cloud Platform**




**CREACION DE INSTANCIA** 
---

Antes de comenzar, ya debemos tener una cuenta activa en GCP que generalmente es gratuita por 3 meses.

1. Entrar al navegador e ir a la consola de GCP y crear un proyecto nuevo cualquiera.
 ![](https://i.imgur.com/LDhT6Aq.png)
  luego click en CREAR
1. hacer click en el menu de navegacion (3 barras de la esquina superior izquierda) y darle click en COMPUTE MACHINE y luego en INSTANCIAS DE VM.
1. Darle click en CREAR INSTANCIA y completar:
    * NOMBRE : nombre de la instancia
    * TIPO MAQUINA : e2-small (2cpu virtuales,2 gb Memoria)
    * DISCO ARRANQUE :
        *  sistema operativo : Ubuntu
        *  version : Ubuntu 20.04 LTS 
        * click en SELECCIONAR
    * FIREWALL : permitir trafico HTTP
    * al final dar click en CREAR
    ![](https://i.imgur.com/31VQohl.png)
1. Cambiar la ip externa de la instancia a estatica para eso dar click en el nombre de la instancia luego en EDITAR :-1: 
    * INTERFACES RED : 
        * Direccion IPv4 externa: entramos a esta opcion
            * CREAR DIRECCION IP : 
                * NOMBRE : nombre de la IP
                * luego click en RESERVAR debe quedar asi:
                 ![](https://i.imgur.com/xwEt1Nc.png)
    * CLAVES SSH: entrar a una terminal de windows (GIT BASH) para generar las 2 llaves ssh publica y privada 
        `ssh-keygen -t ECDSA`
        
        ![](https://i.imgur.com/JDxnua5.png)
        luego enter para aceptar el directorio por defecto y luego enter para aceptar sin password
        ![](https://i.imgur.com/1TBu14I.png)
        
        `cd .ssh`
        `ls`
        veremos que nos ha creado dos archivos
        ![](https://i.imgur.com/hRhCNpI.png)

        entrar a la carpeta donde se encuentra estos 2 archivos dar click derecho en id_ecdsa.pub para abrir en el block de notas 
        ![](https://i.imgur.com/uwautnA.png)
        y lo copiamos todo y volvemos a la instancia,           click en  AGREGAR ELEMENTO y pegamos la llave
        ![](https://i.imgur.com/HGMYtZx.png)
        al final dar click en GUARDAR
        
1. Volvemos a la instancia y tambien entramos a la terminal para conectarnos con la maquina virtual via terminal escribiendo este comando:
        `ssh Jaime@34.125.83.174 -i "/home/Jaime/.ssh/id_ecdsa"     `
        ![](https://i.imgur.com/qltNjQr.png)

    cada vez que queremos entrar a la instancia escribir el comando mencionado para conectarnos con el servidor.

1. Como es la primera vez que nos conectamos con el servidor, es una buena practica actualizarlo, para ello escribimos:
    `sudo apt update  `<br>
    `sudo apt upgrade`<br>
    `sudo apt autoclean`<br>
    `sudo apt autoremove`<br><br>
    



**INSTALACION SERVIDOR WEB NGINX**
---

1. Con la terminal conectada al servidor escribimos el siguiente comando:
    `sudo apt install nginx`
1. Para comprobar que esta instalado NGINX colocamos la ip externa en el navegador
    `34.125.83.174`  
    y nos abre la sgte. pagina
    ![](https://i.imgur.com/LIsUZlW.png)

**INSTALACION DE NODE.js EN EL SERVIDOR**
---

1. Al instalar npm instalamos a la vez node.js y npm, sino tendriamos que instalar uno por uno:
    `sudo apt install npm`
1. una vez finalizado la instalacion verificamos la version:
  `npm -v`    6.14.4  <br>
  `node -v`    v10.19.0<br><br>
    


**INSTALACION Y CONFIGURACION EXT: SFTP EN VISUAL CODE PARA LA CONEXION Y TRANSFERENCIA ARCHIVOS LOCALHOST AL SERVIDOR NUBE**
---

1. Buscamos SFTP en la extensiones de visual code e instalamos la version 1.12.10 de liximomo 
    ![](https://i.imgur.com/5wHuORF.png)
    
1. En la pagina principal vacia de visual code presionamos F1 y buscamos > SFTP:Config 
y nos abrira este archivo : sftp.json
    ![](https://i.imgur.com/QSvwEiH.png)

1. Este achivo nos servira para la transferencia de los archivos del nivel local al nivel productivo (servidor en la nube),lo modificamos de acuerdo a nuestro requerimiento
* **"name": "My Server BackEnd"** > nombre del servidor
* **"host": "34.125.83.174"** > direccion IP donde se va a conectar
* **"protocol": "sftp"** > protocolo que vamos a usar para la transferencia
* **"port": 22** > puerto usado por default
* **"username": "Jaime"** > Colocar el username que aparece en el terminal ssh
* **"remotePath": "/home/Jaime/backend"** > Direccion remota es la carpeta creada en el servidor para el backend, al inicio por defecto es **"/"** se deja asi hasta que se cree la carpeta backend en el servidor.
* **"uploadOnSave": true** > **true** si queremos transferencia automatica al grabar modificaciones en la carpeta local, **false** si queremos hacer la transferencia manual.
* **"privateKeyPath": "C:\\\Users\\\Jaime\\\\.ssh\\\id_ecdsa"** > Como ya tenemos una llave para entrar al servidor via ssh, le colocamos la ruta donde se encuentra la llave en la pc local, ojo :+1: para obtener la ruta ubicamos el archivo **id_ecdsa** click derecho propiedades y obtenemos la ruta copiamos y nos da error de sintaxis porque solo nos aparece 1 back slash, solución agregar otro back slash **\\\\** .
* **"passphrase": ""** > Colocar esta opcion solo si hemos colocado contraseña para ingresar a la terminal via ssh, sino, obviamos esta opción.
* **"ignore": [
             ".vscode",
             "node_modules"
    ]**  > esta opcion se usa para evitar cargar datos muy pesados al servidor, entonces 2 carpetas no vamos a subir al servidor via sftp, **.vscode y node_modules** al final el archivo **sftp.json** deberia quedar asi:
    ![](https://i.imgur.com/xaljIXv.png)
4. Para verificar que podemos entrar al servidor, presionamos el icono del sftp y aparece el nombre del server, lo desplegamos y debemos ver todos los archivos que hemos trabajado a nivel local transferidos al servidor:
    ![](https://i.imgur.com/Y9EXq4R.png)
1. Todo este proceso lo repetimos ( del paso 2 al paso 4) para la carpeta del frontend a nivel local, solo modificando el "name": "My Server FrontEnd" y deberia quedar asi:
    ![](https://i.imgur.com/IZfnYKm.png)
1. se crean 2 carpetas en el servidor backend y frontend con el comando mkdir
    ![](https://i.imgur.com/bc88QD6.png)
1. Para cargar o subir la carpeta local al servidor, vamos al visual code colocamos el cursor en la parte inferior, click derecho y click en la opcion upload folder: 
    ![](https://i.imgur.com/f8kJYN9.png)
esperamos que se transfiera la carpeta la servidor y repetimos el paso 4, presionamos el icono refresh y ya deberiamos ver nuestros archivos subidos al servidor.
Tambien podemos entrar via terminal a la carpeta backens y/o frontend del servidor,y con el comando **ls**  ver los archivos subidos.

1. Ahora nos queda reinstalar la carpeta **node_module** en el servidor, para eso entramos a la carpeta backend y frontend via terminal y escribimos el comando `npm install` :
    ![](https://i.imgur.com/mkexso8.png)
este proceso nos reinstala la carpeta node_module con todas sus librerias que habiamos omitido por ser muy pesados, en la carpeta **sftp.json** con la opcion **"ignore": ["node_modules"]**.
<br>
<br>

**LEVANTAR LOS SERVIDORES BACKEND Y FRONTEND A NIVEL PRODUCTIVO**
---
En el modo local de desarrollo, levantabamos el servicio de backend con el comando `npm start` y a traves de la libreria **nodemon** se actualizaba automaticamente, tambien para el servicio frontend lo levantabamos con el comando `npm run serve`, pero para servidores productivos ya no se aplican esos comandos, ahora hay que mantener corriendo el servidor NGINX a travez del paquete PM2 y tenemos que instalarlo a travez del comando:
```
    sudo npm install pm2 -g
```

1. Despues de instalar este paquete, entramos a la carpeta **backend** y levantamos el servicio con el comando:
    ```
    pm2 start index.js
    ```
    ![](https://i.imgur.com/d9mBzBP.png)
1. para que el servicio no se detenga aun, reiniciando el servidor, el comando:
    ``` 
    pm2 startup
    ```
1. Para ver los servicios que estan corriendo en el servidor, el comando 
     ```
     pm2 list
     ```
1. Para detener el servicio, el comando:
        `pm2 stop 0`  ó 
        `pm2 unstartup`
    ![](https://i.imgur.com/rXZN0gg.png)

        
1. Luego salir de la carpeta backend y entrar a la carpeta **frontend** y construir el proyecto de esta carpeta con el comando:
      ``` 
        npm run build
      ``` 
    OJO : Cada vez que realizemos algun cambio o modificacion en la carpeta backend a nivel local, y despues que se transfiere los archivos por sftp, tenemos que parar el servidor productivo y volverlo a levantar, entrando a la carpeta **backend** del servidor, con los comandos:
   `pm2 stop 0`        y luego:
   `pm2 start 0`   ó  `pm2 start index.js`
   luego entrar a la carpeta frontend y ejecutar:
   ```
   npm run build
   ```
   <BR>
   <BR>
   
   
**CONFIGURAR SERVIDOR NGINX**
---
