Deployer Vue sur GCP

Pourquoi Deployer Vue sur GCP ?

Le déploiement d'applications Vue.js sur Google Cloud Platform (GCP) offre de nombreux avantages. En effet, GCP dispose d'une infrastructure robuste et fiable qui permet une grande scalabilité et disponibilité pour les applications web modernes. De plus, la plateforme offre des outils puissants et des services intégrés qui facilitent le développement, le déploiement et la gestion de l'infrastructure. Un cas concret est celui d'une application de gestion de tâches en ligne : en déployant sur GCP, l'application peut gérer une grande quantité de demandes simultanées, assurer sa disponibilité 24h/24 et permettre aux utilisateurs de la consulter depuis n'importe où dans le monde.

Prerequis

• Connaissance avancée du développement web avec Vue.js
• Compréhension des concepts de bases d'infrastructure en nuage (cloud computing)
• Familiarité avec les outils suivants :
  • Node.js et npm (version >= 14.0)
  • Vue CLI (commande npm install -g @vue/cli)
  • Google Cloud SDK (commande gcloud init pour initialiser l'environnement)

Concepts fondamentaux

1. Project sur GCP

Un projet est le conteneur principal de toutes les ressources et des services de GCP que vous utilisez. Voici comment créer un nouveau projet :

## Créer un nouveau projet avec Google Cloud SDK
gcloud projects create mon-projet-unique --name="Mon Projet Unique"

2. App Engine

App Engine est une plateforme à gestion complète pour le déploiement d'applications web et mobiles de façon simple et rapide.

## Déployer l'application sur App Engine avec Vue CLI
vue-cli-service build
gcloud app deploy

Ce qui va créer un build de production et le déployer sur App Engine.

3. Cloud Storage

Cloud Storage est une solution d'infrastructure à objet pour stocker des données évoluant en grand volume, de manière fiable et sécurisée.

## Copier les fichiers de l'application dans un bucket Cloud Storage
gsutil cp -r dist gs://mon-bucket-nom/mon-projet-unique/

4. Cloud CDN

Cloud CDN permet d'accélérer la distribution des contenus statiques en utilisant des réseaux à haute vitesse et de faible latence.

## Configurer une configuration CDN pour votre bucket
gcloud compute url-maps create mon-url-map --default-target-backend-bucket gs://mon-bucket-nom/mon-projet-unique

Mise en pratique : projet fil rouge

1. Créer un nouveau projet Vue.js

## Installer Vue CLI (si ce n'est pas déjà fait)
npm install -g @vue/cli

## Créer un nouveau projet Vue
vue create mon-projet-gcp
cd mon-projet-gcp

2. Ajouter du contenu dans le template principal

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Bienvenue sur mon application GCP</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

3. Construire l'application

## Construire l'application pour la production
npm run build

Ce qui va créer un dossier dist contenant tous les fichiers nécessaires.

4. Déployer sur App Engine

## Installer le plugin Vue.js avec App Engine
vue-cli-plugin-appengine

## Mettre à jour le fichier app.yaml pour configurer App Engine
runtime: nodejs14
entrypoint: npm start --prefix dist

## Déployer l'application sur App Engine
gcloud app deploy

5. Configurer Cloud Storage et CDN

## Créer un bucket Cloud Storage
gsutil mb gs://mon-bucket-nom

## Copier les fichiers de l'application dans le bucket
gsutil cp -r dist gs://mon-bucket-nom/mon-projet-unique/

## Configurer une configuration CDN pour votre bucket
gcloud compute url-maps create mon-url-map --default-target-backend-bucket gs://mon-bucket-nom/mon-projet-unique

Erreurs frequentes et debugging

1. Erreur : Error: Could not find module '@vue/cli-plugin-appengine'

Le plugin n'est pas installé.

## Installer le plugin manquant
vue add @vue/cli-plugin-appengine

2. Erreur : App Engine SDK is required to deploy an application

SDK d'App Engine non installé ou mal configuré.

## Installer App Engine SDK via npm
npm install -g appengine-nodejs

## Configurer le projet avec App Engine
gcloud init

3. Erreur : Error: Failed to deploy the application

Problème de configuration du fichier app.yaml ou des permissions.

## Vérifier la syntaxe de app.yaml
yamllint app.yaml

## Assurer les permissions sur le bucket Cloud Storage
gsutil acl ch -u AllUsers:R gs://mon-bucket-nom/mon-projet-unique/

Pour aller plus loin

1. Utiliser Firebase Hosting : Pour un déploiement rapide et simple. Documentation Firebase Hosting

2. Intégrer Kubernetes sur GCP : Pour une gestion de cluster avancée. Documentation Kubernetes

3. Mettre en place des tests continus (CI/CD) : Aide à la vérification et à l'automatisation du déploiement.

Défi pratique : Créer un petit service CRUD avec Vue.js et backend Node.js sur GCP, en utilisant App Engine pour le backend et Cloud Storage pour le stockage de fichiers.