Shiny sur AWS - Créer un nom de domaine cool

Cet article fait partie de la série Comment déployer une application Shiny sur AWS, divisée en 7 parties. Pour accéder aux autres parties, utilisez le sommaire ci-dessous:


Dans la partie 4 de cette série d’articles, nous avons déployé l’appli Shiny sur le serveur AWS.

Rappelez-vous, à la fin de l’article, on pouvait taper 3.121.42.9:3838 dans le navigateur et boum notre appli apparaissait !

Shiny AWS Movie Explorer Final

Plutôt cool !

Je vous mets un petit rappel des choses importantes qu’on a vues jusqu’ici pour manipuler le serveur :

  • On déploie l’appli dans le dossier /srv/shiny-server.
  • On peut lire les logs de Shiny dans /var/log/shiny-server.
  • On peut changer la config de Shiny dans /etc/shiny-server/shiny-server.conf.

Ce sont les trois importants dossier à se rappeler.

Au bout d’un moment ça rentre, mais d’ici là, n’hésitez pas à repasser ici quand vous en avez besoin.

Alors..

Comme je disais juste au-dessus, on peut maintenant visiter notre appli juste en tapant 3.121.42.9:3838.

Oui alors ok, sauf que qui va s’amuser à se rappeler tous ces numéros ?

Votre client ?

Sans doute pas.

Non en fait, dans le monde réel, personne ne visite jamais un site web en tapant l’adresse IP.

Par exemple, moi je mets toutes mes applis Shiny sur shiny.charlesbordet.com.

C’est facile à se rappeler et ça fait du sens.

D’ailleurs j’ai hébergé notre appli à l’adresse suivante : https://shiny.charlesbordet.com/movie-explorer/

Alors comment on fait ?

Trois étapes :

  1. Trouver un nom de domaine
  2. Paramétrer les DNS
  3. Mettre en place un reverse proxy

Si le vocabulaire utilisé vous fait un peu peur.. pas d’inquiétude !

Comme d’habitude, je vais vous guider étape par étape, avec des screenshots et tout et tout!

1. Trouver un nom de domaine

La toute première étape, pour utiliser un nom de domaine, c’est.. d’en avoir un !

Ça veut aussi dire en acheter un.

Alors oui.

Ça coûte des sous en général.

Par exemple, le mien (charlesbordet.com) me coûte $14.99 par an.

Les .fr coûtent moins chers que les .com en général. J’en ai un qui me coûte 6.99€ par an par exemple.

Vous pouvez aussi trouver des noms de domaine un peu exotiques vraiment pas chers à moins de 2€ par an.

J’achète les miens sur Hover.com. Ils sont spécialisés exclusivement sur les noms de domaine.

Ça fait des années que j’en ai chez eux et ça marche toujours bien.

Vous pouvez aussi utiliser OVH qui vend les .fr.

Du coup au niveau des screenshots je vais utiliser Hover, mais que ce soit OVH ou les autres, vous aurez à peu près la même interface.

Bon.

Alors supposons que vous soyez allé acheter votre nom de domaine.

Maintenant il faut faire le lien entre:

  1. Votre nouveau nom de domaine
  2. L’adresse IP de votre serveur

Comment on fait ça ?

Avec les DNS !

2. Paramétrer les DNS

DNS, ça veut dire Domain Name System.

C’est un des services fondamentaux des internets.

Et probablement aussi un des plus ignorés.

C’est ce qui vous permet de taper https://duckduckgo.com dans votre navigateur au lieu de l’adresse IP 23.21.193.169.

En gros, c’est ce qui rend l’internet un peu plus humain.

Et c’est exactement ce qu’on veut faire avec notre appli !

On veut que les gens tapent http://monapplishinysupercool.fr plutôt que 3.121.42.9:3838.

Votre vendeur de nom de domaine va vous donner accès à une interface où vous pouvez justement paramétrer ces DNS.

Sur Hover, il suffit de cliquer sur DNS :

