Website s3

Installation d'un Wiki Statique avec MkDocs sur AWS S3 et CloudFront

Table des Matières

• Introduction
• Étape 1 : Utilisation de MkDocs en Local
• Étape 2 : Utilisation de GitHub Actions pour le Déploiement
• Étape 3 : Utilisation de GitHub Actions pour la Synchronisation avec AWS S3
• Étape 4 : Utilisation d'une Politique IAM Spécifique
• Étape 5 : Utilisation de CloudFront pour le HTTPS
• Étape 6 : Utilisation de Lambda pour les index des sous dossiers

Étape 1 : Utilisation de MkDocs en Local

Pour faire des modifications sur votre site wiki, suivez ces étapes :

1. Installez MkDocs sur votre ordinateur.

2. Installation de MkDocs : Assurez-vous d'avoir Python et pip (le gestionnaire de packages Python) installés sur votre système. Ensuite, vous pouvez installer MkDocs via la commande suivante : pip install mkdocs

3. Initialisation du projet MkDocs : Après avoir installé MkDocs, créez un nouveau répertoire pour votre projet wiki et initialisez-le en utilisant la commande suivante : mkdocs new my-wiki Cela créera un répertoire "my-wiki" avec une structure de fichiers initiale.

4. Édition des articles : Dans le répertoire nouvellement créé, vous verrez un fichier mkdocs.yml qui contient la configuration de votre site. Vous pouvez personnaliser cette configuration pour ajuster le thème, les options de navigation, etc.

Créez ou modifiez les fichiers Markdown dans le dossier docs pour ajouter vos articles et votre contenu. Chaque fichier Markdown correspondra à une page sur votre site.

1. Aperçu du site en local : Vous pouvez prévisualiser votre site en local en exécutant la commande suivante : `mkdocs serve

` Cela démarrera un serveur de développement local, et vous pourrez accéder à votre site en ouvrant un navigateur et en accédant à http://localhost:8000.

1. Génération du site statique : Une fois que vous êtes satisfait de votre contenu, générez le site statique en exécutant la commande suivante : mkdocs build Cela générera les fichiers HTML et autres ressources statiques dans un dossier appelé site.

2. Créez ou modifiez vos pages dans le dossier docs de votre projet.

3. Utilisez la commande mkdocs serve pour prévisualiser vos modifications localement.
4. Une fois satisfait de vos modifications, passez à l'étape suivante pour publier vos changements.

Étape 2 : Utilisation de GitHub Actions pour le Déploiement

1. Configurez GitHub Actions pour automatiser le déploiement de votre site wiki à chaque poussée vers le référentiel GitHub.

2. Générer une clé d'accès SSH _ Générez une nouvelle clé SSH pour votre projet en utilisant la commande suivante dans votre terminal local (remplacez par votre adresse e-mail) : ssh-keygen -t rsa -b 4096 -C "<EMAIL>" _ Enregistrez cette clé SSH dans un fichier, par exemple deploy_key.

3. Ajouter la clé SSH aux secrets du référentiel

   • Dans votre référentiel GitHub, allez dans l'onglet "Settings".
   • Dans le menu de gauche, cliquez sur "Secrets".
   • Cliquez sur "New repository secret".
   • Nommez le secret ACTIONS_DEPLOY_KEY.
   • Dans la zone de texte "Value", collez le contenu de la clé SSH que vous avez enregistrée précédemment (le contenu du fichier deploy_key).
   • Enregistrez le secret.

4. Utilisez le flux de travail personnalisé suivant dans votre fichier .github/workflows/deploy.yml* :

name: Publish docs via GitHub Pages
on:
  push:
    branches:
      - main

jobs:
  build:
    name: Deploy docs
    runs-on: ubuntu-latest
    steps:
      - name: Checkout main
        uses: actions/checkout@v3

      - name: Deploy docs
        uses: mhausenblas/mkdocs-deploy-gh-pages@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          CONFIG_FILE: mkdocs.yml
          EXTRA_PACKAGES: build-base

Étape 3 : Utilisation de GitHub Actions pour la Synchronisation avec AWS S3

1. Créez un flux de travail personnalisé pour synchroniser vos modifications vers AWS S3.

2. Utilisez le flux de travail suivant dans votre fichier .github/workflows/s3-sync.yml* :

name: Deploy to S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set up AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: eu-north-1

      - name: Sync files to S3
        run: aws s3 sync memo/site s3://XXX-XXXX --delete
      - name: Create environment file
        run: echo "BUCKET_NAME=XXX-XXX" >> $GITHUB_ENV

Étape 4 : Utilisation d'une Politique IAM Spécifique

1. Utilisez une politique IAM pour sécuriser l'accès en lecture à votre compartiment S3.
2. Utilisez la politique suivante en remplaçant les valeurs appropriées :

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::XXX-XXXX-eu-north/*"
    },
    {
      "Sid": "AllowCloudFrontServicePrincipalReadOnly",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::XXX-XXXXX-eu-north/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::XXXXXX:distribution/XXXXXXX"
        }
      }
    }
  ]
}

Étape 5 : Utilisation de CloudFront pour le HTTPS

1. Utilisez CloudFront pour activer HTTPS sur votre site wiki.

2. Modifiez les enregistrements DNS chez votre registar en ajoutant le CNAME de CloudFront.

Avec ces étapes, vous avez configuré un wiki statique avec MkDocs sur AWS S3 en utilisant CloudFront pour le HTTPS et une politique IAM pour sécuriser l'accès en lecture.

Étape 6 : Utilisation de Lambda pour les index des sous-dossiers avec CloudFront

Lorsque vous utilisez CloudFront pour distribuer votre site web, il peut afficher automatiquement la page d'accueil (index.html) à la racine du site, comme http://www.example.com. Cependant, cela ne fonctionne pas pour les pages d'accueil de sous-dossiers, comme http://www.example.com/about/. Vous auriez besoin de taper manuellement "index.html" à la fin de chaque URL, ce qui n'est pas convivial pour les utilisateurs.

La bonne nouvelle est que grâce à Lambda@Edge, vous pouvez maintenant simplifier cela. Cette fonction spéciale exécute un petit programme JavaScript sur les serveurs de CloudFront, et il peut détecter automatiquement les URL sans "index.html" et les rediriger correctement vers la page d'accueil appropriée dans votre site. Cela signifie que vos utilisateurs auront une expérience plus fluide sans avoir à taper manuellement les noms de fichiers.

Solution en utilisant Lambda:

• Créez une nouvelle fonction Lambda dans la console AWS.
• Choisir un plan appartenant a cloudfront au hasard
• Nommez votre fonction et spécifiez le nom du rôle. Vous pouvez laisser le code par défaut pour le moment et validé.
• Remplacez le code de la fonction par :

"use strict";
exports.handler = (event, context, callback) => {
  var request = event.Records[0].cf.request;
  request.uri = request.uri.replace(/\/$/, "/index.html");
  return callback(null, request);
};

• Cliquez sur "Déployer" pour confirmer les modifications du code.
• Ajoutez un déclencheur cloudfront et valider.

• Configurez l'origine de votre distribution CloudFront avec les paramètres par défaut.

• Vous avez terminé ! Votre fonction Lambda est maintenant en place et sera déclenchée par CloudFront selon vos besoins.

Article incomplet !