Vous avez donc créé votre premier projet React, êtes-vous maintenant prêt à essayer de le déployer ? N'ayez crainte, Google propose Cloud Run, un outil très simple mais puissant qui peut vous aider à faire exactement cela. Je vais vous montrer comment déployer une application React conteneurisée à l'aide de Cloud Run en trois étapes simples.
Ce didacticiel suppose que vous avez déjà configuré votre projet Google Cloud et que votre application React s'exécute localement.
Puis-je simplement télécharger mon code dans le bucket ?
Alors que j'essayais de déployer mon premier projet React, j'avais déjà utilisé Cloud Run dans divers autres projets. Lorsque j'ai voulu déployer mon application sur GCP, ma première pensée a été d'exécuter un simple npm run build...dossier de sortie compilé et de le télécharger dans un bucket Google Cloud Storage (GCS).
Après avoir terminé, j'ai réalisé que cette approche n'allait pas fonctionner. GCS essaie de desservir toutes les routes à partir des chemins du compartiment. Par conséquent, si vous créez une page dans React /login, GCS essaiera de servir les fichiers situés dans un sous-dossier du compartiment GCS. Cela échouera car aucun fichier de ce type n’existe. React devrait gérer le routage côté client. Plus d'informations peuvent être trouvées ici.
Le moyen « le plus simple » d’obtenir un routage efficace consiste à utiliser Google App Engine. Cependant, pour plusieurs raisons, j'ai constaté qu'App Engine n'évoluait pas très bien. Le principal problème auquel j'ai été confronté était que votre emplacement App Engine ne pouvait pas être modifié une fois activé pour le projet (pourquoi ?), il ne pouvait y avoir qu'un seul emplacement App Engine pour l'ensemble du projet.
Nuage en cours d'exécution
Une meilleure solution est Google Cloud Run. Cloud Run est en fait basé sur Knative, une « plate-forme basée sur Kubernetes pour déployer et gérer des charges de travail modernes sans serveur ». Le principal avantage de Knative est qu’il facilite grandement la mise à l’échelle de toute application sans état. Vous fournissez simplement une image Docker et Knative la mettra à l'échelle autant d'instances que nécessaire.
Cloud Run est plus facile à configurer et à maintenir que d'exécuter Knative directement sur votre propre cluster Kubernetes. Il est également très bon marché pour les projets avec de faibles charges de trafic attendues, puisque Cloud Run est facturé par utilisation (par exemple, par requête au service). Un autre avantage de Cloud Run est la possibilité de reprendre votre déploiement en moins de 10 secondes. Cette fonctionnalité m'a évité quelques ennuis dans les startups avec lesquelles je travaille.
1\. Créer une image Docker contenant l'application React compilée
Vous devez créer un fichier dans le répertoire racine de votre projet Dockerfile. Nous utiliserons un fichier docker en plusieurs étapes dans cette étape, alors assurez-vous de copier tout le code ci-dessous dans un seul fichier .
FROM node:lts-alpine en tant que constructeur # en copiant uniquement package.json, avant d'exécuter npm install. Nous pouvons tirer parti de la stratégie de mise en cache des Dockers pour les étapes. Sinon, Docker doit exécuter npm install chaque fois que vous modifiez le code. COPY package.json ./ RUN npm install RUN mkdir /app-ui RUN mv ./node_modules ./app-ui WORKDIR /app-ui COPY . . # dans cette étape, les fichiers React statiques sont créés. Pour plus d'informations, voir package.json RUN npm run build
Passer en mode plein écran Quitter le mode plein écran
Après avoir exécuté le constructeur, tous nos fichiers statiques sont disponibles. Cependant, nous avons encore besoin d’un moyen de les fournir aux clients. Nous utilisons nginx pour cela.
FROM nginx:alpine # copiez le modèle .conf COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf ## Supprimez la page d'index nginx par défaut et remplacez-la par les fichiers statiques que nous avons créés lors de la première étape RUN rm - rf /usr/share/nginx/html/* COPIE --from=builder /app-ui/build /usr/share/nginx/html EXPOSE 80 CMD nginx -g 'daemon off;'