DNS sur Hover

Il y a déjà des valeurs par défaut qui sont entrées (peut-être différentes des vôtres, peu importe).

Si vous voulez comprendre comment ça marche, je vous invite à lire la boîte bleue ci-dessous. Sinon, passez directement à la suite.

Boîte bleue : Comprendre vite fait les DNS


Chaque entrée DNS indique comment rediriger les utilisateurs quand ils tapent votre nom de domaine.

Alors pourquoi avoir plusieurs entrées ?

Parce que vous pourriez avoir charlesbordet.com sur un premier serveur, puis shiny.charlesbordet.com sur un autre serveur, et ainsi de suite. Pour chaque cas d'usage, il faut ajouter une nouvelle ligne.

La colonne TYPE peut prendre les valeurs suivantes : A pour rediriger le nom de domaine vers une adresse IP. Ou CNAME pour rediriger le nom de domaine vers un autre nom de domaine. Ou MX pour gérer les emails.

La colonne HOST correspond au sous-domaine. Un sous-domaine, c'est la partie avant le domaine. Par exemple, quand j'écris shiny.charlesbordet.com, c'est un sous-domaine de charlesbordet.com. On peut mettre une étoile * pour représenter tous les sous-domaines. Et on peut mettre un @ pour le domaine principal (donc charlesbordet.com dans mon cas).

La colonne VALUE dépend du TYPE qu'on a choisit. Si on a choisit le TYPE A, alors il faut entrer une adresse IP.

Le reste n'a pas vraiment d'importance pour nous aujourd'hui.

Les valeurs par défaut de Hover indiquent ici que le domaine principal charlesbordet.com et tous les sous-domaines *.charlesbordet.com vont être redirigés vers l’adresse IP 64.98.145.30.

C’est pas tout à fait ce qu’on veut.

Moi j’aimerais avoir seulement le sous-domaine shiny.charlesbordet.com redirigé vers l’adresse IP de mon serveur AWS.

Pour faire ça je retire les deux lignes de TYPE A, et j’en ajoute une nouvelle :

Créer une entrée DNS sur Hover

Si vous ne voulez pas utiliser un sous-domaine mais directement votre domaine principal, alors écrivez @ au lieu de shiny dans la case hostname.

Du coup à la fin j’ai un tableau qui ressemble à ça :

Mes nouveaux DNS sur Hover

À présent, à chaque fois que quelqu’un tape shiny.charlesbordet.com dans son navigateur, il sera redirigé automatiquement vers mon serveur AWS !

Top !

Mais c’est pas fini.

Si vous avez essayé, vous vous êtes aperçu que ça ne marchait pas.

Pourquoi ?

Parce qu’on n’a pas spécifié le port 3838 !

En fait, on a toujours besoin d’écrire shiny.charlesbordet.com:3838 pour accéder à l’appli.

Uh…

C’est pas terrible ça.

On n’a jamais vu une URL avec des chiffres au bout comme ça. Ça fait pas sérieux.

Bon.

On s’approche quand même.

Il y a deux méthodes pour résoudre ce problème :

  1. La méthode rapide et sale.
  2. La méthode que c’est la bonne sur le long terme.

La méthode rapide et sale

Si vous voulez juste expérimenter et vous avez besoin d’une solution rapide, c’est facile :

  1. Connectez-vous en SSH sur votre serveur AWS (voir partie 3 si vous avez déjà oublié comment faire)
  2. Ouvrez votre fichier de config : sudo nano /etc/shiny-server/shiny-server.conf.
  3. Changez la ligne listen 3838 en listen 80.
  4. Redémarrez le serveur Shiny pour prendre en compte les changements : sudo systemctl restart shiny-server.

Et voilà !

Le changement, c’est que le serveur Shiny écoute sur le port 80 au lieu de 3838.

Pourquoi 80 ?

80 c’est le port par défaut pour le protocole HTTP (celui que tous les sites web utilisent).

