TP Déploiement WEB
====
Le but de ce TP est de travailler à déployer une application Web manuellement puis utiliser docker, docker-compose puis k8s pour effectuer ce déploiement.
Rendez vous sur votre VM (Ubuntu 20.04).
Le but du TP es de déployer une application réelle muni d'un front, d'un back d'une base de données de manière sécurisée.
Pour cela nous pertirons de l'application [Real World App](https://github.com/gothinkster/realworld). Nous prendrons le back en [node/express](https://github.com/gothinkster/node-express-realworld-example-app) et le front en [angular](https://github.com/gothinkster/angular-realworld-example-app).
En s’inspirant du cours n°6, déployez un des TPs sur votre machine virtuelle, configurez nginx, fail2ban, ufw pour obtenir un accès en http à votre application Web. Nous ne pourrons pas utiliser letsencrypt, je vous le fera en démo car vos VMs ne sont pas accessible depuis Internet.
## Etape 1, installation des paquets nécessaires
**Installation git si nécéssaire**
```bash
sudo apt-get install nano git
```
**Installation nodejs**
- Installez nodejs au travers de nvm
```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
```
The script clones the nvm repository to ~/.nvm and adds the source line to your profile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).
- Start a new Terminal
- Installez les paquets nodejs.
```bash
nvm install node
```
**installer nginx, ufw, fail2ban**
```bash
sudo apt-get install nginx fail2ban ufw
```
## Etape 2: déploiement du back
**Cloner le repo**
```bash
cd /opt
sudo chmod a+rwX . #Autorisation de créer des répertoire ici
git clone https://github.com/gothinkster/node-express-realworld-example-app
```
**Installer les dépendances**
```bash
cd node-express-realworld-example-app
npm install # to install all required dependencies
```
**Installer MongoDb**
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/
**Démarrage du backend**
```bash
npm run start
```
Le service écoute sur le port 3000, c'est parfait
Vérifier que le service est up en tapant.
```bash
curl http://localhost:3000
```
**Faire tourner une application node.js en permanence avec Forever**
```bash
npm install forever -g
forever start app.js
forever list
```
Plus d'information: https://blog.bini.io/faire-tourner-une-application-node-js-en-permanence-avec-forever/
### Etape 3: Déploiement du front
**Cloner le repo**
```bash
cd /opt
git clone https://github.com/gothinkster/angular-realworld-example-app
```
**Installer les dépendances**
```bash
cd angular-realworld-example-app
npm install # to install all required dependencies
```
**Installer [Angular CLI](https://cli.angular.io/)**
```bash
# Installer angularcli
npm install -g @angular/cli
```
**Préparer le front pour la mise en production**
Editer le fichier *src/environments/environment.prod.ts*
Remplacer \'https://conduit.productionready.io/api\'
par \'/api\'
Vous pouvez éditer ce fichier à l'aide de nano
```bash
nano -w src/environments/environment.prod.ts
```
L'idée ici c'est que toute reqête du front vers le back ira vers le même serveur qui a délivré le contenu Web.
Si mon serveur est accessible sur http://monservice.fr alors le code javascript ira intéroger le back en allant faire une requête sur http://monservice.fr/api
**Construire l'application angular**
```bash
# Compiler l'application
ng build --prod
```
Le contenu du front est maintenant accessible dans le sous répertoire dist
### Etape 4: Configuration de nginx
**configuration du nom de domaine**
A cette étape là, vous devriez configurer votre nom de domaine, c'est à dire faire pointer un nom de service sur l'adresse IP publique de votre serveur.
Ici comme nous n'avons pas d'adresse publique pour les VMs, nous allons **tricher**
Editer le fichier /etc/hosts **en root** afin que www.monservice.fr pointe sur 127.0.0.1
```txt
127.0.0.1 localhost
127.0.0.1 www.monservice.fr
```
Il est maintenant nécessaire de configurer nginx correctement.
Dans le répertoire */etc/nginx/sites-enabled*, créer un fichier nommé monservice.fr (il pourrait s'appeler comme vous voulez).
```bash
sudo nano -w /etc/nginx/sites-enabled/monservice.fr
```
Ajouter le contenu suivant
```txt
server {
server_name www.monservice.fr;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 1100;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
location /assets/ {
root /opt/angular-realworld-example-app/dist/;
}
location ~* \.(js|map|html|ico|css) {
root /opt/angular-realworld-example-app/dist/;
}
location = / {
root /opt/angular-realworld-example-app/dist/;
}
location /api {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
location / {
root /opt/angular-realworld-example-app/dist/;
try_files $uri $uri/ /index.html =404;
}
listen 80;
}
```
L'idée est de configurer les routes du service Web (en résumé tout ce qui arrive sur / ou une sous roure de / est une ressources statiques sauf une requête sur une une sous route de /api qui est alors transmise au process node)
**Test de configuration**
```bash
nginx -t
```
**Redémarage de votre service**
```bash
sudo service nginx restart
```
### Etape 5: Configuration de ufw
[Mise en place d'un firewall (UFW)](https://drive.google.com/file/d/1-dk0nB3XG2IIa9KtJmAwyl1tRf8VRJFV/preview)
### Etape 6: Configuration de fail2ban
[Mise en place de fail2ban](https://drive.google.com/file/d/1e7yRrD66QVjYMdONAvqvpB9ATdhgTOsN/preview)
### Etape 7: Mise en place des certicats letsencrypt (possible uniquement sur une VM avec accès publique)
[Mise en place des certificats pour la connexion https (letsencrypt)](https://drive.google.com/file/d/1Cn2g7TOinhLSdRY9FcuUiKEehm6F-Q32/preview)
### Etape 8: Automatisation à l'aide de bunkerized nginx (pour ceux qui ont déjà utilisé docker)
[Automatisation à l'aide de bunkerized nginx](https://drive.google.com/file/d/15xZbO07X8cPuvImilXsKcGKkfpzVYmdY/preview)
https://github.com/bunkerity/bunkerized-nginx
### Etape 9: Création d'un manifest k8s pour le déploiement avec K8s
...