Production

.dockerignore

@@ -1,5 +1,5 @@
 # Ignorar dependencias locales
-# node_modules se utilizará para mandarse desde github actions
+node_modules
 
 # Ignorar config de Git
 .git

.github/workflows/develop-CD.yml

@@ -17,24 +17,45 @@ jobs:
         with:
           ref: develop
 
-      # 👉 Build la imagen Docker
+      # 👉 Build Docker image with Firebase args
       - name: Build Docker image
-        run: docker build -f Dockerfile.prod -t ${{ secrets.DOCKER_USERNAME }}/frontend-dev:stage-${{ github.sha }} .
+        run: |
+          docker build \
+            --build-arg NEXT_PUBLIC_API_URL=${{ secrets.API_URL_DEV }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_API_KEY=${{ secrets.FIREBASE_API_KEY }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=${{ secrets.FIREBASE_AUTH_DOMAIN }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_PROJECT_ID=${{ secrets.FIREBASE_PROJECT_ID }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=${{ secrets.FIREBASE_STORAGE_BUCKET }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=${{ secrets.FIREBASE_MESSAGING_SENDER_ID }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_APP_ID=${{ secrets.FIREBASE_APP_ID }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ secrets.FIREBASE_MEASUREMENT_ID }} \
+            -f Dockerfile.prod -t ${{ secrets.DOCKER_USERNAME }}/frontend-dev:${{ github.sha }} .
 
       # 👉 Log in to DockerHub
       - name: DockerHub Login
         run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
 
       # 👉 Push la imagen
       - name: Push Docker image to DockerHub
-        run: docker push ${{ secrets.DOCKER_USERNAME }}/frontend-dev:stage-${{ github.sha }}
+        run: docker push ${{ secrets.DOCKER_USERNAME }}/frontend-dev:${{ github.sha }}
 
       # 👉 Add VM to known_hosts
       - name: Add VM to known_hosts
         run: |
           mkdir -p ~/.ssh
           ssh-keyscan ${{ secrets.GCP_VM_IP }} >> ~/.ssh/known_hosts
 
+      - name: Actualizar o agregar imagen en .env
+        uses: appleboy/ssh-action@v0.1.4
+        with:
+          host: ${{ secrets.GCP_VM_IP }}
+          username: ${{ secrets.GCP_VM_USER }}
+          key: ${{ secrets.GCP_SSH_KEY }}
+          script: |
+            cd /home/proyectosdanils/
+            sed -i '/^DOCKER_IMAGE_FRONTEND_DEV=/d' .env
+            echo "DOCKER_IMAGE_FRONTEND_DEV=${{ secrets.DOCKER_USERNAME }}/frontend-dev:${{ github.sha }}" >> .env
+
       # 👉 Desplegar en la VM
       - name: Deploy on GCP VM
         uses: appleboy/ssh-action@v0.1.4
@@ -44,7 +65,4 @@ jobs:
           key: ${{ secrets.GCP_SSH_KEY }}
           script: |
             cd /home/proyectosdanils/
-            docker compose down frontend-dev
-            docker pull ${{ secrets.DOCKER_USERNAME }}/frontend-dev:stage-${{ github.sha }}
-            export DOCKER_IMAGE_FRONTEND_DEV=${{ secrets.DOCKER_USERNAME }}/frontend-dev:stage-${{ github.sha }}
             docker compose up -d frontend-dev

.github/workflows/master-CD.yml

@@ -18,9 +18,19 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      # 👉 Build la imagen Docker
+      # 👉 Build Docker image with Firebase args
       - name: Build Docker image
-        run: docker build -f Dockerfile.prod -t ${{ secrets.DOCKER_USERNAME }}/frontend-prod:${{ github.sha }} .
+        run: |
+          docker build \
+            --build-arg NEXT_PUBLIC_API_URL=${{ secrets.API_URL_PROD }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_API_KEY=${{ secrets.FIREBASE_API_KEY }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=${{ secrets.FIREBASE_AUTH_DOMAIN }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_PROJECT_ID=${{ secrets.FIREBASE_PROJECT_ID }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=${{ secrets.FIREBASE_STORAGE_BUCKET }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=${{ secrets.FIREBASE_MESSAGING_SENDER_ID }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_APP_ID=${{ secrets.FIREBASE_APP_ID }} \
+            --build-arg NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ secrets.FIREBASE_MEASUREMENT_ID }} \
+            -f Dockerfile.prod -t ${{ secrets.DOCKER_USERNAME }}/frontend-prod:${{ github.sha }} .
 
       # 👉 Log in to DockerHub
       - name: DockerHub Login
@@ -36,6 +46,17 @@ jobs:
           mkdir -p ~/.ssh
           ssh-keyscan ${{ secrets.GCP_VM_IP }} >> ~/.ssh/known_hosts
 
+      - name: Actualizar o agregar imagen en .env
+        uses: appleboy/ssh-action@v0.1.4
+        with:
+          host: ${{ secrets.GCP_VM_IP }}
+          username: ${{ secrets.GCP_VM_USER }}
+          key: ${{ secrets.GCP_SSH_KEY }}
+          script: |
+            cd /home/proyectosdanils/
+            sed -i '/^DOCKER_IMAGE_FRONTEND_PROD=/d' .env
+            echo "DOCKER_IMAGE_FRONTEND_PROD=${{ secrets.DOCKER_USERNAME }}/frontend-prod:${{ github.sha }}" >> .env
+
       # 👉 Desplegar en la VM
       - name: Deploy on GCP VM
         uses: appleboy/ssh-action@v0.1.4
@@ -45,7 +66,4 @@ jobs:
           key: ${{ secrets.GCP_SSH_KEY }}
           script: |
             cd /home/proyectosdanils/
-            docker compose down frontend-prod
-            docker pull ${{ secrets.DOCKER_USERNAME }}/frontend-prod:${{ github.sha }}
-            export DOCKER_IMAGE_FRONTEND_PROD=${{ secrets.DOCKER_USERNAME }}/frontend-prod:${{ github.sha }}
             docker compose up -d frontend-prod

Dockerfile.local

@@ -0,0 +1,17 @@
+FROM node:22-alpine
+
+RUN mkdir -p /app
+
+WORKDIR /app
+
+COPY package.json ./
+
+RUN npm install
+
+COPY . .
+
+COPY next.config.ts ./next.config.ts
+
+EXPOSE 3000
+
+CMD ["npm", "run", "dev"]

Dockerfile.prod

@@ -1,14 +1,33 @@
 FROM node:22-alpine
 
-RUN mkdir -p /home/frontend-prod
+RUN mkdir -p /app
 
-WORKDIR /home/frontend-prod
+WORKDIR /app
 
-COPY package.json package-lock.json ./
+COPY package.json ./
 RUN npm install
 
 COPY . .
 
+ARG NEXT_PUBLIC_API_URL
+ARG NEXT_PUBLIC_FIREBASE_API_KEY
+ARG NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
+ARG NEXT_PUBLIC_FIREBASE_PROJECT_ID
+ARG NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
+ARG NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
+ARG NEXT_PUBLIC_FIREBASE_APP_ID
+ARG NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
+
+ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
+ENV NEXT_PUBLIC_FIREBASE_API_KEY=$NEXT_PUBLIC_FIREBASE_API_KEY
+ENV NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=$NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
+ENV NEXT_PUBLIC_FIREBASE_PROJECT_ID=$NEXT_PUBLIC_FIREBASE_PROJECT_ID
+ENV NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=$NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
+ENV NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=$NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
+ENV NEXT_PUBLIC_FIREBASE_APP_ID=$NEXT_PUBLIC_FIREBASE_APP_ID
+ENV NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=$NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
+
+
 RUN npm run build
 
 EXPOSE 3000

app/(auth)/login/_components/DesktopForm.tsx

@@ -1,4 +1,13 @@
-export default function DesktopForm({ setMode }: { setMode: (mode: string) => void }) {
+'use client';
+import GoogleLoginButton from '@/app/_components/GoogleLoginButton';
+import { useFormStatus } from 'react-dom';
+interface Props {
+  setMode: (mode: string) => void;
+  registerAction: (payload: FormData) => void;
+  loginAction: (payload: FormData) => void;
+}
+
+export default function DesktopForm({ setMode, registerAction, loginAction }: Props) {
   return (
     <div className="hidden lg:flex gap-10 justify-between w-full">
       <section className="w-[100%] flex flex-col items-center gap-5 max-w-[600px] mx-auto">
@@ -8,7 +17,7 @@ export default function DesktopForm({ setMode }: { setMode: (mode: string) => vo
           </h1>
           <h2>Inicia sesión para acceder a tus salas</h2>
         </header>
-        <form className="flex flex-col gap-5 w-[80%]">
+        <form className="flex flex-col gap-5 w-[80%]" action={loginAction}>
           <div className="flex flex-col gap-1">
             <label htmlFor="email-login-desktop" className="font-bold">
               Tu correo
@@ -19,6 +28,7 @@ export default function DesktopForm({ setMode }: { setMode: (mode: string) => vo
               placeholder="Correo electrónico"
               autoComplete="email"
               className="w-full border-1 border-purple-300 p-2 rounded"
+              name="email"
             />
           </div>
           <div>
@@ -31,9 +41,12 @@ export default function DesktopForm({ setMode }: { setMode: (mode: string) => vo
               placeholder="Contraseña"
               className="w-full border-1 border-purple-300 p-2 rounded"
               autoComplete="current-password"
+              name="password"
             />
           </div>
-          <button className="bg-purple rounded p-2">Ingresar a la plataforma</button>
+          <SubmitButton text="Ingresar a la plataforma" />
+
+          <GoogleLoginButton />
         </form>
         <div className="flex gap-1">
           <p>¿Aún no tienes una cuenta?</p>
@@ -43,21 +56,23 @@ export default function DesktopForm({ setMode }: { setMode: (mode: string) => vo
         </div>
       </section>
 
+      {/* REGISTRO */}
       <section className="w-[100%] flex flex-col items-center gap-5 max-w-[600px] mx-auto">
         <header className="flex flex-col items-center gap-1">
           <h1 className="text-2xl font-extrabold text-center">Regístrate y Conecta</h1>
           <h2>Podrás guardar tus conversaciones y salas</h2>
         </header>
-        <form className="flex flex-col gap-5 w-[80%]">
+        <form className="flex flex-col gap-5 w-[80%]" action={registerAction}>
           <div className="flex flex-col gap-1">
             <label htmlFor="user-register-desktop" className="font-bold">
-              Tu ususuario
+              Tu usuario
             </label>
             <input
               id="user-register-desktop"
               type="text"
-              placeholder="Correo electrónico"
+              placeholder="Usuario"
               className="w-full border-1 border-purple-300 p-2 rounded"
+              name="displayName"
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -70,6 +85,7 @@ export default function DesktopForm({ setMode }: { setMode: (mode: string) => vo
               placeholder="Correo electrónico"
               autoComplete="email"
               className="w-full border-1 border-purple-300 p-2 rounded"
+              name="email"
             />
           </div>
           <div>
@@ -82,9 +98,10 @@ export default function DesktopForm({ setMode }: { setMode: (mode: string) => vo
               placeholder="Contraseña"
               className="w-full border-1 border-purple-300 p-2 rounded"
               autoComplete="current-password"
+              name="password"
             />
           </div>
-          <button className="bg-purple rounded p-2">Crear cuenta</button>
+          <SubmitButton text="Crear cuenta" />
         </form>
         <div className="flex gap-1">
           <p>¿Ya tienes una cuenta?</p>
@@ -96,3 +113,12 @@ export default function DesktopForm({ setMode }: { setMode: (mode: string) => vo
     </div>
   );
 }
+
+function SubmitButton({ text }: { text: string }) {
+  const { pending } = useFormStatus();
+  return (
+    <button disabled={pending} className="bg-purple rounded p-2 cursor-pointer">
+      {pending ? 'Cargando...' : text}
+    </button>
+  );
+}

app/(auth)/login/_components/MobileForm.tsx

@@ -1,8 +1,15 @@
+'use client';
+import GoogleLoginButton from '@/app/_components/GoogleLoginButton';
+import { useState } from 'react';
+
 interface Props {
-  mobileModeLogin: boolean;
-  setMobileModeLogin: (value: boolean) => void;
+  registerAction: (payload: FormData) => void;
+  loginAction: (payload: FormData) => void;
 }
-export default function MobileForm({ mobileModeLogin, setMobileModeLogin }: Props) {
+
+export default function MobileForm({ registerAction, loginAction }: Props) {
+  const [mobileModeLogin, setMobileModeLogin] = useState(true);
+
   return (
     <div className="flex lg:hidden gap-10 justify-between w-full">
       <section
@@ -14,7 +21,7 @@ export default function MobileForm({ mobileModeLogin, setMobileModeLogin }: Prop
           </h1>
           <h2>Inicia sesión para acceder a tus salas</h2>
         </header>
-        <form className="flex flex-col gap-5 w-[80%]">
+        <form className="flex flex-col gap-5 w-[80%]" action={loginAction}>
           <div className="flex flex-col gap-1">
             <label htmlFor="email-login-mobile" className="font-bold">
               Tu correo
@@ -25,6 +32,7 @@ export default function MobileForm({ mobileModeLogin, setMobileModeLogin }: Prop
               placeholder="Correo electrónico"
               autoComplete="email"
               className="w-full border-1 border-purple-300 p-2 rounded"
+              name="email"
             />
           </div>
           <div>
@@ -37,9 +45,11 @@ export default function MobileForm({ mobileModeLogin, setMobileModeLogin }: Prop
               placeholder="Contraseña"
               autoComplete="current-password"
               className="w-full border-1 border-purple-300 p-2 rounded"
+              name="password"
             />
           </div>
           <button className="bg-purple rounded p-2">Ingresar a la plataforma</button>
+          <GoogleLoginButton />
         </form>
         <div className="flex gap-1">
           <p>¿Aún no tienes una cuenta?</p>
@@ -56,7 +66,7 @@ export default function MobileForm({ mobileModeLogin, setMobileModeLogin }: Prop
           <h1 className="text-2xl font-extrabold text-center">Regístrate y Conecta</h1>
           <h2>Podrás guardar tus conversaciones y salas</h2>
         </header>
-        <form className="flex flex-col gap-5 w-[80%]">
+        <form className="flex flex-col gap-5 w-[80%]" action={registerAction}>
           <div className="flex flex-col gap-1">
             <label htmlFor="user-register-mobile" className="font-bold">
               Tu ususuario
@@ -66,6 +76,7 @@ export default function MobileForm({ mobileModeLogin, setMobileModeLogin }: Prop
               type="text"
               placeholder="Correo electrónico"
               className="w-full border-1 border-purple-300 p-2 rounded"
+              name="displayName"
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -78,6 +89,7 @@ export default function MobileForm({ mobileModeLogin, setMobileModeLogin }: Prop
               placeholder="Correo electrónico"
               autoComplete="email"
               className="w-full border-1 border-purple-300 p-2 rounded"
+              name="email"
             />
           </div>
           <div>
@@ -90,6 +102,7 @@ export default function MobileForm({ mobileModeLogin, setMobileModeLogin }: Prop
               placeholder="Contraseña"
               autoComplete="current-password"
               className="w-full border-1 border-purple-300 p-2 rounded"
+              name="password"
             />
           </div>
           <button className="bg-purple rounded p-2">Crear cuenta</button>