En fait, quand on tape shiny.charlesbordet.com dans le navigateur, on utilise implicitement le port 80 sans avoir besoin de le spécifier.

Et si on veut spécifier un autre port, comme 3838, il faut l’écrire explicitement.

Du coup, ça marche bien..

Alors pourquoi “rapide et sale” ?

En fait, si demain vous avez besoin d’installer un autre service sur votre serveur, comme un serveur RStudio, un Jupyter notebook, ou même un site web, vous aurez le même problème.

Et le problème, c’est que seulement un seul service à la fois peut utiliser le port 80.

Du coup, si vous avez à la fois un Shiny Server et un RStudio Server, ils doivent forcément utiliser deux ports différents.

On ne peut pas tous les deux les mettre sur le port 80.

Alors que vous aimeriez bien avoir deux URL bien clean : shiny.charlesbordet.com et rstudio.charlesbordet.com.

La solution, c’est d’utiliser un reverse proxy qui s’appelle Nginx.

3. Mettre en place un reverse proxy

Bon.

On entre dans des considérations un peu plus compliquées.

Je pourrais juste vous donner les commandes à écrire, et puis youplaboum article terminé.

Sauf que c’est pas tout à fait ma méthode d’enseignement.

Donc je vais tout vous expliquer.

En plus comme ça si demain vous avez besoin de changer quelque chose, vous comprendrez ce que vous faites.

Commençons par..

C’est quoi le rivet sporxi ?

Reverse proxy.

Voyez votre serveur comme une grande maison qui a plein de portes.

65535 portes exactement.

Et au lieu de dire portes, on va dire ports, ok ?

Si vous voulez parler à quelqu’un dans cette maison, il faut passer par la bonne porte.

Par exemple, M. Shiny Server est dans la maison, et il habite à la porte 3838.

Et puis M. RStudio Server est à la porte 8080.

Mais si vous allez à la porte 3322, vous ne trouverez personne, parce que personne n’y habite.

Sans le Reverse Proxy

Ça ça marche.

Mais c’est pas pratique parce qu’il faut à chaque fois indiquer la bonne porte.

Comme on disait avant, il faut spécifier le numéro du port dans l’URL, comme dans shiny.charlesbordet.com:3838.

Ce qui serait pratique, c’est si on avait Nestor à l’entrée principale qui pourrait nous guider directement à la bonne personne.

Du coup, pas besoin de spécifier une porte particulière, on va juste à l’entrée principale, on demande M. Shiny Server, et il vient à nous !

Nestor

Bien mieux.

Et ce Nestor, en fait il s’appelle Nginx, et c’est ce qu’on appelle un reverse proxy.

Avec le Reverse Proxy

Au lieu de taper le numéro de port, on tape seulement shiny.charlesbordet.com, et le premier interlocuteur au niveau du serveur sera Nginx.

Nginx va comprendre qu’on veut accéder au Shiny Server, et il va nous guider au bon endroit.

Techniquement, il nous reste donc seulement à :

  • Installer Nginx.
  • Configurer Nginx.

Installer Nginx

Ça c’est l’étape facile.

Connectez-vous en SSH sur votre instance AWS (de nouveau, voyez la partie 3 si vous avez oublié), puis tapez :

$ sudo apt install nginx

Et Nginx est installé.

Facile !

Configurer Nginx

Pour la partie un peu plus délicate..

D’abord, changez de répertoire pour aller dans les dossiers de Nginx :

$ cd /etc/nginx
$ ls
auth          fastcgi_params  mime.types         proxy_params     snippets
conf.d        includes        modules-available  scgi_params      uwsgi_params
dhparam.pem   koi-utf         modules-enabled    sites-available  win-utf
fastcgi.conf  koi-win         nginx.conf         sites-enabled

La commande ls permet de faire la liste de tous les fichiers et dossiers dans ce répertoire.

Ce qui nous intéresse, c’est le fichier nginx.conf, mais on ne va pas y toucher.

