Déploiement d'une Application React avec Tests sur Docker
L'objectif de cette application est de permettre aux utilisateurs de rapidement enregistrer leur humeur du jour à travers une interface web simple et intuitive.
DailyMoodTracker sera une application widget pouvant être intégrée à n'importe quelle page web, offrant aux utilisateurs un moyen rapide et facile de suivre leur état émotionnel sur une base quotidienne. Utilisant React pour le développement frontend, Docker pour la conteneurisation, et Jest pour les tests unitaires, vous développerez une application centrée sur la facilité d'utilisation, l'accessibilité, et la simplicité de déploiement.
Ce dont vous avez besoin pour installer le logiciel et comment les installer.
npm install
Une série d’exemples étape par étape qui vous expliquent comment faire fonctionner un environnement de développement.
Dites quelle sera l’étape
npm i dependencies
Pour démarer l'application :
npm run dev
Ce guide vous explique les étapes à suivre pour mettre en conteneur une application React à l’aide de Docker.
Docker installé sur votre système. Vous pouvez télécharger et installer Docker depuis https://www.docker.com/products/docker-desktop.
Créez votre application React pour la production : Avant de conteneuriser votre application React, assurez-vous qu’elle est conçue pour la production. Vous pouvez le faire en exécutant :
npm run build
Écrivez un Dockerfile : Créez un fichier nommé Dockerfile dans le répertoire racine de votre projet et ajoutez le contenu suivant :
# Use Node.js v14 as base image
FROM node:14 as build
# Set working directory
WORKDIR /app
# Copy package.json and package-lock.json to the container
COPY package.json package-lock.json ./
# Install dependencies
RUN npm install --production
# Copy all files from current directory to the container
COPY . .
# Build the React app
RUN npm run build
# Use Nginx as base image for serving the static files
FROM nginx:alpine
# Copy built files from the build stage to nginx web server
COPY --from=build /app/build /usr/share/nginx/html
# Expose port 80
EXPOSE 80
# Start Nginx when the container starts
CMD ["nginx", "-g", "daemon off;"]
Créer l’image Docker : Exécutez la commande suivante pour créer votre image Docker :
docker build -t my-react-app .
Exécuter un conteneur Docker à partir de l’image : Enfin, vous pouvez exécuter un conteneur Docker à partir de l’image que vous venez de créer :
docker run -d -p 8080:80 my-react-app
- @theziko1 - Idea & Initial work
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent