Nginx plus l'application React sur Ubuntu 20.04

Linux NGINX Ubuntu

Introduction

Cet article vous décrira comment préparer le serveur, installer et déployer l'application ReactOS sur Nginx serveur Web.

Dans le Serverspace vous pouvez créer un serveur avec l'application déjà installée "Nginx".

Serveurs Cloud à partir de 4 € / moisIntel Xeon Gold 6254 3.1 GHz CPU, SLA 99,9%, canal 100 Mbps

Préparation du serveur

Pour installer l'application React sur votre propre serveur, vous devez avoir :

Serveur sous Ubuntu système d'exploitation avec accès root ou appartenance sudo
Nom de domaine avec le bon DNS-Les paramètres. Les enregistrements A doivent être "pointés" vers l'adresse IP publique de votre serveur

Processus d'installation

Tout d'abord, vous devez augmenter vos privilèges, puis installer NodeJS

sudo -s

apt install nodejs npm -y

L'étape suivante est l'installation du package npx. Exécutez simplement :

npm i -g npx -y

Pour vérifier si tout est installé, veuillez exécuter :

node -v

npm -v

npx -v

Vous devriez voir quelque chose comme ça :

Pour créer votre application, vous devez utiliser cette commande :

npx create-react-app <YOUR_APP_NAME>

La compilation prend beaucoup de temps, alors soyez patient. Une fois le processus terminé, vous verrez ceci :

Installation du serveur Web

Pour travailler avec votre application, vous avez besoin de n'importe quel serveur Web, par exemple Nginx. Pour l'installer, lancez :

apt installer -y nginx

Créez ensuite le fichier de configuration de base :

cat <<EOF > /etc/nginx/sites-enabled/<DOMAIN_NAME>

server {

listen 80;

root /var/www/<DOMAIN_NAME>;

index index.php index.html;

server_name <DOMAIN_NAME> www.<DOMAIN_NAME>;

location / {

}

}

EOF

Lancement d'application

La prochaine étape est le lancement de l'application :

cd /home/<USERNAME>/<APPNAME>

npm start

Vous devriez voir quelque chose de similaire à l'image ci-dessous :

Ouvrez l'URL http:// :3000 dans le navigateur. Au cas où vous voyez une réponse comme ci-dessous - terminatLancez l'application via CTRL+C et passez à l'étape suivante :

Accédez au répertoire de votre application et compilez-le :

cd /home/<USERNAME>/<MYAPP>

npm run build

Attendre un peu. Le résultat attendu ressemble à :

Enfin, copiez simplement les fichiers d'application compilés dans le répertoire du site Web, activez et redémarrez Nginx:

mkdir /var/www/<DOMAIN_NAME> && cp /home/<USERNAME>/<MYAPP>/build/* /var/www/<DOMAIN_NAME>/

systemctl enable nginx && service nginx restart

Vérification finale

Pour vérifier le résultat, ouvrez simplement votre site Web dans le navigateur :

Conclusion

Dans cet article, nous avons décrit comment installer NodeJS, créer votre première application et la déployer sur votre site Web avec Nginx serveur Web.