À la place, on va rajouter un nouveau fichier séparé dans sites-available :

$ cd sites-available
$ sudo nano shiny.conf

Et c’est là qu’on va écrire la configuration :

server {
    # listen 80 signifie que le serveur Nginx écoute sur le port 80.
    listen 80;
    listen [::]:80;
    # À remplacer avec votre nom de domaine.
    server_name shiny.charlesbordet.com;
    # La partie reverse proxy :
    location / {
        proxy_pass http://localhost:3838;
        proxy_redirect http://localhost:3838/ $scheme://$host/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_read_timeout 20d;
        proxy_buffering off;
    }
}

C’est pas très long, mais ça peut faire un peu peur.

listen

Au début, on dit que le serveur Nginx écoute sur le port 80.

Comme il n’y a qu’un seul service qui peut être sur ce port, on va mettre Nginx, et c’est lui qui va nous rediriger vers tous les autres services.

En gros, c’est notre Nestor à l’entrée principale de la maison.

server_name

La partie server_name indique ce que l’utilisateur tape dans son navigateur.

Ici je veux que l’utilisateur accède à l’appli Shiny sur le sous-domaine shiny.charlesbordet.com.

Évidemment, remplacez la valeur avec votre nom de domaine.

location

Et enfin, tout ce qui est dans location correspond au reverse proxy.

On donne les instructions à Nestor :

Si l’utilisateur arrive et demande shiny.charlesbordet.com, alors guide-le dans la maison à la porte 3838.

Et c’est tout !

Vous pouvez même réutiliser ce fichier de config pour un RStudio Server.

Ajoutez un deuxième fichier nommé rstudio.conf et copiez/collez tout. Il faut remplacer deux choses :

  1. Le server_name
  2. Le numéro de port

..

C’est presque fini mais il reste un petit détail.

Enregistrez le fichier et retournez dans le terminal.

Il faut qu’on crée un raccourci dans le dossier sites-enabled :

$ cd ../sites-enabled
$ sudo ln -s ../sites-available/shiny.conf .

Pourquoi on fait ça ?

En fait, Nginx ne regarde pas dans le dossier sites-available.

Il regarde seulement le dossier sites-enabled.

Donc on crée le fichier de config dans sites-available, et ensuite on active la config en créant un raccourci dans sites-enabled.

L’idée c’est que si demain vous souhaitez temporairement désactiver l’accès à Shiny, il suffit seulement de supprimer le raccourci.

Alors que sinon, il faudrait supprimer tout le fichier de config, et après c’est pas vraiment pratique pour le remettre.

Ok.

Il ne reste plus qu’à redémarrer Nginx pour que les changements soient pris en compte.

D’abord :

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Ça permet de vérifier si la syntaxe du fichier de config est correcte.

Si jamais vous avez une erreur du type nginx: [emerg] unknown "connection_upgrade" variable, c’est que les variables $http_upgrade et $connection_upgrade n’ont pas été déclarées.

Dans ce cas, ouvrez le fichier /etc/nginx/nginx.conf puis ajoutez les lignes suivantes à l’intérieur du bloc http :

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
} 

Ensuite réessayez de valider la syntaxe avec sudo nginx -t.

Puis :

$ sudo systemctl restart nginx

Bravo !

Votre appli Shiny est à présent accessible à un vrai nom de domaine du type https://shiny.charlesbordet.com/movie-explorer/ !

C’était pas très facile à la fin, mais c’est vraiment la meilleure manière de procéder.

En plus, il y a d’autres avantages..

Comme par exemple la possibilité de sécuriser l’appli en HTTPS !

C’est ce qu’on verra dans le prochain article :)

Mis à jour :

Commentaires

Ewen

Merci encore pour ce tuto, il a été parfait pour le déploiement d’une première app ! Bonne continuation :-)

Laisser un commentaire

Les champs obligatoires sont marqués *

Chargement...

Les commentaires sont validés manuellement. La page va se rafraîchir après envoi.