- Animate.css – A cross-browser library of CSS animations. As easy to use as an easy thing. Version SASS par Ben Hodgson.
Monthjuillet 2016
Apprendre jQuery, bonnes pratiques
- Official jQuery Learning Center
- jQuery Coding Standards & Best Practices – These are some of the common standards and best practices for writing better code with jQuery.
- JQUERY BEST PRACTICES by Greg Franko
- 10 Ways to Instantly Increase Your jQuery Performance
- jsperf.com – jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
jQuery Performance Rules
- Always Descend From an #id
- Use Tags Before Classes
- Cache jQuery Objects
- Harness the Power of Chaining
- Use Sub-queries
- Limit Direct DOM Manipulation
- Leverage Event Delegation (a.k.a. Bubbling)
- Eliminate Query Waste
- Defer to $(window).load
- Compress Your JS
- Learn the Library
- Avoid use of string concat(), Use join() for the long strings.
- Use Latest jQuery versions with CDN hosted files instead of older version.
- Use of For loop instead of jQuery $.each loop.
- Check if an Element Exists before doing operations on the DOM elements.
- Always use Return False in functions.
- Use of HTML5 Data Attributes.
- Identify weight of the page.
- Keep your code DRY (Don’t Repeat Yourself)
Boilerplates, starter kits
- jQuery Boilerplate – Jump-starting jQuery plugins development. The following guide, adapted from jQuery Plugins/Authoring, will outline the basics, best practices, and common pitfalls to watch out for as you begin writing your plugin. Example sous JSBin pour manipuler en live.
- Handling plugin defaults and predefinitions où comment donner la possibilité à l’utilisateur de son plug-in de modifier des options à la volée.
Autre (n’a peut-être pas sa place dans ce billet…)
- Using jQuery .on() and .off() – Andi Smith
Tutoriels Flexbox
- Tutoriels sur Flexbox par la-cascade.io (en français)
- flexbox sheet – guide illustré des propriétés par le Magazine du Webdesign
- A Visual Guide to CSS3 Flexbox Properties
- Solved by Flexbox – Cleaner, hack-free CSS
- Designing A Product Page Layout with Flexbox
Layout, mise en page
Mélanger largeurs fluides et fixes avec flex-grow
The “Holy Grail” 3 column liquid layout with pixel-widths.
|
1 2 3 4 |
<main> <section>rest</section> <aside>150px</aside> </main> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
section { flex-grow: 1; } aside { flex-basis: 150px; flex-shrink: 0; /* flex-shrink: 0; prevents the aside from shrinking, if the section attempts to grow due to its content. (see third example) */ /* Instead of flex-basis: 150px; and flex-shrink: 0; you can use the shorthand: */ /* flex: 0 0 150px; */ } |
Différentes astuces sur la manière de cibler les sélecteurs
Outils Flexbox
- Flexplorer est un outil en ligne qui permet de jouer en live avec les valeurs du modèle Flexbox
Utiliser Flexbox avec des navIEgateurs de merde
Normalizing Cross-browser Flexbox Bugs
Source: Normalizing Cross-browser Flexbox Bugs.
flex-grow et flex-shrink craquent leurs slips sous IE10+
Il faut donner une largeur fixe (en %, ça ira très bien…) à l’élément sur lequel on a assigné la propriété flex-grow ou flex-shrink.
Ressources en ligne:
- Normalizing Cross-browser Flexbox Bugs by Philip Walton
- Flexbugs – A community-curated list of flexbox issues and cross-browser workarounds for them.
- Almost complete guide to flexbox (without flexbox)
Dans notre exemple, nous allons chercher à ajouter un breakpoint col-xl-… pour des résolutions d’écran plus larges que col-lg.
Pour ce faire, il faudra éditer 4 fichiers :
bootstrap/mixins/grid-framework.scssbootstrap/mixins/grid.scssbootstrap/variables.scssbootstrap/grid.scss
Une fois ces ajouts effectués, vous pourrez utiliser toute la batterie de mixins et de classes offerte par la grille Bootstrap pour les breakpoints XS, SM, MD, LG, mais également votre nouveau point de rupture XL !
mixins/grid-framework.scss
Rajouter en début de fichier la classe .col-xl-… dans le mixin make-grid-columns (arguments + boucle for) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// [converter] This is defined recursively in LESS, but Sass supports real loops @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") { @for $i from (1 + 1) through $grid-columns { $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}"; } #{$list} { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ceil(($grid-gutter-width / 2)); padding-right: floor(($grid-gutter-width / 2)); } } // [converter] This is defined recursively in LESS, but Sass supports real loops @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { @for $i from (1 + 1) through $grid-columns { $list: "#{$list}, .col-#{$class}-#{$i}"; } #{$list} { float: left; } } |
mixins/grid.scss
Rajouter en fin de fichier les mixins make-xl-column, make-xl-column-offset, make-xl-column-push, make-xl-column-pull (vous pouvez vous inspirer de la batterie de mixins déjà présente pour make-lg-…) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Generate the extra large columns @mixin make-xl-column($columns, $gutter: $grid-gutter-width) { position: relative; min-height: 1px; padding-left: ($gutter / 2); padding-right: ($gutter / 2); @media (min-width: $screen-xl-min) { float: left; width: percentage(($columns / $grid-columns)); } } @mixin make-xl-column-offset($columns) { @media (min-width: $screen-xl-min) { margin-left: percentage(($columns / $grid-columns)); } } @mixin make-xl-column-push($columns) { @media (min-width: $screen-xl-min) { left: percentage(($columns / $grid-columns)); } } @mixin make-xl-column-pull($columns) { @media (min-width: $screen-xl-min) { right: percentage(($columns / $grid-columns)); } } |
variables.scss
Rajouter les Media queries breakpoints pour Extra Large screen / wide desktop :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//== Media queries breakpoints // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra Large screen / wide desktop //** Deprecated `$screen-xl` as of v3.0.1 $screen-xl: 1600px !default; $screen-xl-min: $screen-xl !default; //** Deprecated `$screen-xl-desktop` as of v3.0.1 $screen-xl-desktop: $screen-xl-min !default; // So media queries don't overlap when required, provide a maximum $screen-lg-max: ($screen-xl-min - 1) !default; |
Rajouter les Container sizes :
|
1 2 3 4 5 6 7 8 |
//== Container sizes // //## Define the maximum width of `.container` for different screen sizes. // Extra Large screen / wide desktop $container-extralarge-desktop: (1600px) !default; //** For `$screen-lg-min` and up. $container-xl: $container-extralarge-desktop !default; |
grid.scss
Rajouter un Container widths pour le breakpoint xl :
|
1 2 3 4 5 6 7 8 9 |
// Container widths // // Set the container width, and override it for fixed navbars in media queries. .container { @media (min-width: $screen-xl-min) { width: $container-xl; } } |
En toute fin de fichier, rajouter un Extra Large grid :
|
1 2 3 4 5 6 7 |
// Extra Large grid // // Columns, offsets, pushes, and pulls for the large desktop device range. @media (min-width: $screen-xl-min) { @include make-grid(xl); } |
tunneling socket could not be established, cause=getaddrinfo ENOTFOUND address address:8080
$ vim /home/intlangf/.npmrc et commenter la la ligne qui dirige vers le port 8080 :
|
1 2 3 4 |
#proxy=http://address:8080/ registry=http://registry.npmjs.org/ https://registry.npmjs.org/= strict-ssl=false |
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 8.x
Found bindings for the following environments:
– Linux 64-bit with Node.js 11.x
lclain@vm64-lclain:~/drupal/roederer-drupal(develop)$ /usr/bin/node -v
v8.10.0
lclain@vm64-lclain:~/drupal/roederer-drupal(develop)$ /usr/local/bin/node -v
v11.2.0
Lors de npm install ou npm rebuild, c’était « /usr/local/bin/node » qui était utilisé, au lieu de « /usr/bin/node »
Je n’ai pas trouvé où changer ça pour utiliser la bonne commande. j’ai donc renommé « /usr/local/bin/node » vers « /usr/local/bin/node.old » et créer un lien symbolique vers « /usr/bin/node » et là, ça passe.
Installer un package non répertorié par Bower
Important : ne faites pas ça comme des sauvages. Tout se fait en ligne de commande.
- Aller sur la page github du package en question (dans notre exemple, gulp-sass).
- Récupérer l’URL *.git du repository (bouton vert « Clone or download » en haut à droite). Dans notre exemple :
https://github.com/dlmanning/gulp-sass. - En ssh, taper la commande
bower install git://github.com/dlmanning/gulp-sass --save-dev(vous avez remarqué qu’on a changé le préfixe https en git et qu’on a ajouté le paramètre –save-dev afin que les informations sur ce nouveau package soient ajoutées dans le fichierbower.json).
Résolution de problèmes liés à votre mauvaise utilisation de Bower 😛
Error: Cannot find module ‘nom-du-module’
Intervient notamment lorsqu’un package non répertorié par Bower a été installé.
Il faut ré-installer le package avec npm en tapant sudo npm install -g <mon_bô_package>.
Error: EACCES: permission denied, open ‘/home/mco/.config/configstore/bower-github.json’
Quand on tape bower install et qu’on a l’erreur suivante :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/usr/local/lib/node_modules/bower/lib/node_modules/configstore/index.js:54 throw err; ^ Error: EACCES: permission denied, open '/home/mco/.config/configstore/bower-github.json' You don't have access to this file. at Error (native) at Object.fs.openSync (fs.js:634:18) at Object.fs.readFileSync (fs.js:502:33) at Object.create.all.get (/usr/local/lib/node_modules/bower/lib/node_modules/configstore/index.js:35:26) at Object.Configstore (/usr/local/lib/node_modules/bower/lib/node_modules/configstore/index.js:28:44) at readCachedConfig (/usr/local/lib/node_modules/bower/lib/config.js:19:23) at defaultConfig (/usr/local/lib/node_modules/bower/lib/config.js:11:12) at Object.<anonymous> (/usr/local/lib/node_modules/bower/lib/index.js:16:32) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) |
Si bower install --allow-root renvoie aussi une erreur :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/usr/local/lib/node_modules/bower/lib/node_modules/configstore/index.js:54 throw err; ^ Error: EACCES: permission denied, open '/home/mco/.config/configstore/bower-github.json' You don't have access to this file. at Error (native) at Object.fs.openSync (fs.js:634:1 at Object.fs.readFileSync (fs.js:502:33) at Object.create.all.get (/usr/local/lib/node_modules/bower/lib/node_modules/configstore/index.js:35:26) at Object.Configstore (/usr/local/lib/node_modules/bower/lib/node_modules/configstore/index.js:28:44) at readCachedConfig (/usr/local/lib/node_modules/bower/lib/config.js:19:23) at defaultConfig (/usr/local/lib/node_modules/bower/lib/config.js:11:12) at Object.<anonymous> (/usr/local/lib/node_modules/bower/lib/index.js:16:32) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) |
Taper les eux commandes suivantes :
|
1 2 |
sudo chown -R $USER:$GROUP ~/.npm sudo chown -R $USER:$GROUP ~/.config |
…et retenter un bower install.
Documentation non-officielle, exploration des concepts
En français
- SASS guidelines (fr) par Hugo Giraudel la référence française sur SASS : Un guide de style engagé pour du code Sass sain, maintenable et extensible.
En anglais
- http://thesassway.com/
- hugogiraudel.com
- Les tags sass et scss sur clubmate.fi – About frontend web development
The SASS ampersand (&)
- The Sass Ampersand – The & is an extremely useful feature in Sass (and Less). It’s used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a time-waster when you’re struggling and could have written the same code in regular CSS. Let’s see if we can really understand it.
Outils en ligne
- www.sassmeister.com – The sassiest way to play with Sass, Compass, & LibSass
SassMeister is a playground for Sass, Compass, and LibSass. Add some Sass and SassMeister will show you the rendered CSS. SassMeister supports both Sass and SCSS syntaxes, all output styles, and an ever-expanding list of Sass libraries.
Outils hors ligne
Installation, mise à jour, maintenance
Mettre à jour SASS (SCSS)
$ sass -v pour connaître la version installée.
$ sudo gem update sass$ sudo gem update compass pour mettre à jour les packages SASS et compass.
Mettre à jour Ruby vers la version 2.0.0
Sera nécessaire à partir de la version SASS 3.5 qui ne supportera plus Ruby 1.9.x.
Source : How to install Ruby 2.1.4 on Ubuntu 14.04.
Installer les librairies pré-requises :
|
1 2 |
sudo apt-get update sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev |
Installer rbenv qui sert à installer Ruby :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
cd git clone git://github.com/sstephenson/rbenv.git .rbenv echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc echo 'eval "$(rbenv init -)"' >> ~/.bashrc exec $SHELL git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc exec $SHELL rbenv install 2.2.0 rbenv global 2.2.0 ruby -v |
Optionnel : ne pas installer la documentation de Ruby
|
1 |
echo "gem: --no-ri --no-rdoc" > ~/.gemrc |
Voir aussi: Résolution des problèmes et recommandations pour les troubleshooting.
Objectif : faire tourner un projet Change 3.x dans une VM Ubuntu 14.xx qui intègre une version de PHP (5.5.x) trop récente pour la solution. Le projet que nous essayons de faire tourner est alainflou.
Doc interne :
Déployer le projet sur la VM
Ce projet a été déployé sur la VM à l’aide de l’outil RBS cooking vers le chemin /home/<utilisateur_de_la_VM>/change30/alainflou. Les sources du projet sont accessibles depuis le repository git de Netapsys.
Les instructions principales pour la partie : Déployer le projet sur la VM
- Stopper le serveur Apache :
sudo service apache2 stop - Démarrer un conteneur Docker :
docker-compose up -d - Stopper un conteneur Docker :
docker-compose down -v - Visualiser les conteneurs Docker qui tournent :
docker ps - Se logguer dans un conteneur Docker :
docker exec -ti alainflou_change_1 bash(où alainflou_change_1 est le nom du Docker en question; on peut trouver ce nom en tapant la commandedocker ps, sous la colonne NAMES). - Se logguer dans un conteneur Docker pour un projet déployé avec Cook :
cook utf e:local m2.shell(ou utf est le nom du projet).
Utiliser le Docker dcompass
Deux pré-requis:
- Le fichier
config.rbdoit se trouver à la racine du theme (exemple:projet/skin/frontend/package/theme/config.rb) - On exécute la commande depuis
projet/skin/frontend/package/theme/
|
1 |
dcompass -w skin/frontend/package/theme compile |
Liens d’accès rapide pour la partie : Déployer le projet sur la VM
- Installer Docker sur la VM Ubuntu Server
- Lancer le conteneur Docker Change35
- Relier le projet alainflou à l’image dockérisée de Change35
- Accèder au site en local via un navigateur
- Config au niveau de Change
- Résolution des problèmes et recommandations
Installer Docker sur la VM Ubuntu Server
Installer Docker pour Ubuntu à la racine de /home/<utilisateur_de_la_VM>/.
Récupérer les conteneurs Docker pour Change
Dans le dossier /home/intlangf/Docker, récupérer sur le Git Netapsys les images Docker mises à notre disposition. Celle qui nous intéresse plus particulièrement est /docker-images/change/35 mais on va les récupérer toutes.
Lancer le conteneur Docker Change35
Se rendre ensuite dans le dossier /home/intlangf/Docker/docker-images/change/35 et lancer la commande make.
Un message qui doit ressembler à :
|
1 2 |
docker build -t "netapsys/change35:0.1" . Sending build context to Docker daemon 12.35 MB |
…devrait apparaître suivi d’une succession d’étapes (Steps) pour enfin afficher un message qui ressemble à peu près à :
|
1 2 |
Successfully built 0a2bd8f88854 Tag netapsys/change35:0.1 as latest |
On peut ensuite vérifier que l’image Docker de Change35 a bien été lancée en tapant la commande docker ps qui affichera l’ensemble des images qui sont actuellement lancées. Normalement vous devriez avoir au moins celle-ci :
|
1 2 |
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES ad3f8ab33cea netapsys/change35 "/startup.sh" About an hour ago Up About an hour 80/tcp, 443/tcp alainflou_change_1 |
Relier le projet alainflou à l’image dockérisée de Change35
Retour à la racine du dossier Docker pour créer un dossier alainflou et y placer un fichier docker-compose.yml qui contient les informations suivantes (où intlangf est le nom d’utilisateur de la VM) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
change: image: netapsys/change35 environment: - VIRTUAL_HOST=alainflou.vmchange.rbs.fr - SERVER_NAME=alainflou.vmchange.rbs.fr - WEBEDIT_HOME=/home/intlangf/change30/alainflou - DOCUMENT_ROOT=/home/intlangf/change30/alainflou/webapp/www - VOLUME_UID=1000 - VOLUME_GID=1000 - CHANGE35_MEMORY_LIMIT=256M volumes: - /var/run/docker.sock:/var/run/docker.sock:ro - /var/run/mysqld/mysqld.sock:/var/run/mysqld/mysqld.sock - /home/intlangf/change30:/home/intlangf/change30 - /home/intlangf/bin:/home/intlangf/bin # - /home/netapsys/netapsys/gits:/home/netapsys/netapsys/gits # - /data/alainflou/log/apache2:/var/log/apache2 - ./custom-apache:/etc/apache2/conf.d/netapsys - /tmp:/tmp - /home/intlangf/repository:/home/intlangf/repository expose: - "80" # - "10443:443" # external_links: # !! By using fqdn instead of IPs, the service port # of redis instances must be (re-set to 6379 in # project.<profile>.xml config file also !! # - mariadb_mariadb_1:mysql.localhost # - solr_solr_1:solr.localhost # - devtools_mailcatcher_1:mail.localhost working_dir: /home/intlangf/change30/alainflou links: - solr solr: image: docker.netapsys.fr/wfsolr:3.6 environment: - VOLUME_UID=1000 - VOLUME_GID=1000 volumes: - /var/run/docker.sock:/var/run/docker.sock:ro - ./data/solr/cores_data:/home/solr/cores_data - ./data/solr/log:/home/solr/wfsolr/tomcat/logs |
Notez que le paramètre image (ligne 2) correspond au libellé de la colonne IMAGE dans la liste des Dockers actuellement en-train de tourner.
Lancer ensuite le conteneur en tapant la commande : docker-compose up -d. Normalement, un message Creating alainflou_change_1 s’affiche.
Taper dans la foulée la commande docker exec -ti alainflou_change_1 bash et vous voilà connecté sur votre conteneur (normalement et suivant comment votre VM est configurée, l’indicateur de commande de votre terminal doit passer de quelque chose comme intlangf@ubuntu2:~/docker/alainflou$ à quelque chose comme root@ad3f8ab33cea:/home/intlangf/change30/alainflou#).
Il est à noter que les commandes change seront à exécuter depuis le docker et non depuis l’instance Change installée dans la VM précédemment à l’aide de l’outil Cook.
De même, pour stopper une machine docker, lancer la commande docker-compose down -v.
Accèder au site en local via un navigateur
Récupérer les bonnes IPs et écrire les fichiers de configuration
L’URL pour accéder au site depuis un navigateur est (selon les données consignées dans notre fichier de configuration /alainflou/docker-compose.yml) alainflou.vmchange.rbs.fr. On le trouve ligne 5 - SERVER_NAME=alainflou.vmchange.rbs.fr.
Afin d’y accéder, il faut ajouter le site dans les hosts de la VM. Pour ce faire, taper un ifconfig et localiser l’IP de docker0 (la 2ème ligne normalement qui ressemble à :
|
1 2 |
docker0 Link encap:Ethernet HWaddr 02:42:ac:a4:a1:f3 inet adr:172.17.0.1 Bcast:0.0.0.0 Masque:255.255.0.0 |
Taper sudo vim /etc/hosts pour éditer les hosts et ajouter la ligne 172.17.0.1 alainflou.vmchange.rbs.fr.
Sous Windows, modifier les hosts également avec l’ip divulguée sous eth1, à savoir 192.168.56.110 alainflou.vmchange.rbs.fr.
|
1 2 |
eth1 Link encap:Ethernet HWaddr 08:00:27:f1:b9:a2 inet adr:192.168.56.110 Bcast:192.168.56.255 Masque:255.255.255.0 |
Couper le serveur Apache de la VM et passer par un proxy dockerisé
Pour afficher notre projet Change dans un navigateur, il va falloir stopper le serveur Apache de notre VM et passer par un proxy dockerisé.
Sous /home/intlangf/Docker/</p>, créer un dossier <code>proxy et y placer un fichier docker-compose.yml (conf spécifique pour les projets Docker) dans lequel on écrira :
|
1 2 3 4 5 6 7 8 |
proxy: image: jwilder/nginx-proxy ports: - "80:80" - "443:443" volumes: - ./certs:/etc/nginx/certs - /var/run/docker.sock:/tmp/docker.sock:ro |
Il est possible que la création d’un dossier certs laissé vide dans /home/intlangf/Docker/proxy/ soit requise pour assurer le bon fonctionnement de notre proxy.
On peut ensuite vérifier que l’image Docker du proxy a bien été lancée en tapant la commande docker ps qui affichera l’ensemble des images qui sont actuellement lancées. A ce stade du tuto, vous devriez avoir au moins celles-ci :
|
1 2 3 |
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES ad3f8ab33cea netapsys/change35 "/startup.sh" About an hour ago Up About an hour 80/tcp, 443/tcp alainflou_change_1 30859a7db66f jwilder/nginx-proxy "/app/docker-entrypoi" About an hour ago Up About an hour 0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp proxy_proxy_1 |
A noter que l’image jwilder/nginx-proxy est téléchargée depuis le repo distant : https://hub.docker.com/explore/. Ce n’est pas nous qui nous occupons de la récupérer et de la stocker sur la VM comme celle de Change (vu tout en haut).
Couper Apache avec la commande sudo service apache2 stop. On y est presque… Encore un peu de config au niveau de Change et on pourra accéder à notre site en local depuis un navigateur.
Config au niveau de Change
Editer le fichier alainflou/config/project.intlangf.xml (où intlangf est votre propre user : ne modifiez pas le vrai fichier intlangf !!! – Pour connaître votre user, regardez dans le fichier profile présent à la racine de votre projet Change) et changer toutes les IPs en fonction de celle donnée pour docker0 lorsqu’on tape un ifconfig dans la VM (voir plus haut). Dans notre cas :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="utf-8"?> <project> <defines> <define name="MOD_NOTIFICATION_SENDER_HOST">alainflou.vmchange.rbs.fr</define> <define name="SOLR_INDEXER_URL">http://solr:8080/solr/fo</define> <define name="SOLR_BO_INDEXER_URL">http://solr:8080/solr/bo</define> </defines> <config> <general> <entry name="server-fqdn">alainflou.vmchange.rbs.fr</entry> </general> <databases> <webapp> <entry name="host">172.17.0.1</entry> <entry name="port">3306</entry> </webapp> </databases> <mail> <entry name="host">172.17.0.1</entry> </mail> </config> </project> |
Dans notre conteneur dockerisé (accessible, pour rappel, en tapant la commande docker exec -ti alainflou_change_1 bash) taper les commandes :
|
1 2 |
php framework/bin/change.php cconf; php framework/bin/change.php ssu; |
Le site est désormais accessible en local dans un navigateur avec l’URL alainflou.vmchange.rbs.fr.
Résolution des problèmes et recommandations
disque plus visible dans l’explorateur, problèmes de droits d’écriture sur les fichiers du projet stockés sur la VM
Au cours du déploiement du projet, j’ai eu plusieurs fois des problèmes d’accès à ma VM sous Windows via Samba (disque plus visible dans l’explorateur, problèmes de droits d’écriture sur les fichiers du projet stockés sur la VM). Ne pas hésiter à redémarrer la VM dans ces cas là.
Le conteneur Change n’accède pas à la base de données stockée sur la VM
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
[intlangf@localhost:22] Checking database Fatal error: run() received nonzero return code 1 while executing! Requested: docker exec -i -u www-data aacall_change_1 /tmp/cook-cd /home/intlangf/change30/aacall/./. mysql -A -hdb -P3306 --batch -r -uadmin-webedit -padmin-webedit C4_aacall -e 'show databases' Executed: /bin/bash -l -c "cd /home/intlangf/change30/aacall/./. >/dev/null && docker exec -i -u www-data aacall_change_1 /tmp/cook-cd /home/intlangf/change30/aacall/./. mysql -A -hdb -P3306 --batch -r -uadmin-webedit -padmin-webedit C4_aacall -e 'show databases'" ============================================================================================================== Standard output ============================================================================================================== ERROR 1044 (42000): Access denied for user 'admin-webedit'@'%' to database 'C4_aacall' ============================================================================================================================================================================================================================================= Aborting. Fatal error: One or more hosts failed while executing task 'c.deploy.update' Aborting. |
Il faut modifier les droits d’accès aux bases de données pour l’utilisateur admin-webedit.
Via la VM (et pas le conteneur), se connecter à mysql en root en tapant mysql -u root -p<mot_de_passe_de_votre_VM>.
Vérifier les droits : show grants for 'admin-webedit'@'%';
Taper à la suite les instructions :
GRANT USAGE ON *.* TO 'admin-webedit'@'%' IDENTIFIED BY 'admin-webedit';FLUSH PRIVILEGES;GRANT ALL ON *.* TO 'admin-webedit'@'%';
Le conteneur Change n’accède pas à la base de données stockée sur la VM (autre cas)
|
1 2 3 4 5 6 |
====================================================================================== Standard output ====================================================================================== ERROR 1227 (42000) at line 22: Access denied; you need (at least one of) the SUPER privilege(s) for this operation read unix @->/var/run/docker.sock: read: connection reset by peer ============================================================================================================================================================================================= |
Se connecter au containter DB puis à mysql à l’intérieur de ce container:
|
1 |
mysql -u root -p<votre_mot_de_passe_root> |
Vous trouverez votre mot de passe root dans le fichier docker-compose.yml, sous:
|
1 2 3 4 |
services: db: environment: MYSQL_ROOT_PASSWORD: <ici> |
Puis taper à la suite les instructions:
GRANT SUPER ON *.* TO 'admin-webedit'@'%' IDENTIFIED BY 'admin-webedit';FLUSH PRIVILEGES;
Le conteneur Change n’accède pas à la base de données stockée sur la VM (autre cas)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
[intlangf@localhost:22] Checking database Fatal error: run() received nonzero return code 1 while executing! Requested: docker exec -i -u www-data aacall_change_1 /tmp/cook-cd /home/intlangf/change30/aacall/./. mysql -A -hlocalhost -P3306 --batch -r -uis-user -pis-password C4_aacall -e 'show databases' Executed: /bin/bash -l -c "cd /home/intlangf/change30/aacall/./. >/dev/null && docker exec -i -u www-data aacall_change_1 /tmp/cook-cd /home/intlangf/change30/aacall/./. mysql -A -hlocalhost -P3306 --batch -r -uis-user -pis-password C4_aacall -e 'show databases'" ============================================================================================================== Standard output ============================================================================================================== ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) ============================================================================================================================================================================================================================================= Aborting. Fatal error: One or more hosts failed while executing task 'c.deploy.update' Aborting. |
- Vérifier la présence d’un fichier
config/project.<user_profile_name>.xmlà votre nom (intlangf pour moi, doncconfig/project.intlangf.xml) dans le repo git du projet. - Checker la cohérence des hostnames et ports ouverts ci-dessous avec ce qui est déclaré dans le fichier docker-compose.yml du projet:
123456789101112131415161718192021<?xml version="1.0" encoding="utf-8"?><project><defines><define name="SOLR_INDEXER_URL">http://solr:8983/solr</define></defines><config><databases><webapp><entry name="database">aacall</entry><entry name="host">db</entry></webapp></databases><mail><entry name="type">Smtp</entry><entry name="host">mail</entry><entry name="port">1025</entry><!--entry name="sendmail_path">/usr/sbin/sendmail</entry><entry name="sendmail_args">-t -i</entry--></mail></config></project>
12345678910111213141516171819services:db:hostname: dbexpose:- "3306"environment:MYSQL_DATABASE: aacallsolr:hostname: solrexpose:- "8080"mail:hostname: mailimage: mailhog/mailhog:latest# mailhog, donc "smtp"!expose:- "1025" - Pusher le fichier
config/project.intlangf.xmlmodifié dans la branche Git dont vous allez vous servir pour faire votre deploy avec cook. - Lancez votre deploy en suivant les instructions du wiki.
Facultatif (parce que c’est probablement pas ça qui va résoudre le problème)
Faire $ docker ps pour obtenir la liste des containers.
Entrer dans le container qui concerne la base de données: $ docker exec -it <nom_du_container> bash.
Se logguer à mysql avec les infos retournées dans le message d’erreur obtenu, ici: $ mysql -u is-user -pis-password.
Faire un show databases; et vérifier la présence de la base de données retournée dans le message d’erreur (dans notre cas C4_aacall) et que son nom soit orthographié comme dans le fichier docker-compose.yml du projet. Sous:
|
1 2 3 4 |
services: db: environment: MYSQL_DATABASE: C4_aacall |
ERROR 1049 (42000): Unknown database ‘C4_aacall’
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
[intlangf@localhost:22] Checking database Fatal error: run() received nonzero return code 1 while executing! Requested: docker exec -i -u www-data aacall_change_1 /tmp/cook-cd /home/intlangf/change30/aacall/./. mysql -A -hdb -P3306 --batch -r -uadmin-webedit -padmin-webedit C4_aacall -e 'show databases' Executed: /bin/bash -l -c "cd /home/intlangf/change30/aacall/./. >/dev/null && docker exec -i -u www-data aacall_change_1 /tmp/cook-cd /home/intlangf/change30/aacall/./. mysql -A -hdb -P3306 --batch -r -uadmin-webedit -padmin-webedit C4_aacall -e 'show databases'" ============================================================================================================== Standard output ============================================================================================================== ERROR 1049 (42000): Unknown database 'C4_aacall' ============================================================================================================================================================================================================================================= Aborting. Fatal error: One or more hosts failed while executing task 'c.deploy.update' Aborting. |
Voir un point plus haut pour comparer le nom de la base de donnée dans le docker-compose.yml et dans le profile.intlangf.xml de Change (racine > dossier config).
ERROR: Get https://docker.netapsys.fr/v2/wfsolr/manifests/3.6: unknown: Authentication is required
Taper docker login docker.netapsys.fr puis renseigner username et password heldapp.
cat ~/.dockercfg
aufs au_opts_parse:1155:docker[ç_-]: unknow option dirperm1
|
1 |
$ docker-compose pull |
Installer des extensions PHP supplémentaires dans un conteneur
J’ai une erreur de ce type en front : Fatal error: Class 'NumberFormatter' not found in /home/intlangf/change30/afflelou/modules/project/lib/services/PhysicalpropertytypeService.class.php on line 102. Comme expliqué ici, il faut installer une extension PHP intl.
|
1 2 3 4 |
$ docker exec -ti afflelou_change_1 bash $ apt-get update $ apt-get install php5-intl $ service apache2 restart |
Puis redémarer la VM et relancer le conteneur Docker.
En front: 503 Service Temporarily Unavailable nginx
Attention à ce qui est déclaré dans le fichier hosts de Windows. Le problème venait du fait que l’URL d’accès était déclaré&e à plusieurs reprises, mais avec une IP différente.
Error starting userland proxy: listen tcp 0.0.0.0:3306: bind: address already in use
|
1 2 3 4 5 6 7 8 9 10 11 12 |
intlangf@ubuntu2-frank:~/docker/docker-lesechos$ ./start Creating dockerlesechos_mailcatcher_1 Creating dockerlesechos_session_1 Creating dockerlesechos_db_1 Creating dockerlesechos_cache_1 Creating dockerlesechos_nginx-proxy_1 ERROR: for db driver failed programming external connectivity on endpoint dockerlesechos_db_1 (28879168c7985dfc839519644039eb151e7c1cd992f7ba16a74d40bf84a5f2f1): Error starting userland proxy: listen tcp 0.0.0.0:3306: bind: address already in use Traceback (most recent call last): File "<string>", line 3, in <module> File "compose/cli/main.py", line 63, in main AttributeError: 'ProjectError' object has no attribute 'msg' docker-compose returned -1 |
Une instance de mysql tourne sur la VM. Pour la stopper, taper la commande :
|
1 |
$ sudo service mysql stop |
ERROR: for nginx-proxy Cannot start service nginx-proxy
Erreur complète :
|
1 |
ERROR: for nginx-proxy Cannot start service nginx-proxy: driver failed programming external connectivity on endpoint dockersupreme_nginx-proxy_1 (21e9e8d4a58f792dfd8a21cbe21db8366e8c66b4fed800df8de8f8292d7b29bb): Error starting userland proxy: listen tcp 0.0.0.0:80: bind: address already in use |
Une instance d’Apache2 tourne sur la VM. Pour la stopper, taper la commande :
|
1 |
$ sudo service apache2 stop |
Site inaccessible (ERR_CONNECTION_REFUSED)
Vérifier que le conteneur proxy est lancé et qu’il tourne normalement.
Disparition de la base de données
Dans le dossier du projet (à la racine), pour vérifier la présence d’une base de données:
sudo ls -alh /var/lib/docker/volumes/euroairport_mysql-data/_data/euroairport
ERROR: {« message »: »Get https://docker.netapsys.fr/v2/wfsolr/manifests/3.6: unauthorized: BAD_CREDENTIAL »}
Lorsque je lance un docker-compose up -d et que j’ai ce type de message d’erreur:
intlangf@ubuntu:~/docker/euroairport$ docker-compose up -d
Pulling solr (docker.netapsys.fr/wfsolr:3.6)...
ERROR: {"message":"Get https://docker.netapsys.fr/v2/wfsolr/manifests/3.6: unauthorized: BAD_CREDENTIAL"}
Taper :
docker login docker.netapsys.fr
Et renseigner ses login/mdp.
© 2021 devfrontend.info
Theme by Anders Norén — Up ↑