Diferència entre revisions de la pàgina «Snap! a un servidor intermediari invers emprant Dockers»
(Es crea la pàgina amb « Es baixa el codi font del [https://github.com/jmoenig/Snap Snap! a GitHub]: jordi@vps:~/bin/html$ wget https://github.com/jmoenig/Snap/archive/refs/heads/master.zip...».) |
m (→Construcció del docker) |
||
(Hi ha 22 revisions intermèdies del mateix usuari que no es mostren) | |||
Línia 1: | Línia 1: | ||
+ | = Previ = | ||
+ | Cal tenir una [[Servidor intermediari invers]]. Farem servir la mateixa xarxa interna de ''dockers'' al Node-RED i al servidor intermediari invers. | ||
− | + | Podeu veure quins ''dockers'' són connectats a la xarxa interna: | |
+ | docker network inspect net | ||
+ | = Baixada del codi font = | ||
+ | Baixeu el codi font del [https://github.com/jmoenig/Snap Snap! a GitHub]: | ||
jordi@vps:~/bin/html$ wget https://github.com/jmoenig/Snap/archive/refs/heads/master.zip | jordi@vps:~/bin/html$ wget https://github.com/jmoenig/Snap/archive/refs/heads/master.zip | ||
− | + | Descomprimiu (en cas de no tenir l'eina ''unzip'' feu ''sudo apt install unzip'' per a tenir-la): | |
− | unzip master.zip | + | jordi@vps:~/bin/html$ '''unzip master.zip''' |
+ | jordi@vps:~/bin/html$ cd master | ||
+ | jordi@vps:~/bin/html/master$ | ||
+ | |||
+ | = Personalització del Snap! = | ||
+ | == Opció de JavaScript activada per defecte == | ||
+ | Per raons de seguretat, s'ha desactivat el JavaScript per defecte. Si us munteu el vostre propi servei al núvol, per a poder cridar programes vostres amb funcions amb JavaScript, heu d'afegir aquesta línia, en negreta, a l'arxiu ''[https://github.com/jmoenig/Snap/blob/master/snap.html snap.html]'': | ||
+ | <script> | ||
+ | '''Process.prototype.enableJS = true;''' // <-- Per a tenir seleccionat el JS per defecte | ||
+ | var world; | ||
+ | window.onload = function () { | ||
+ | if ('serviceWorker' in navigator) { | ||
+ | navigator.serviceWorker.register('sw.js'); | ||
+ | } | ||
+ | world = new WorldMorph(document.getElementById('world')); | ||
+ | new IDE_Morph().openIn(world); | ||
+ | loop(); | ||
+ | }; | ||
+ | function loop() { | ||
+ | requestAnimationFrame(loop); | ||
+ | world.doOneCycle(); | ||
+ | } | ||
+ | </script> | ||
+ | == Inclusió de nous exemples == | ||
+ | A la carpeta '''Examples''' hi afegiu el nou exemple amb extensió ''.xml'' i editeu l'arxiu '''EXAMPLES'''. En aquest exemple d'edició de l'arxiu ''EXAMPLES'' s'ha afegit el nom de l'arxiu ''.xml'' (''IoT-Vertebrae.xml'') afegit a la carpeta ''Examples'' i '''separat per un tabulador''' una descripció mínima de l'exemple: | ||
+ | animal-game.xml Animal Game | ||
+ | Codification.xml Codification | ||
+ | copter.xml Copter | ||
+ | count-change.xml Count Change | ||
+ | icecream-visual.xml Icecream Visual | ||
+ | '''IoT-Vertebrae.xml Interaction with IoT-Vertebrae''' | ||
+ | JSfunctions.xml JSfunctions | ||
+ | live-tree.xml Live Tree | ||
+ | swimmer.xml Swimmer | ||
+ | tree.xml Tree | ||
+ | vee.xml Vee | ||
+ | |||
+ | = Construcció del ''docker'' = | ||
+ | == Creació de ''Dockerfile'' i ''default'' == | ||
+ | Dins de la carpeta a on hi l'arxiu ''index.html'' feu un nou arxiu anomenat ''default'': | ||
+ | jordi@vps:~/bin/html/master$ '''nano default''' | ||
+ | I hi afegiu aquest contingut: | ||
+ | server { | ||
+ | listen 80 default_server; | ||
+ | listen [::]:80 default_server; | ||
+ | |||
+ | root /usr/share/nginx/html; | ||
+ | index index.html index.htm; | ||
+ | |||
+ | server_name _; | ||
+ | location / { | ||
+ | try_files $uri $uri/ =404; | ||
+ | } | ||
+ | } | ||
+ | Dins de la carpeta a on hi l'arxiu ''index.html'' feu un nou arxiu anomenat ''Dockerfile'': | ||
+ | jordi@vps:~/bin/html/master$ '''nano Dockerfile''' | ||
+ | I hi afegiu aquest contingut: | ||
+ | FROM nginx:alpine | ||
+ | |||
+ | COPY . /usr/share/nginx/html | ||
+ | |||
+ | EXPOSE 80 | ||
+ | == Volum de dades == | ||
+ | Per a poder fer modificacions persistents al ''docker'' caldrà crear un volum. A aquest exemple, el nom del volum és ''snap_data_vol'': | ||
+ | jordi@vps:~$ '''docker volume create --name snap_data_vol''' | ||
+ | node_red_data_vol | ||
+ | jordi@vps:~$ '''docker volume ls''' | ||
+ | DRIVER VOLUME NAME | ||
+ | local 4c6fef4d8230506f389bfb915256365bac80be875d55077ec4eff4c6672d89 | ||
+ | local 316f02665e61720a8165c30d9cec6de5a8b3c6ecc4175c3faecc00dafe548d | ||
+ | local c278d7565bba5de8fb48f98951c293d27818604683012c4bac202281db07ca | ||
+ | local e9e43b1bb654f05dedf8352c6f4074a3089e5b1c3cf8e7efddb6400a753893 | ||
+ | local node_red_data_vol | ||
+ | local reverse-proxy_certs | ||
+ | local reverse-proxy_dhparam | ||
+ | local reverse-proxy_html | ||
+ | local reverse-proxy_vhost | ||
+ | local '''snap_data_vol''' | ||
+ | Accés al volum de dades: | ||
+ | jordi@vps:~$ sudo bash | ||
+ | root@vps:~# cd '''/var/lib/docker/volumes/snap_data_vol/_data/''' | ||
+ | root@vps:/var/lib/docker/volumes/snap_data_vol/_data# cd Examples/ | ||
+ | root@vps:/var/lib/docker/volumes/snap_data_vol/_data/Examples# '''cat EXAMPLES''' | ||
+ | animal-game.xml Animal Game | ||
+ | Codification.xml Codification | ||
+ | copter.xml Copter | ||
+ | count-change.xml Count Change | ||
+ | icecream-visual.xml Icecream Visual | ||
+ | '''IoT-Vertebrae.xml IoT-Vertebrae''' | ||
+ | JSfunctions.xml JSfunctions | ||
+ | live-tree.xml Live Tree | ||
+ | swimmer.xml Swimmer | ||
+ | tree.xml Tree | ||
+ | vee.xml Vee | ||
+ | root@vps:/var/lib/docker/volumes/snap_data_vol/_data/Examples# ls | ||
+ | Codification.xml '''IoT-Vertebrae.xml''' animal-game.xml count-change.xml live-tree.xml tree.xml | ||
+ | EXAMPLES JSfunctions.xml copter.xml icecream-visual.xml swimmer.xml vee.xml | ||
+ | |||
+ | == Construcció del ''docker'' == | ||
+ | Construïu el ''docker'' (ha d'haver l'arxiu '''Dockerfile''', creat a un pas previ, al mateix directori): | ||
+ | jordi@vps:~/bin/html/master$ '''docker build -t snap9:v2.13 .''' | ||
+ | |||
+ | == Posada en marxa del ''docker'' == | ||
+ | Al vostre proveïdor de dominis apunteu el nou subdomini (a l'exemple és ''snap.binefa.cat'') al vostre VPS al núvol. A la llista de DNS feu servir el tipus '''A''' si apunteu a una IP o el tipus '''CNAME''' si apunteu a un altre nom de domini. | ||
+ | |||
+ | Poseu el ''docker'' en marxa '''sense persistència''': | ||
+ | jordi@vps:~/bin/html/master$ '''docker run --rm --name snap9 -e VIRTUAL_HOST=snap.binefa.cat -e LETSENCRYPT_HOST=snap.binefa.cat -e VIRTUAL_PORT=80 --network net -d snap9:v2.13''' | ||
+ | Poseu el ''docker'' en marxa '''amb persistència''' de les personalitzacions: | ||
+ | jordi@vps:~/bin/html/master$ '''docker run --rm --name snap9 -e VIRTUAL_HOST=snap.binefa.cat -e LETSENCRYPT_HOST=snap.binefa.cat -e VIRTUAL_PORT=80 --network net -v snap_data_vol:/usr/share/nginx/html -d snap9:v2.13''' | ||
= Documentació = | = Documentació = | ||
− | [https://devopscube.com/build-docker-image/ How to Build Docker Image : Comprehensive Beginners Guide] (Fa servir com a Linux base un Ubuntu 18.04) | + | [https://devopscube.com/build-docker-image/ How to Build Docker Image : Comprehensive Beginners Guide] (Fa servir com a Linux base un ''Ubuntu 18.04'') |
[https://dev.to/paschalogu/how-i-deployed-my-website-as-a-container-3fje How I Deployed my Website as a Docker Container] (Fa servir com a base un ''docker'' que és un servidor ''nginx'' instal·lat dins d'un Linux ''Alpine''. [https://hub.docker.com/_/alpine Alpine] és un Linux minimalista) | [https://dev.to/paschalogu/how-i-deployed-my-website-as-a-container-3fje How I Deployed my Website as a Docker Container] (Fa servir com a base un ''docker'' que és un servidor ''nginx'' instal·lat dins d'un Linux ''Alpine''. [https://hub.docker.com/_/alpine Alpine] és un Linux minimalista) |
Revisió de 16:21, 27 març 2024
Contingut
Previ
Cal tenir una Servidor intermediari invers. Farem servir la mateixa xarxa interna de dockers al Node-RED i al servidor intermediari invers.
Podeu veure quins dockers són connectats a la xarxa interna:
docker network inspect net
Baixada del codi font
Baixeu el codi font del Snap! a GitHub:
jordi@vps:~/bin/html$ wget https://github.com/jmoenig/Snap/archive/refs/heads/master.zip
Descomprimiu (en cas de no tenir l'eina unzip feu sudo apt install unzip per a tenir-la):
jordi@vps:~/bin/html$ unzip master.zip jordi@vps:~/bin/html$ cd master jordi@vps:~/bin/html/master$
Personalització del Snap!
Opció de JavaScript activada per defecte
Per raons de seguretat, s'ha desactivat el JavaScript per defecte. Si us munteu el vostre propi servei al núvol, per a poder cridar programes vostres amb funcions amb JavaScript, heu d'afegir aquesta línia, en negreta, a l'arxiu snap.html:
<script> Process.prototype.enableJS = true; // <-- Per a tenir seleccionat el JS per defecte var world; window.onload = function () { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js'); } world = new WorldMorph(document.getElementById('world')); new IDE_Morph().openIn(world); loop(); }; function loop() { requestAnimationFrame(loop); world.doOneCycle(); } </script>
Inclusió de nous exemples
A la carpeta Examples hi afegiu el nou exemple amb extensió .xml i editeu l'arxiu EXAMPLES. En aquest exemple d'edició de l'arxiu EXAMPLES s'ha afegit el nom de l'arxiu .xml (IoT-Vertebrae.xml) afegit a la carpeta Examples i separat per un tabulador una descripció mínima de l'exemple:
animal-game.xml Animal Game Codification.xml Codification copter.xml Copter count-change.xml Count Change icecream-visual.xml Icecream Visual IoT-Vertebrae.xml Interaction with IoT-Vertebrae JSfunctions.xml JSfunctions live-tree.xml Live Tree swimmer.xml Swimmer tree.xml Tree vee.xml Vee
Construcció del docker
Creació de Dockerfile i default
Dins de la carpeta a on hi l'arxiu index.html feu un nou arxiu anomenat default:
jordi@vps:~/bin/html/master$ nano default
I hi afegiu aquest contingut:
server { listen 80 default_server; listen [::]:80 default_server; root /usr/share/nginx/html; index index.html index.htm; server_name _; location / { try_files $uri $uri/ =404; } }
Dins de la carpeta a on hi l'arxiu index.html feu un nou arxiu anomenat Dockerfile:
jordi@vps:~/bin/html/master$ nano Dockerfile
I hi afegiu aquest contingut:
FROM nginx:alpine COPY . /usr/share/nginx/html EXPOSE 80
Volum de dades
Per a poder fer modificacions persistents al docker caldrà crear un volum. A aquest exemple, el nom del volum és snap_data_vol:
jordi@vps:~$ docker volume create --name snap_data_vol node_red_data_vol jordi@vps:~$ docker volume ls DRIVER VOLUME NAME local 4c6fef4d8230506f389bfb915256365bac80be875d55077ec4eff4c6672d89 local 316f02665e61720a8165c30d9cec6de5a8b3c6ecc4175c3faecc00dafe548d local c278d7565bba5de8fb48f98951c293d27818604683012c4bac202281db07ca local e9e43b1bb654f05dedf8352c6f4074a3089e5b1c3cf8e7efddb6400a753893 local node_red_data_vol local reverse-proxy_certs local reverse-proxy_dhparam local reverse-proxy_html local reverse-proxy_vhost local snap_data_vol
Accés al volum de dades:
jordi@vps:~$ sudo bash root@vps:~# cd /var/lib/docker/volumes/snap_data_vol/_data/ root@vps:/var/lib/docker/volumes/snap_data_vol/_data# cd Examples/ root@vps:/var/lib/docker/volumes/snap_data_vol/_data/Examples# cat EXAMPLES animal-game.xml Animal Game Codification.xml Codification copter.xml Copter count-change.xml Count Change icecream-visual.xml Icecream Visual IoT-Vertebrae.xml IoT-Vertebrae JSfunctions.xml JSfunctions live-tree.xml Live Tree swimmer.xml Swimmer tree.xml Tree vee.xml Vee root@vps:/var/lib/docker/volumes/snap_data_vol/_data/Examples# ls Codification.xml IoT-Vertebrae.xml animal-game.xml count-change.xml live-tree.xml tree.xml EXAMPLES JSfunctions.xml copter.xml icecream-visual.xml swimmer.xml vee.xml
Construcció del docker
Construïu el docker (ha d'haver l'arxiu Dockerfile, creat a un pas previ, al mateix directori):
jordi@vps:~/bin/html/master$ docker build -t snap9:v2.13 .
Posada en marxa del docker
Al vostre proveïdor de dominis apunteu el nou subdomini (a l'exemple és snap.binefa.cat) al vostre VPS al núvol. A la llista de DNS feu servir el tipus A si apunteu a una IP o el tipus CNAME si apunteu a un altre nom de domini.
Poseu el docker en marxa sense persistència:
jordi@vps:~/bin/html/master$ docker run --rm --name snap9 -e VIRTUAL_HOST=snap.binefa.cat -e LETSENCRYPT_HOST=snap.binefa.cat -e VIRTUAL_PORT=80 --network net -d snap9:v2.13
Poseu el docker en marxa amb persistència de les personalitzacions:
jordi@vps:~/bin/html/master$ docker run --rm --name snap9 -e VIRTUAL_HOST=snap.binefa.cat -e LETSENCRYPT_HOST=snap.binefa.cat -e VIRTUAL_PORT=80 --network net -v snap_data_vol:/usr/share/nginx/html -d snap9:v2.13
Documentació
How to Build Docker Image : Comprehensive Beginners Guide (Fa servir com a Linux base un Ubuntu 18.04)
How I Deployed my Website as a Docker Container (Fa servir com a base un docker que és un servidor nginx instal·lat dins d'un Linux Alpine. Alpine és un Linux minimalista)