React + Firebase en Google Cloud

Desplegar una aplicación

Victor Aguilar

https://vico.dev

+

Objetivos

Desplegar una aplicación construida con React & Firebase en Google Cloud Run

https://vico.dev

Requerimientos

  • Tener docker y docker-compose
  • Tener una cuenta google (o correo gmail)
  • Tener cuenta en github

https://vico.dev

El Proyecto

https://github.com/cpena/extralove

https://vico.dev

Instalación (local)

https://vico.dev

Instalación (local)

1. Clonar el Proyecto

{
  apiKey: "........",
  authDomain: "xxxx.firebaseapp.com",
  databaseURL: "https://xxxx.firebaseio.com",
  projectId: "xxxx",
  storageBucket: "xxxx.appspot.com",
  messagingSenderId: "0101923",
  appId: "......"
}

https://vico.dev

git clone https://github.com/cpena/extralove

2. Obtener la Config  de  Firebase para el proyecto 

https://vico.dev

2. Obtener la Config  de  Firebase para el proyecto 

Despliegue

https://vico.dev

https://vico.dev

Es un entorno autogestionado  para desplegar aplicaciones sin estado que esten contenerizadas

Aplicaciones sin estado

Son aplicaciones que no necesitan guardar los datos por si misma

estado

app

Despliegue

Instalar y configurar gcloud cli

# 1. Descarga
wget https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-329.0.0-darwin-x86_64.tar.gz

# 2. Preparación
tar xopf google-cloud-sdk-329.0.0-darwin-x86_64.tar.gz

# 3. Instalación
./google-cloud-sdk/install.sh

# 4. Configuración
./google-cloud-sdk/bin/gcloud init

https://cloud.google.com/sdk/docs/install

Despliegue

Configurar el  proyecto en Google Cloud 

https://vico.dev

Despliegue

Dockerizar el Proyecto

# build environment
FROM node:12-alpine as react-build
WORKDIR /app
COPY . ./
RUN yarn
RUN yarn build

# server environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/configfile.template

COPY --from=react-build /app/build /usr/share/nginx/html
COPY --from=react-build /app/src/firebase-config.json /usr/share/nginx/html/src/firebase-config.json

ENV PORT 8080
ENV HOST 0.0.0.0

EXPOSE 8080
CMD sh -c "envsubst '\$PORT' < /etc/nginx/conf.d/configfile.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"

Dockerfile

Despliegue

Configuración de Nginx

server {
     listen       $PORT;
     server_name  localhost;

     location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
         try_files $uri /index.html;
     }

     gzip on;
     gzip_vary on;
     gzip_min_length 10240;
     gzip_proxied expired no-cache no-store private auth;
     gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
     gzip_disable "MSIE [1-6]\.";

}

https://vico.dev

Despliegue

Despliegue en Cloud Run


# 1. Construye la imagen docker y la carga 
# en el Container Registry
gcloud builds submit --tag gcr.io/<project_name>/<service_name>

# 2. Despliega la imagen construida
gcloud beta run deploy --image gcr.io/<project_name>/<service_name> --platform managed

https://vico.dev

https://extralove-gdrop6cwaq-ue.a.run.app

¿Que más agregar desde aquí?

  • Integración Continua
  • Dominio Personalizado
  • Despliegue de multiples ambientes (staging, production)

https://vico.dev

Desplegar una app Reat + Firebase en Google Cloud

By Victor Aguilar

Made with Slides.com

Desplegar una app Reat + Firebase en Google Cloud

Como desplegar un proyecto

  • 317

More from Victor Aguilar