Deployer React sur GCP

Déployer React sur GCP : Un Tutoriel Intermédiaire

Pourquoi Deployer React sur GCP ?

Le déploiement de l'application React sur Google Cloud Platform (GCP) est une solution efficace pour plusieurs raisons :

• Echelle et Performance : GCP offre des ressources de calcul puissantes qui peuvent être élasticment augmentées en fonction de la demande.
• Fiabilité et Redondance : Les infrastructures multi-zones de GCP assurent une haute disponibilité et résilience, réduisant ainsi les temps d'arrêt.
• Sécurité : Google Cloud propose des outils robustes pour la gestion de la sécurité, y compris des options de chiffrement et de contrôle d'accès granulaire.

Un cas concret est le déploiement d'une application web de gestion de tâches. Cette application nécessite une grande disponibilité et doit pouvoir gérer un nombre croissant d'utilisateurs en même temps.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Connaissances :

  • Maîtrise de base du langage JavaScript
  • Expérience avec les outils de gestion de versions comme Git
  • Compréhension de la structure d'un projet React

• Outils à installer :

  • Node.js (v14 ou ultérieur)
  • npm (Node Package Manager)
  • Google Cloud SDK
  • Git (pour le contrôle de version)

Concepts Fondamentaux

Création d'une Instance GCP

Pour déployer une application React sur GCP, nous aurons besoin d'une instance virtuelle pour héberger notre application.

## Installer le Google Cloud SDK
gcloud components install gcloud

## Initialiser la configuration du SDK
gcloud init

## Créer un nouveau projet GCP
gcloud projects create mon-projet-gcp --name="Mon Projet GCP"

## Sélectionner le projet
gcloud config set project mon-projet-gcp

## Créer une instance VM
gcloud compute instances create mon-vm --machine-type=n1-standard-1 --zone=us-central1-a

Configuration de l'Instance

Une fois l'instance créée, nous devons la préparer pour héberger notre application React.

## Connecter à l'instance via SSH
gcloud compute ssh mon-vm --zone=us-central1-a

## Mettre à jour les paquets système
sudo apt-get update && sudo apt-get upgrade -y

## Installer Node.js et npm
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

## Vérifier l'installation de Node.js et npm
node --version
npm --version

Mise en Pratique : Projet Fil Rouge

Nous allons créer un gestionnaire de tâches simple avec React.

Étape 1 : Initialisation du Projet

## Créer un nouveau dossier pour le projet et naviguer dedans
mkdir todo-app && cd todo-app

## Initialiser un nouveau projet React
npx create-react-app .

## Lancer l'application pour vérifier que tout fonctionne
npm start

Étape 2 : Ajout d'une Tâche

Nous allons ajouter une fonctionnalité permettant d'ajouter des tâches.

// src/App.js

import React, { useState } from 'react';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const handleAddTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, newTask]);
      setNewTask('');
    }
  };

  return (
    <div className="App">
      <h1>Gestionnaire de Tâches</h1>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Ajouter une tâche"
      />
      <button onClick={handleAddTask}>Ajouter</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Étape 3 : Déploiement sur GCP

Pour déployer notre application sur GCP, nous allons utiliser Google Cloud Run.

## Construire l'image Docker de l'application
gcloud builds submit --tag gcr.io/mon-projet-gcp/todo-app:latest

## Déployer l'application avec Google Cloud Run
gcloud run deploy --image gcr.io/mon-projet-gcp/todo-app:latest --platform managed

Erreurs Frequentes et Debugging

Erreur 1 : Error: Cannot find module 'react'

// src/App.js

import React, { useState } from 'react'; // Ajouter 'react'
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const handleAddTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, newTask]);
      setNewTask('');
    }
  };

  return (
    <div className="App">
      <h1>Gestionnaire de Tâches</h1>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Ajouter une tâche"
      />
      <button onClick={handleAddTask}>Ajouter</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Erreur 2 : Error: Cannot find module 'react-dom'

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom'; // Ajouter 'react-dom'
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Erreur 3 : Error: Module not found: Error: Can't resolve 'module'

// src/App.js

import React, { useState } from 'react';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const handleAddTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, newTask]);
      setNewTask('');
    }
  };

  return (
    <div className="App">
      <h1>Gestionnaire de Tâches</h1>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Ajouter une tâche"
      />
      <button onClick={handleAddTask}>Ajouter</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Pour Aller Plus loin

1. Utiliser Cloud Functions pour API Back-End : Enrichissez votre application avec des services backend en utilisant Google Cloud Functions.
2. Intégrer Firebase pour la Base de Données : Utilisez Firebase Realtime Database ou Firestore pour stocker les tâches en temps réel.
3. Utiliser Container Registry pour gérer les images Docker : Stockez et gérez vos images Docker dans Google Container Registry.

Défi Pratique

Développez une application de microblogging avec React, utilisant Firebase pour l'authentification et la base de données.

Ce tutoriel vous a permis d'apprendre comment déployer une application React sur GCP. Vous avez créé un gestionnaire de tâches simple et le déployé sur Google Cloud Run. Vous avez également abordé les erreurs courantes et leurs corrections, ainsi que des pistes pour approfondir vos connaissances en utilisant d'autres services de GCP.