Tutoriel installation serveur Web et VS Code sur machine Linux

BTS
CIEL

Web : Tutoriel d’installation
d’un serveur Web et de Visual Studio Code
sur une machine Linux Kubuntu 24.04

Sommaire :
1

Installer Nginx, MariaDB et PHP................................................................................................................ 2
1.1

Disposer d’une machine Linux............................................................................................................................2

1.2

Installer nginx...................................................................................................................................................... 2

1.3

Installer MariaDB................................................................................................................................................ 2

1.4

Installer PHP........................................................................................................................................................3

2

Tester le serveur Web...................................................................................................................................4

3

Installer Visual Studio Code........................................................................................................................ 5

4

Utilisation de php dans Visual Studio Code.................................................................................................6
4.1

Installer les extensions PHP................................................................................................................................ 6

4.2

Installer et configurer « xdebug »........................................................................................................................7

4.3

Déboguer.............................................................................................................................................................8

Page 1 / 9

Tutoriel installation d’un serveur Web et de VS Code sur une machine Linux Kubuntu24.04

1
1.1

Installer Nginx, MariaDB et PHP
Disposer d’une machine Linux

Je suppose que vous disposer d’une machine Linux.
Ici le tutoriel est fait sur une machine virtuelle VMware Linux Kubuntu 24.04 avec les caractéristiques suivantes :
• 1 processeur et 2 cœurs par processeur
• 4 Go de RAM
• 50 Go pour le disque dur
Vérifier si le système est à jour : sudo apt update
Si le système n’est pas à jour, faire : sudo apt upgrade
Les outils VMware ont été installés : sudo apt install open-vm-tools-desktop
Les outils de développement ont également été installés : sudo apt install build-essential
Sites ressources pour l'installation de Nginx, Mariadb, PHP sur une machine Ubuntu 22.04 LTS (mais qui reste valable
pour la version 24.04) :
- https://linuxiac.com/how-to-install-nginx-mariadb-php-on-ubuntu-22-04-lts/

1.2

Installer nginx

Installation :
$ sudo apt install nginx
Vérification :
$ systemctl status nginx

1.3

Installer MariaDB

Installation :
$ sudo apt install mariadb-server mariadb-client
Vérification :
$ systemctl status mariadb
Script de sécurité (rentrer ciel1 pour le mot de passe root) :
$ sudo mysql_secure_installation
A faire avec attention ! Répondre aux questions afin d’obtenir la plus grande sécurité possible. Consigner une
copie d’écran pour chaque question avec votre réponse et une explication.
Connectez-vous à Mariadb :
$ sudo mysql -u root -p
Afficher les bases de données :
MariaDB [(none)]> show databases ;
Pour quitter MariaDB :
MariaDB [(none)]> quit

Page 2 / 9

Tutoriel installation d’un serveur Web et de VS Code sur une machine Linux Kubuntu24.04

1.4

Installer PHP

Installation :
$ sudo apt install php-fpm php-mysql
Vérification (attention à la version de php sur votre machine !) :
$ systemctl status php8.3-fpm
Modifier le fichier /etc/nginx/sites-available/default comme ci-dessous (parties en rouge gras) :
# Default server configuration
#
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.php index.html index.htm index.nginx-debian.html;
server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}

}

# pass PHP scripts to FastCGI server
#
location ~ \.php$ {
include snippets/fastcgi-php.conf;
#
#
# With php-fpm (or other unix sockets):
fastcgi_pass unix:/run/php/php8.3-fpm.sock;
#
# With php-cgi (or other tcp sockets):
#
fastcgi_pass 127.0.0.1:9000;
}

Vérifier la configuration (si pas d’erreur) :
sudo nginx -t
Relancer le serveur nginx :
sudo systemctl restart nginx
Tester comme indiqué sur le site linuxiac.com :
echo "<?php phpinfo(); ?>" | sudo tee /var/www/html/test.php
Que fait cette commande ?
Vous pouvez maintenant accéder au fichier test.php depuis une fenêtre d’un navigateur.

Page 3 / 9

Tutoriel installation d’un serveur Web et de VS Code sur une machine Linux Kubuntu24.04

2

Tester le serveur Web

On testera le serveur Web avec le fichier script1.php suivant :
<?php
echo 'Bonjour le monde !<br>';
$somme = 0;
for($i=0 ; $i<5 ; $i=$i+1)
{
$somme = $somme + $i;
}
echo 'somme='.$somme.'<br>';
echo '<img src="images/globe.gif" alt="Le globe">';
?>

