Dockeriser votre application frontend avec Nginx pour un déploiement transparent

Introduction

Le plus souvent, le déploiement d'une application frontend nécessite de séparer le service des actifs statiques des API backend. Une bonne approche consiste à coupler Nginx en tant que proxy inverse et serveur Web avec Docker pour la conteneurisation. Ce guide vous explique comment déployer une application frontale à l'aide de Nginx et Docker.

Conditions préalables

Comment déployer une application frontend à l'aide de Nginx et Docker
Présentation
Le déploiement efficace d'une application frontend implique souvent de séparer le service des actifs statiques des API backend. Une approche puissante consiste à combiner Nginx en tant que proxy inverse et serveur Web avec Docker pour la conteneurisation. Ce guide vous guide tout au long du processus de déploiement d'une application frontend à l'aide de Nginx et Docker.

Prérequis
Pour suivre ce guide, vous devez avoir :

• Connaissance de base de React (ou de tout framework frontend).
• Familiarité avec Docker et Nginx.

Configuration de l'application

Une structure de projet claire simplifie le déploiement. Placez tous les fichiers nécessaires dans un dossier pour créer votre image Docker. Ces fichiers doivent inclure :

• build/ dossier (contient les fichiers statiques prêts pour la production).
• Dockerfile (définit comment l'image est construite).
• nginx.conf (configuration Nginx personnalisée).
• sites-enabled/ (configurations Nginx supplémentaires facultatives).

Pour une explication détaillée de la configuration de Nginx, reportez-vous à ceci

Elevating React : libérer la puissance de Nginx pour un déploiement sans effort

Amit Kumar Déroute ・ 9 décembre 23

#javascript #tutoriel #réagir #nginx

Mesures:

1. Construisez la version de production de votre application :

npm run build

Cette commande crée un répertoire build/ contenant des fichiers statiques optimisés.

1. Créez un fichier Docker : Écrivez le Dockerfile suivant pour définir le conteneur :

FROM nginx:latest

# Clean the default HTML directory and remove default nginx.conf
RUN rm -rf /usr/share/nginx/html/*
RUN rm /etc/nginx/nginx.conf

# Copy custom Nginx configuration
COPY nginx.conf /etc/nginx/

# Copy the production build files into Nginx's HTML directory
COPY build/ /usr/share/nginx/html/

# Copy additional Nginx configurations (if any)
COPY ./sites-enabled/* /etc/nginx/sites-enabled/

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

Construire l'image Docker

Une fois vos fichiers prêts, créez l'image Docker :

docker build -t my-app-img:prod .

En cas de déploiement sur une autre VM, vous pouvez empaqueter l'image sous forme de fichier .tar :

docker save my-app-img > my-app-img.tar

Exécuter l'image Docker

Option 1 : exécuter l'image directement

1. Chargez l'image Docker à partir d'un fichier .tar (en cas de transfert entre systèmes) :

cat my-app-img.tar | docker load

1. Exécutez le conteneur :

docker run -itd -p 80:80 --name my-app my-app-img

Cela démarre le conteneur, l'exposant sur le port 80.

Option 2 : exécuter Docker Compose

Création d'un fichier docker-compose.yml :

version: "3"
services:
  web:
    container_name: my_app
    image: my-app-img
    ports:
      - "80:80"
    volumes:
      - ./template:/etc/nginx/templates/
    environment:
      NGINX_ENVSUBST_OUTPUT_DIR: /etc/nginx/sites-enabled

Ensuite, démarrez le conteneur :

docker-compose up -d

Conclusion

L'utilisation de Nginx et Docker pour déployer une application frontend offre une solution solide et évolutive. En effet, il sépare les actifs statiques des API backend, offrant ainsi les meilleures performances. Personnalisez votre configuration Nginx pour répondre à vos besoins, tels que :

• Ajout de SSL/TLS pour la prise en charge HTTPS.
• Activez la mise en cache pour des performances élevées.

Cette configuration permet à votre application frontend d'être fiable dans des environnements prêts pour la production.

Si vous avez des suggestions pour améliorer le processus, veuillez les laisser dans la section commentaires. Si vous avez trouvé cet article utile, aimez-le et partagez-le.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!