Deployer Nuxt sur AWS

Pourquoi Deployer Nuxt sur AWS ?

Deployer Nuxt sur AWS est une pratique courante pour les développeurs qui cherchent à créer des applications web performantes, scalables et sécurisées. L'Amazon Web Services (AWS) propose une plateforme d'hébergement robuste et flexible qui permet de gérer n'importe quel type d'application.

Un cas d'utilisation concret est l'hébergement d'une application e-commerce en ligne. Les applications commerciales nécessitent un haut niveau de performance, de disponibilité et de sécurité. AWS offre des services tels que Elastic Beanstalk ou AWS Lambda qui sont parfaitement adaptés pour ce type d'application.

Prerequis

• Connaissance avancée du langage JavaScript
• Familiarité avec les bases de Nuxt.js
• Compréhension des concepts de développement web (HTML, CSS, JS)
• Un compte AWS valide
• L'outil aws-cli installé sur votre machine

Concepts fondamentaux

1. Elastic Beanstalk

Elastic Beanstalk est un service qui simplifie le déploiement d'applications web et microservices. Il prend en charge de nombreux langages de programmation et frameworks, y compris Nuxt.js.

## Installer aws-cli si ce n'est pas déjà fait
npm install -g aws-cli

## Configurer aws-cli avec vos informations d'identification AWS
aws configure

2. IAM (Identity and Access Management)

IAM est un service AWS qui permet de gérer les identités et les autorisations dans votre compte. Pour déployer Nuxt sur Elastic Beanstalk, vous aurez besoin d'un rôle IAM approprié.

## Créer un utilisateur IAM avec des droits suffisants
aws iam create-user --user-name nuxt-deploy

## Attribuer une stratégie à l'utilisateur
aws iam attach-user-policy --user-name nuxt-deploy --policy-arn arn:aws:iam::aws:policy/AWSCodeDeployFullAccess

3. Application Versioning

AWS Elastic Beanstalk permet de versionner vos applications, ce qui vous donne la possibilité d'annuler les déploiements en cas de problème.

## Créer une nouvelle version de votre application
eb create my-nuxt-app --version-label v1.0

Mise en pratique : projet fil rouge

Nous allons créer un simple gestionnaire de tâches en utilisant Nuxt.js et déployer cette application sur AWS Elastic Beanstalk.

Étape 1 : Initialiser le projet Nuxt

## Créer un nouveau projet Nuxt.js
npx create-nuxt-app my-todo-list

## Choisissez les options suivantes :
## - Project name: my-todo-list
## - Programming language: JavaScript
## - Package manager: npm
## - UI framework: None
## - Nuxt.js modules: Axios, PWA (Progressive Web App), Contentful
## - Rendering mode: Universal
## - Deployment target: Server (Node.js hosting)
## - Development tools: Linting with ESLint, Prettier

Étape 2 : Configurer le projet

Créez un fichier .ebextensions dans le répertoire racine de votre projet. Ce fichier contiendra les configurations spécifiques à Elastic Beanstalk.

## .ebextensions/nodejs.config
option_settings:
  aws:nodejs:packages:
    express: ^4.17.1

Étape 3 : Créer le serveur API

Créez un fichier server.js dans le répertoire racine de votre projet.

// server.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json());

let todos = [];

app.get('/todos', (req, res) => {
  res.json(todos);
});

app.post('/todos', (req, res) => {
  const todo = req.body;
  todos.push(todo);
  res.status(201).json(todo);
});

module.exports = app;

Étape 4 : Configurer le serveur Nuxt

Modifiez le fichier nuxt.config.js pour inclure le serveur API.

// nuxt.config.js
export default {
  server: {
    port: process.env.PORT || 3000,
    host: '0.0.0.0'
  },
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
  ],
}

Étape 5 : Créer les composants et pages

Créez un composant Todo.vue dans le répertoire components.

<!-- components/Todo.vue -->
<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        todo
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      this.todos.push(this.newTodo);
      this.newTodo = '';
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
}
</script>

Créez une page index.vue dans le répertoire pages.

<!-- pages/index.vue -->
<template>
  <div>
    <h1>My Todo List</h1>
    <Todo />
  </div>
</template>

<script>
import Todo from '~/components/Todo.vue'

export default {
  components: {
    Todo
  }
}
</script>

Étape 6 : Déployer l'application sur Elastic Beanstalk

## Initialiser le déploiement Elastic Beanstalk
eb init my-nuxt-app --region us-east-1 --profile nuxt-deploy

## Créer un environnement Elastic Beanstalk
eb create my-todo-env

## Déployer l'application
eb open

Erreurs frequentes et debugging

1. Erreur : EB Error: Command failed on instance.

## Code incorrect
npm install

## Code correct
npm ci

2. Erreur : EB Error: The specified environment does not exist.

## Code incorrect
eb create my-env

## Code correct
eb init my-app --region us-east-1
eb create my-env

3. Erreur : EB Error: Failed to configure application version.

## Code incorrect
aws elasticbeanstalk update-application-version --application-name my-app --version-label v2.0

## Code correct
aws elasticbeanstalk update-application-version --application-name my-app --version-label v2.0 --source-bundle S3Bucket=my-bucket,S3Key=path/to/source.zip

Pour aller plus loin

1. Utiliser AWS Lambda pour le traitement de fonctions

AWS Lambda permet d'exécuter du code sans gérer l'infrastructure.

2. Configurer des variables d'environnement en production

Utilisez la console AWS ou les fichiers .ebextensions pour définir des variables d'environnement.

## .ebextensions/env.config
option_settings:
  aws:elasticbeanstalk:container:nodejs:
    NODE_ENV: production

3. Utiliser AWS CloudFront pour le délai de mise en cache

CloudFront permet de distribuer vos applications web à travers le réseau mondial avec un délai de mise en cache optimisé.

Défi pratique : Créer une application de gestion de blog

Créez une application de gestion de blog simple en utilisant Nuxt.js, Express et MongoDB. Utilisez AWS Elastic Beanstalk pour déployer l'application.

N'oubliez pas d'inclure des tests unitaires et d'intégration pour votre application.