Pourquoi Déployer Next.js sur Azure ?
Deployer un application Next.js sur Azure permet d'exploiter les avantages des services cloud tels que la scalabilité automatique, l'intégration avec d'autres services Microsoft et une gestion simplifiée du déploiement. Cela est particulièrement utile pour les développeurs qui cherchent à construire des applications web performantes, fiables et à grande échelle.
Un cas concret de l'utilisation de Next.js sur Azure serait la création d'une application de blog qui nécessite un contenu dynamique et une mise à jour fréquente. Avec Azure, on peut facilement gérer les mises à jour du contenu tout en profitant des capacités de stockage et de traitement de masse.
Prerequis
- Connaissance approfondie de JavaScript et React
- Familiarité avec la ligne de commande (Terminal)
- Installation de Node.js version 14 ou plus récente
- Installation d'Azure CLI
- Création d'un compte Azure
Concepts fondamentaux
1. Application Next.js
Next.js est un framework React qui permet de construire des applications web modernes avec React et SSR (Server-Side Rendering). Il simplifie la création d'applications universelles, optimisées pour les moteurs de recherche.
// index.js
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title>Mon Blog</title>
</Head>
<main>
<h1>Bienvenue sur mon blog!</h1>
</main>
</div>
)
}
2. Azure App Service
Azure App Service est un service PaaS (Platform as a Service) qui permet de déployer, mettre à l'échelle et gérer des applications web, API et microservices.
## Créez une ressource App Service avec Azure CLI
az webapp create --resource-group myResourceGroup --name myWebApp --plan myPlan --runtime "NODE|14"
3. Configuration des fichiers package.json
Le fichier package.json contient les dépendances de votre application et définit le script de démarrage.
{
"name": "my-blog",
"version": "1.0.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2"
}
}
4. Déploiement sur Azure
Pour déployer votre application Next.js sur Azure, vous pouvez utiliser le déploiement continu avec GitHub Actions ou Azure DevOps.
Utilisation de GitHub Actions
## .github/workflows/deploy.yml
name: Deploy to Azure Web App
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- run: npm install
- run: npm run build
- name: Deploy to Azure Web App
uses: azure/webapps-deploy@v2
with:
app-name: myWebApp
slot-name: production
publish-profile: $secrets.AZURE_WEBAPP_PUBLISH_PROFILE
Mise en pratique : Projet Fil Rouge
Pour ce tutoriel, nous allons construire une application simple de gestion de tâches. Nous utiliserons Next.js pour le front-end et Express.js pour le back-end.
1. Création du projet
## Créez un nouveau projet Next.js
npx create-next-app@latest task-manager
cd task-manager
2. Installation des dépendances
## Installez les dépendances du backend (Express.js)
npm install express body-parser cors
3. Configuration du back-end
Créez un nouveau fichier server/index.js pour le serveur Express.
// server/index.js
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const app = express()
app.use(bodyParser.json())
app.use(cors())
let tasks = []
app.get('/tasks', (req, res) => {
res.json(tasks)
})
app.post('/tasks', (req, res) => {
const task = req.body
tasks.push(task)
res.status(201).json(task)
})
const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`)
})
4. Configuration du script de démarrage
Ajoutez un script pour démarrer le serveur Express dans package.json.
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"server": "node server/index.js"
}
}
5. Création des composants Next.js
Créez un nouveau fichier pages/index.js pour la page d'accueil.
// pages/index.js
import Head from 'next/head'
import TaskForm from '../components/TaskForm'
import TaskList from '../components/TaskList'
export default function Home() {
return (
<div>
<Head>
<title>Ma Gestionnaire de Tâches</title>
</Head>
<main>
<h1>Gestionnaire de Tâches</h1>
<TaskForm />
<TaskList />
</main>
</div>
)
}
Créez un nouveau fichier components/TaskForm.js pour le formulaire d'ajout de tâche.
// components/TaskForm.js
import { useState } from 'react'
const TaskForm = () => {
const [task, setTask] = useState('')
const handleSubmit = async (e) => {
e.preventDefault()
try {
const response = await fetch('/api/tasks', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ task })
})
const data = await response.json()
console.log(data)
} catch (error) {
console.error(error)
}
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Ajouter une tâche"
/>
<button type="submit">Ajouter</button>
</form>
)
}
export default TaskForm
Créez un nouveau fichier components/TaskList.js pour la liste de tâches.
// components/TaskList.js
import { useState, useEffect } from 'react'
const TaskList = () => {
const [tasks, setTasks] = useState([])
useEffect(() => {
fetch('/api/tasks')
.then(response => response.json())
.then(data => setTasks(data))
}, [])
return (
<ul>
{tasks.map(task => (
<li key={task.id}>{task.task}</li>
))}
</ul>
)
}
export default TaskList
6. Création des routes API
Créez un nouveau fichier pages/api/tasks.js pour les routes de l'API.
// pages/api/tasks.js
import { task } from 'body-parser'
let tasks = []
export default function handler(req, res) {
if (req.method === 'GET') {
res.status(200).json(tasks)
} else if (req.method === 'POST') {
const newTask = req.body.task
tasks.push({ id: tasks.length + 1, task })
res.status(201).json(newTask)
} else {
res.setHeader('Allow', ['GET', 'POST'])
res.status(405).end(`Method ${req.method} Not Allowed`)
}
}
7. Démarrage de l'application
## Démarrez le serveur Express et Next.js en parallèle
npm run dev &
node server/index.js
Erreurs Fréquentes et Debugging
Erreur : Invalid host header
Lors du démarrage du serveur Next.js, vous pouvez rencontrer cette erreur si le header Host n'est pas correctement configuré.
## Erreur
Error: Invalid host header
Correction :
Ajoutez la ligne suivante à votre fichier .env.local.
NEXT_PUBLIC_HOST=localhost
Erreur : Module not found: Error: Cannot resolve module 'react'
Si vous rencontrez cette erreur, cela signifie que React n'est pas correctement installé.
## Erreur
Error: Module not found: Error: Cannot resolve module 'react'
Correction :
Assurez-vous d'avoir installé les dépendances de base avec npm install.
Erreur : Error: listen EADDRINUSE: address already in use
Si vous rencontrez cette erreur, cela signifie que le port est déjà utilisé.
## Erreur
Error: listen EADDRINUSE: address already in use
Correction :
Changez le port dans votre fichier .env.local ou utilisez un autre port disponible.
Pour aller plus loin
- Intégration avec Azure Cosmos DB : Apprenez à stocker vos données de tâches dans une base de données NoSQL Azure Cosmos DB.
- Authentification et autorisation : Ajoutez une authentification et une gestion des droits d'accès pour votre application.
- Déploiement continu avec Azure DevOps : Utilisez Azure DevOps pour automatiser le déploiement de votre application.
Défi Pratique
Créez une application de chat simple qui permet aux utilisateurs de partager des messages. Utilisez Next.js pour le front-end et Express.js avec MongoDB pour le back-end.