Le serveur Web que l’on vient d’installer et de configurer est notre serveur de test.
Pour faciliter l’écriture et le test des scripts php il est conseillé :
1. de créer un répertoire « php » dans le répertoire racine du serveur Web (c'est à dire dans /var/www/html/) ;
2. de vous configurer comme propriétaire de ce répertoire « php » :
◦ rappel de la syntaxe de la commande chown :
chown -R UTILISATEUR:GROUPE Répertoire
◦ montrer, en ligne de commande, que vous êtes bien le nouveau propriétaire du répertoire « php ».
Pour la série de TP Initiation au langage PHP, il est demandé de créer des sous-dossiers « partie1 », « partie2 » et
« partie3 » dans le dossier « php ».
Copier le fichier script1.php dans le répertoire « partie1 ».
Dans la fenêtre de votre navigateur, saisir « localhost/php/partie1/script1.php », vous devriez obtenir l’affichage
suivant montrant que votre serveur Web est fonctionnel.

Page 4 / 9

Tutoriel installation d’un serveur Web et de VS Code sur une machine Linux Kubuntu24.04

3

Installer Visual Studio Code

Il existe de nombreux éditeurs pour travailler en PHP. Cependant un éditeur de code est aujourd’hui très utilisé dans le
monde des développeurs, il s’agit de Visual Studio Code.
A ne pas confondre avec Visual Studio qui est l’environnement de développement de Microsoft et qui nécessite 2
heures d’installation.
Visual Studio Code est un éditeur très léger qui se rapproche de Notepad++ en beaucoup plus puissant. Il est sorti en
2015 et possède une importante bibliothèque d’extensions pour travailler dans différents langages. De base il supporte
JavaScript, CSS et HTML. Pour travailler en PHP il sera nécessaire de télécharger des extensions.
Installation de VS Code :
• télécharger le fichier d’installation .deb depuis le site https://code.visualstudio.com/ ;
• le fichier code_x.xx.x-xxxxxxxxx_amd64.deb doit se trouver dans le dossier Téléchargement (ou Download) ;
• lancer l’installation avec la commande : sudo apt install ./code_x.xx.x-xxxxxxxxx_amd64.deb
Le logiciel Visual Studio Code est accessible depuis le menu Développement :

Sous VS Code un projet correspond à un dossier.
Par conséquent, sous VS Code, ouvrir le dossier /var/www/html/php (menu « File/Open Folder… » ou icône
haut à gauche). Ensuite il est facile d’ouvrir le fichier script1.php :

Page 5 / 9

en

Tutoriel installation d’un serveur Web et de VS Code sur une machine Linux Kubuntu24.04

Personnellement je préfère avoir un fond clair (mais vous avez le droit de préférer le fond noir !). Pour changer cette
configuration, il suffit d’aller dans « File/Preferences/Color Theme » ou de cliquer sur l’icône
de choisir « Color Theme ». Puis en choisissant « Light (Visual Studio) », on obtient :

4
4.1

en bas à gauche et

Utilisation de php dans Visual Studio Code
Installer les extensions PHP

Rechercher les extensions php disponibles :
- dans la colonne de gauche cliquez sur l’icône
ou par le menu File/Preferences/Extensions ;
- pour rechercher les extensions concernant php taper « php » dans la zone de recherche ;
- dans la copie d’écran ci-dessous nous avons installé « PHP Debug » et « PHP Intelephense » ;
- attention ! Ne pas installer « PHP Extension pack » ou « PHP IntelliSense » !

Page 6 / 9

Tutoriel installation d’un serveur Web et de VS Code sur une machine Linux Kubuntu24.04

Dans la copie d’écran ci-dessus, vous constatez que deux autres extensions ont été installées :
- ESLint : très utile pour écrire du code propre
- JavaScript (ES6) code snippets : pour le langage javascript

4.2

Installer et configurer « xdebug »

Installer xdebug avec la commande : sudo apt install php-xdebug
Redémarrer le service php-fpm :
$ sudo systemctl restart php8.3-fpm
Redémarrer le serveur nginx :
sudo systemctl restart nginx

Page 7 / 9

Tutoriel installation d’un serveur Web et de VS Code sur une machine Linux Kubuntu24.04

4.3

Déboguer

Tout d’abord, aller dans la fenêtre d’exécution : menu « View/Run » ou cliquer sur l’icône
Le volet d’exécution s’affiche alors :

dans la barre à gauche.

Cliquer sur « create a launch.json file ». Le fichier launch.json s’affiche (ne pas le modifier) :

Remarquer, en haut à gauche les icônes suivant : .

Choisir le mode "Launch currently open script".
Penser à mettre un point d’arrêt dans le code php (c'est un point rouge comme à la ligne 3 dans la copie d'écran cidessus).
Cliquer sur le petit triangle vert à côté de RUN pour lancer le débogueur.
Page 8 / 9

Tutoriel installation d’un serveur Web et de VS Code sur une machine Linux Kubuntu24.04

Le débogueur se matérialise par les icônes classique d’un débogueur permettant d’exécuter le code pas-à-pas :

Il ne reste plus qu’à exécuter le code php en pas-à-pas :

Page 9 / 9