Tagdocker

[Docker] Stopper et supprimer tous les containers et images Docker

Source: Stop and remove all docker containers and images.

List all containers (only IDs)

Stop all running containers

Remove all containers

Remove all images

[Docker][NodeJS] Utiliser Docker pour créer un environnement de développement NodeJS

Source: Use Docker to Create a Node Development Environment et version PDF pour la postérité. Tutoriel (en anglais) extrêmement détaillé et très bien expliqué.

Repo Git: Use Docker to Create a Front-End Node JS Development Environment.

Ce tutoriel m’a permis:

  • d’exécuter NPM depuis un container Docker sans avoir à procéder à une installation locale de NodeJS (écarte les problèmes liés à l’obligation de jongler avec différentes version de Node/NPM en fonction de l’âge du projet).
  • de lancer un serveur Node JS via Express.
  • d’accéder à localhost dans un navigateur.

Pour aller encore plus loin (pas lu l’article en entier, mais il est ressorti dans mes résultats de recherche lorsque j’ai trouvé le tuto dont je parle juste au-dessus et me paraît intéressant à conserver pour améliorer ma pratique de Docker): A Better Way to Develop Node.js with Docker (I’ve seen a lot of articles lately suggesting how to use Docker for development. I haven’t seen one yet that does it correctly). Version PDF pour la postérité.

[Docker] Importer une base de données en copiant le fichier SQL dans le container DB avec docker cp

Nous allons utiliser la commande docker cp pour copier un fichier disponible sur notre host dans un dossier tmp du container guest:

Puis se connecter au container db et taper la commande:

ATTENTION: vous allez probablement obtenir un message mysql: [Warning] Using a password on the command line can be insecure.. Votre dump sera tout-de-même importé.

pour la petite histoire, les volumes ça s’exprime sous la forme host:guest. guest est toujours un chemin absolu. host peut être :

  • un path absolu (/bidule/…) ou relatif (./bidule, ../bidule) => un dossier ou un fichier du host est monté sur le path du guest
  • un nom (mysql-data, pas de référence absolue ou relative) => il s’agit d’un volume nommé, on n’interagit pas avec, c’est géré de manière transparente pour toi par docker. Tu peux le voir via docker volumes ls, c’est stocké normalement dans /var/lib/docker/filesystems/… ou un truc du genre

[Docker] Faire un dump d’une table spécifique dans une base de données et récupérer le contenu dans un fichier txt hors container

Note: pour faire la même chose, mais via mysql: Dump a specific table or few rows (MySQL). $ mysqldump -u username -ppassword database_name table_name > single_table_dump.sql

Faire un dump d’une table spécifique via un container db Docker:

Log toi dans le container db

après : $ mysqldump  -uroot -proot magento core_config_data --tab="/tmp" --fields-enclosed-by='"' --fields-terminated-by=,

ce qui nous intéresse, c’est le fichier /tmp/core_config_data.txt qui sera généré. tu le copie via docker cp.

ça doit te donner un rendu qui ressemble à ça (sample):

Récupérer le contenu du dump dans un fichier TXT avec la commande docker cp:

Sortir du container db. On se retrouve à la racine de notre projet.

en décomposant : $ docker cp nom_du_container:path_dans_le_container path_local (. == l'endroit où tu es)

Le fichier core_config_data.txt devrait être disponible à la racine de notre projet (où à l’endroit depuis lequel la commande ci-dessus a été exécutée).

[Magento 2] Configurer l’envoi de mail par SMTP lorsque vous travaillez avec Docker

Doc officielle: Configuring Email Communications

Fichiers à modifier ou à vérifier:

docker-compose.yml

.env

app/etc/env.php

app/etc/config.php

Hosts (VM Ubuntu server tournant sous Windows pour ma part) C:\Windows\System32\drivers\etc\hosts

Commandes à exécuter:

  • Arrêter/Relancer le conteneur Docker mail
  • Puis, $ n98-magerun2 setup:upgrade

En backoffice, sous Boutiques > Configuration [Paramètres] > menu colonne de gauche Avancé > Système > volet Paramètres d’envoi des emails, vous devriez avoir ceci:

  • Serveur: mail.projet.local
  • Port (25): 8025

[Magento 2] Des Websites ou des Stores multiples avec Docker et nginx

Source: Magento 2 dev docs (official) – Multiple websites or stores.

Consider the following terms:

  • Website—is the top-level container for sites, shipping methods, payment methods, and more. To create completely separate sites that do not share cart, shipping methods, or other you must create separate websites.

    Website customer accounts can be shared between multiple websites within a single Magento instance. A website contains at least one store. Catalog prices should be managed at the website level.

  • Store—is contained by a website. In turn, a store contains at least one store view.

    Multiple stores can share cart, user sessions, payment gateways, and more, but they have separate catalog structures and Catalog price.

    Catalog Qty (inventory) can not be managed at the store level. Inventory is managed at Website or Global level only.

    Store views change the way pages are presented, and are typically used to display a store with different layouts or languages. You can manage different currencies per store view.

Cas pratique

Ressources officielles utilisées:

Structure du projet en Websites > Store (group) > Store view:

Structure du projet vu de l’admin (Stores > All stores [Settings]):

N’hésitez pas à agrandir l’image.

Attention: voir la documentation officielle pour savoir comment affecter les différentes URLs à chaque store view.

Fichier <racine_projet>/docker/.env en fonction de cette structure de sites:

ATTENTION: votre fichier .env ne se trouvera pas nécessairement dans un dossier docker/. Il se trouve au même niveau que le fichier docker-compose.yml.

Notes:

  • Pour l’ensemble des variables d’environnement MAGENTO_RUN_FR1_*, FR1 est un libellé libre qui vous permettra d’identifier votre website ou votre store view (j’y viens…).
  • Pour la variable d’environnement MAGENTO_RUN_*_TYPE, vous avez le choix entre website et store (cf. colonne 1 (website) et 3 (store view) dans l’admin: Stores > All stores [Settings]).
  • Pour la variable d’environnement MAGENTO_RUN_*_CODE, renseignez le code de votre website ou de votre store view (en fonction du choix fait précedemment).
  • Pour la variable d’environnement MAGENTO_RUN_*_URL, renseignez l’URL précisée dans les champs Base URL, Base Link URL, Secure Base URL, Secure Base Link URL, accessibles dans l’admin depuis Stores > Configuration [Settings] > Web [General] > puis sous « Store View » (juste sous le titre « Configuration », en haut à gauche) choisissez un scope.

Fichier <racine_projet>/app/etc/env.php en fonction de cette structure de sites:

Attention: les fichiers de configuration type config.php et env.php ne seront pris en compte qu’après avoir exécuté la commande bash $ magento app:config:import.

Fichier hosts (de Windows pour ma part)

Extrait fichier docker-compose.yml (image « web » uniquement):

Les lignes env_file: .env et VIRTUAL_HOST: "vitalconcept.${EXT:-local},vital-agriculture.${EXT:-local},vital-equideos.${EXT:-local},vital-paysage.${EXT:-local},vital-agriculture-be.${EXT:-local},test.vitalconcept.local" ont été ajoutées/modifiées par rapport à notre configuration originale.

Attention: il faut re-up le container Docker après chaque ajout de site/nouvelle URL:

magento.conf de nginx:

Se connecter en bash au docker « web » et vérifier que les URLs ont bien été écrites dans la configuration nginx en tapant la commande suivante:
$ cat /etc/nginx/sites-enabled/magento.conf

Assigner une root catégorie du catalogue à un store (à un sous-domaine/une URL)

Magento 2 User Guide: Root Categories > Step 3: Assign the Root Category to the Store.

[Magento 2] Bonnes pratiques et astuces de développement front-end

Les commandes Magento 2 du développeur Front-End

Disponibles ici: Commandes Magento 2 Magerun développeur front-end.

Installation des sample datas: comment se logger sur repo.magento.com pour Composer ?

Problème: j’essaye d’installer les sample datas de Magento 2 via Composer, mais lorsque je tape la commande $ bin/magento sampledata:deploy, j’obtiens un message Authentication required (repo.magento.com): Username Password.

Solution: Il faudra créer un compte sur marketplace.magento.com et récupérer le login (clé publique) et le mot de passe (clé privée) sous My Profile > My Products > Access Keys. Il sera peut-être nécessaire de générer une paire de clé.

Le Username demandé correspond à la clé publique. Le Password demandé correspond à la clé privée. Et PAS aux username et password de votre compte marketplace.magento.com!

Ajouter un nouveau module à votre projet Magento 2

En ligne de commande: $ n98-magerun2 dev:module:create

Ajouter un nouveau thème à votre projet Magento 2

Fichiers à préparer

Partir d’un thème Luma Child

Tips: les sources d’un starter-theme Luma Child sont disponibles en suivant ce lien.

Partie conf à ajouter dans <project_root>\dev\tools\grunt\configs\local-themes.js:

Partir from-scratch

Sinon, si vous souhaitez débuter +/- from-scratch, vous pouvez suivre la documentation officielle de Magento 2 pour créer un nouveau thème.

Différentes manipulations à effectuer et commandes à exécuter

Dans cet ordre (et PAS dans un autre ordre, sinon ça ne fonctionne pas) :

  1. Ajouter le dossier du nouveau thème dans: app/design/frontend/<Vendor_name>/<theme_name>
  2. Mettre à jour le nouveau thème dans l’interface admin: Content > Design > Configuration > (Select Edit on your Store View) > Default Theme > Applied Theme > "<your_new_theme_name>"
  3. Flusher les caches avec la commande: $ n98-magerun2 cache:flush
  4. Lancer les commandes Grunt: $ grunt clean && grunt exec && grunt less && grunt watch
  5. Vider les caches statiques des thèmes: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/
  6. Vous pouvez rafraîchir votre navigateur: ctrl + F5

Styles et héritage

Deux notions bien distinctes à intégrer: l’extension et la surcharge de styles.

Extension (extend) des styles

L’extension permet de conserver, pour le fichier qui est étendu, les styles déclarés dans le(s) thème(s) parent(s) et d’en écrire des supplémentaires. Cette méthode est pratique lorsque votre thème hérite d’un thème parent dont les styles vous conviennent déjà. Elle s’utilise pour apporter des modifications mineures à l’existant.

Surcharge (override) des styles

La surcharge écrase, pour le fichier qui est surchargé, l’intégralité des styles déclarés dans le(s) thème(s) parent(s) pour repartir d’une base neutre. Cette dernière demande beaucoup plus de travail côté front-end.

Override et déclaration de nouvelles variables less

Tips: Magento naming convention for the Less variables et Modifier les valeurs des variables par défaut d’un thème parent (blank/luma).

Ce qu’il faut retenir:

  • Pour surcharger les valeurs de variables existantes et déclarées dans un thème parent, il faut surcharger le fichier _theme.less. Ce fichier doit contenir uniquement des déclarations concernant des variables déjà existantes dans des thèmes parents.
  • Pour déclarer de nouvelles variables propres à votre thème enfant, il faut créer un nouveau fichier. Vous avez le choix entre:
    • Créer un fichier _variables_extend.less qu’il faudra importer depuis le fichier _extend.less
    • ou créer un fichier qui peut s’appeler comme vous voulez (à part _variables.less qui va faire exploser votre affichage!) et dans lequel vous consignerez vos nouvelles variables

Héritage des thèmes dans Magento 2: Luma < (hérite de) Blank < (hérite de) Core.

  • vendor/magento/theme-frontend-luma/web/css/source/_theme.less
    • Contient uniquement des surcharges de variables ayant déjà été déclarées dans les fichiers .less du Core (cf. lib/web/css/source/lib/_variables.less).
  • vendor/magento/theme-frontend-luma/web/css/source/_variables.less
    • Contient des surcharges de variables ayant déjà été déclarées dans le/les thème(s) parent(s) (Blank < Core), ainsi que de nouvelles variables qui seront exploitées dans plusieurs fichiers du thème Luma.
    • Ce fichier n’a pas l’air surchargeable dans un theme qui serait enfant de Luma (héritage: Luma Child < Luma < Blank < Core). Il faut obligatoirement l'étendre en créant un nouveau ficher app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_variables_extend.less, lui-même importé via @import '_variables_extend.less'; depuis app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_extend.less.
    • Ce fichier n’a pas l’air d’avatage surchargeable dans un theme qui serait simplement enfant de Blank (héritage: Blank Child < Blank < Core). Il faut obligatoirement l'étendre en créant un nouveau ficher app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_variables_extend.less, lui-même importé via @import '_variables_extend.less'; depuis app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_extend.less.
  • vendor/magento/theme-frontend-luma/web/css/source/_forms.less contient de nouvelles variables qui seront exploitées uniquement dans ce fichier.

vendor/magento/theme-frontend-luma/web/css/source/_variables.less

Luma nous donne un bon exemple de comment doit être organisée cette feuille de styles. Les grandes parties (Typography, Icons, …) contiennent des surcharges des valeurs de variables existantes déclarées respectivement au minimum dans lib/web/css/source/lib/variables/_typography.less et dans lib/web/css/source/lib/variables/_icons.less.

« Au minimum«  car elles peuvent déjà être surchargées une première fois dans le thème Blank (intermédiaire). @font-family-name__base est, en effet, déclarée pour la première fois dans vendor/magento/theme-frontend-blank/web/css/source/_variables.less.

vendor/magento/theme-frontend-luma/web/css/source/_forms.less

Aliases

Une série d’aliases à ajouter au fichier .bashrc.

  • Pour éditer le fichier: $ vim ~/.bashrc
  • Pour valider les changements sans quitter le terminal: $ source ~/.bashrc

[Docker] Compiler les sources de Foundation (Zurb Template) dans un conteneur

Note: déprécié au profit de [Docker][NodeJS] Utiliser Docker pour créer un environnement de développement NodeJS.

Accès rapide aux commandes Docker utiles

Docker for Gulp Build Tasks et version PDF pour la postérité. Cet article m’a permis de mettre en place un Docker pour compiler mes sources Front-End via NPM (workflow utilisant Bower et Gulp). Et ça marche!!!


ATTENTION: ce Docker fonctionne bien (les sources en local sont compilées via le conteneur), à l’exception de Browsersync qui ne recharge pas l’aperçu dans le navigateur.

TODOs

  • Les fichiers compilés (dossier dist/) sont bien modifiés en local, mais on ne voit pas les modifications en front dans le navigateur. Hypothèse: on voit les fichiers présents dans le conteneur (qui eux ne sont pas modifiés) et pas les fichiers locaux.

    le truc c’est t’utilise pas du tout de volumes
    donc en gros t’es sources sont accessible dans l’image docker, que parce que y’a un copy dans ton Dockerfile
    ca arrive qu’une fois lors du build de l’image
    donc si tu modifie ton code après coup, ton image docker le verra pas, car le code updaté ne lui est pas fourni


Pourquoi Docker?

Par souci de portabilité de l’environnement de travail.

Problème de versions de nodeJS et de ses dépendances d’un poste de travail à l’autre…

Prérequis

Avoir Docker d’installé, avoir Git d’installé.

Conventions pour ce tutoriel

Nous partirons du principe que nos fichiers de travail se trouvent dans un dossier docker/fzt-master. Vous pouvez créer le dossier docker/ via la commande mkdir docker, mais ne créez pas le dossier fzt-master/ pour le moment.

Attention: si vous utilisez un IDE, il est important que les fins de lignes dans vos fichiers soient au format « Unix ». Dans Sublime Text 3 par exemple, menu View > Line endings > Unix.

Mon environnement de travail est un Ubuntu server dans une VM que je lance depuis un Windows 10 via Virtual Box.

Rapatriement des sources de Foundation

A la racine d’un dossier nommé docker/, exécuter la commande suivante pour récupérer les sources de Foundation Zurb Template (branche master) en local via Git dans un dossier fzt-master/: git clone https://github.com/zurb/foundation-zurb-template.git ftz-master

Se placer à la racine du dossier fzt-master (commande cd fzt-master), créer un fichier Dockerfile (commande touch Dockerfile) et l’éditer pour y placer les lignes de code suivantes (commande vim Dockerfile ou vi Dockerfile si vim n’est pas installé sur votre machine) :

Dans vim, on passe en mode « insertion » en tapant la touche Inser du clavier, ce qui nous permet d’éditer le fichier. La combinaison de touches :wq! nous permet ensuite de sauvegarder les modifications apportées au fichier et de quitter.

Dockerfile:

docker-compose.yml

De manière à pouvoir exploiter browser-sync et le live reload, il faut également créer un fichier docker-compose.yml qui va s’occuper de rediriger les ports du conteneur vers notre machine locale afin que nous ayons accès au résultat de nos fichiers compilés dans notre navigateur préféré (explication ici) :

Vos sources devraient être accessibles dans votre navigateur depuis l’URL: http://localhost:4000 ou ip.de.votre.vm:4000

Pour récupérer l’IP de votre VM, taper la commande ifconfig. Choisir celle qui commence par 192.168..

gulpfile.babel.js

Il faudra également éditer le fichier gulpfile.babel.js en local pour ajouter le paramètre open: false à la fonction server:

Initialiser le conteneur Docker

Builder le conteneur: docker build -t fzt-master . edit: la tâche de build sera effectuée par le docker-compose, juste en-dessous.

A la racine du dossier où se trouvent les fichiers Dockerfile et docker-compose.yml, exécuter la commande: docker-compose up -d

Puis (la première fois et à chaque modification du fichier package.json) installer, via le conteneur, les dépendances NPM en local: docker run --rm -v ~/docker/fzt-master:/home/app/ fzt-master npm install edit: la commande npm install a été ajoutée d’office dans le Dockerfile.

Image for service fzt-master was built because it did not already exist. To rebuild this image you must use docker-compose build or docker-compose up --build.

Exploiter le conteneur Docker

Lancer le conteneur afin qu’il exécute la commande par défaut (yarn start) : docker run --rm --pid=host -v ~/docker/fzt-master:/home/app/ fzt-master

L’argument --pid=host sert à stopper la tâche de compilation des sources dans votre conteneur en utilisant le traditionnel raccourci ctrl + c.


ATTENTION: ce billet est expérimental. Il ne garantit en rien que vous puissiez réellement être en mesure de compiler les sources de Foundation dans un conteneur en suivant les directives ci-dessous. Je suis en-train de mettre en place le Dockerfile qui permettra de le faire. Ce billet constitue des notes de travail. En fonction de mon avancement, vous arriverez peut-être à quelque chose. Je retirerai ce message lorsque le Dockerfile sera fonctionnel comme je l’entends.

Pour aller plus loin:

uwegerdes/frontend-development

Browsersync within a Docker container

How to run livereload with gulp within a docker container?

Le Dockerfile décortiqué

Pour paramétrer correctement le Dockerfile, il convient d’aller chercher quelques informations dans les fichiers readme.md et package.json du repo Git de Foundation que nous venons de cloner. Attention à bien chercher ces informations dans la branche que nous venons de cloner (v6.4). Le framework évolue sans arrêt et les informations, les paquets NPM (et leurs versions) et les commandes dont nous avons besoin pour, respectivement, constituer le Dockerfile et compiler notre code source sans erreurs sont différents d’une branche à l’autre du projet.

Embarquer la bonne version de nodeJS

Premièrement, vérifier la version de nodeJS à installer pour faire fonctionner correctement les dépendances utilisées lors de la compilation des sources. La section Installation du fichier readme.md nous renseigne sur ce point:

NodeJS (0.12 or greater)

Nous pourrons trouver ce fichier qui constitue le script d’installation de la version 0.12 de nodeJS sur le repository Git officiel du projet node. Il est à récupérer et à copier/coller dans le dossier fzt64, à la racine (au même niveau que le Dockerfile).

Pour d’autres versions du framework Foundation ou d’autres projets dont la compilation des sources reposent sur NPM, la liste des scripts d’installation de l’ensemble des distributions de nodeJS se trouve ici.

Edit: pour des raisons que j’ignore (quoique, peut-être un problème relatif à la version 16.04 d’ubuntu server que je déclare et qui serait trop récente… je n’ai pas testé avec une petite 14.04 mais je devrais…), le build du container semble ne pas fonctionner avec la version 0.12 de nodeJS préconisée dans la branche v6.4 de Foundation. Peut-être une erreur de mise à jour dans leur readme…

Step 9/13 : RUN /usr/bin/npm install -g babel-core
—> Running in 510dcfa93753
/bin/sh: 1: /usr/bin/npm: not found
The command ‘/bin/sh -c /usr/bin/npm install -g babel-core’ returned a non-zero code: 127

Je la remplace donc par la version 4.x qui lui succède chronologiquement.

Je pourrais tenter de la remplacer par la version en cours (11.x au moment où j’écris ces lignes…), mais je m’expose à des incompatibilités avec les versions de certains paquets NPM utilisés dans la branche v6.4 de la stack Zurb (trop grand gap de versions entre nodeJS et les paquets). C’est notamment ce problème que nous essayons d’éviter en mettant à profit Docker.

Troubleshooting et installation des applications et devDependencies manquantes

On ne peut pas toujours deviner quelles applications et devDependencies doivent être obligatoirement installées dans le conteneur. Il y a bien un fichier package.json dans le projet, mais toutes les devDependencies ne doivent pas obligatoirement être installées via le Dockerfile. Il faut y aller à tâtons et fixer une à une les erreurs retournées par le terminal lors du build du conteneur.

https://github.com/zurb/foundation-zurb-template/blob/v6.4/package.json#L16

$ docker run –rm -v ~/docker/fzt64:/home/app/ fzt64

> foundation-zurb-template@1.0.0 start /home/app
> gulp

[14:26:11] Failed to load external module @babel/register
[14:26:11] Failed to load external module babel-register
[14:26:11] Failed to load external module babel-core/register
[14:26:11] Failed to load external module babel/register
[14:26:11] Local gulp not found in /home/app
[14:26:11] Try running: npm install gulp

Step 9/11 : RUN /usr/bin/npm install
—> Running in 95a31683f7c9
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: undefined
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: undefined
npm WARN deprecated gulp-uncss@1.0.6: Use UnCSS through gulp-postcss instead.
npm WARN deprecated babel-preset-es2015@6.24.1: ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm ERR! Linux 4.4.0-57-generic
npm ERR! argv « /usr/bin/node » « /usr/bin/npm » « install »
npm ERR! node v4.9.1
npm ERR! npm v2.15.11
npm ERR! code ENOGIT

npm ERR! not found: git
npm ERR!
npm ERR! Failed using git.
npm ERR! This is most likely not a problem with npm itself.
npm ERR! Please check if you have git installed and in your PATH.

npm ERR! Please include the following file with any support request:
npm ERR! /home/app/npm-debug.log
The command ‘/bin/sh -c /usr/bin/npm install’ returned a non-zero code: 1

npm ERR! not found: git. Il faut ajouter Git à la liste des paquets à installer.

Step 8/10 : RUN /usr/bin/npm install
—> Running in f25efff29bd2
npm WARN deprecated gulp-uncss@1.0.6: Use UnCSS through gulp-postcss instead.
npm WARN deprecated babel-preset-es2015@6.24.1: ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm ERR! git rev-list -n1 4.0: fatal: ambiguous argument ‘4.0’: unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 4.0: Use ‘–‘ to separate paths from revisions, like this:
npm ERR! git rev-list -n1 4.0: ‘git […] — […]’
npm ERR! git rev-list -n1 4.0:
npm ERR! git rev-list -n1 4.0: fatal: ambiguous argument ‘4.0’: unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 4.0: Use ‘–‘ to separate paths from revisions, like this:
npm ERR! git rev-list -n1 4.0: ‘git […] — […]’
npm ERR! git rev-list -n1 4.0:
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: Cloning into bare repository ‘/root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa’…
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: Host key verification failed.
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: fatal: Could not read from remote repository.
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa:
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: Please make sure you have the correct access rights
npm ERR! git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa: and the repository exists.
npm ERR! Linux 4.4.0-57-generic
npm ERR! argv « /usr/bin/node » « /usr/bin/npm » « install »
npm ERR! node v4.9.1
npm ERR! npm v2.15.11
npm ERR! code 128

npm ERR! Command failed: git clone –template=/root/.npm/_git-remotes/_templates –mirror git@github.com:gulpjs/gulp.git /root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa
npm ERR! Cloning into bare repository ‘/root/.npm/_git-remotes/git-github-com-gulpjs-gulp-git-ed33b0aa’…
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!

npm ERR! Please include the following file with any support request:
npm ERR! /home/app/npm-debug.log
The command ‘/bin/sh -c /usr/bin/npm install’ returned a non-zero code: 1

Il faut ajouter gulp-cli à la liste des dépendances NPM à installer. Voir ici et .

Builder le container

Pour builder le container (que je vais appeler « fzt64 »), j’exécute la commande: docker build -t fzt64 .

Installer les paquets node en local, via le container

Then open the folder in your command line, and install the needed dependencies:

cd projectname
npm install
bower install

Commande à exécuter obligatoirement avant toute autre pour récupérer les dépendances NPM du projet (dossier node_modules) en local.

Pour exécuter la commande npm install à l’intérieur de mon container (et ainsi récupérer les dépendances node propres au projet Foundation en local sur ma machine, à la racine du dossier home/intlangf/docker/fzt64/ où se trouve le fichier package.json), j’exécute la commande docker run --rm -v ~/docker/fzt64:/home/app/ fzt64 npm install

Pareil pour Bower: docker run --rm -v ~/docker/fzt64:/home/app/ fzt64 bower install

Commande par défaut

La section Manual setup du fichier readme.md nous renseigne sur les différentes commandes fournies par la stack Zurb:

Finally, run npm start to run Gulp. Your finished site will be created in a folder called dist, viewable at this URL:
http://localhost:8000
To create compressed, production-ready assets, run npm run build.

La commande npm start est la commande par défaut dans notre Dockerfile.

Ceci signifie que lorsqu’on exécute la commande docker run --rm -v ~/docker/fzt64:/home/app/ fzt64 dans notre terminal, c’est en réalité la commande npm start qui sera exécutée dans notre container. Elle génèrera un dossier dist/ en local (à la racine du dossier docker/fzt64/) qui contiendra le résultat de la compilation des différentes sources de Foundation.

Exécuter une commande autre que celle par défaut

On voit que d’autres commandes sont disponibles au sein de la stack Zurb.

docker run --rm -v ~/docker/fzt64:/home/app/ fzt64 npm run build

Commandes utiles

Supprimer des images Docker

Lister les images disponibles: docker images -a.

Supprimer des images en utilisant leurs IDs ou leurs tags: docker rmi <Image> <Image>.

[Docker] Utiliser node, npm, grunt, gulp, webpack, bower, yarn, etc.

Docker for Gulp Build Tasks et version PDF pour la postérité. Cet article m’a permis de mettre en place un Docker pour compiler mes sources Front-End via NPM (workflow utilisant Bower et Gulp). Et ça marche!!!


Mes sources pour ce billet:


Avec Foundation Zurb Template

Création de la Dockerfile

Dans home/intlangf/docker/ je fais un git clone https://github.com/zurb/foundation-zurb-template.git fzt (pour récupérer les sources du framework CSS Foundation).

Ensuite, cd fzt pour entrer dans le dossier créé par Git. Puis touch Dockerfile et vim Dockerfile pour créer et éditer un fichier Dockerfile dans lequel je place le code ci-dessous:

Builder le container

Pour builder le container (que je vais appeler « fzt »), j’exécute la commande: docker build -t fzt .

Exécuter une commande à l’intérieur du container: récupérer les paquets NPM

Commande à exécuter obligatoirement avant toute autre pour récupérer les dépendances NPM du projet (dossier node_modules) en local.

Pour exécuter npm install à l’intérieur de mon container (et ainsi récupérer les dépendances node propres au projet Foundation en local sur ma machine, à la racine du dossier home/intlangf/docker/fzt/ où se trouve le fichier package.json), j’exécute la commande docker run --rm -v ~/docker/knacss:/home/app/ fzt npm install.

Exécuter une commande à l’intérieur du container: yarn start

Les sources dans Foundation se compilent via la commande yarn start qu’on exécute ainsi: docker run --rm -v ~/docker/knacss:/home/app/ fzt.

Ici on ne précise pas de commande à la suite du nom de l’image Docker, car la commande par défaut dans le fichier Dockerfile est CMD ["yarn", "start"].

Résultat: un dossier dist/ est généré en local avec les sources CSS, JS, etc, compilées via notre image Docker!


Avec KNACSS

Création de la Dockerfile

Dans home/intlangf/docker/ je fais un git clone https://github.com/alsacreations/KNACSS.git knacss (pour récupérer les sources du framework CSS Knacss).

Ensuite, cd knacss pour entrer dans le dossier créé par Git. Puis touch Dockerfile et vim Dockerfile pour créer et éditer un fichier Dockerfile dans lequel je place le code ci-dessous:

Builder le container

Pour builder le container (que je vais appeler « test »), j’exécute la commande: docker build -t test .

Exécuter une commande à l’intérieur du container

Pour exécuter npm install à l’intérieur de mon container (et ainsi récupérer les dépendances node propres au projet Knacss en local sur ma machine, à la racine du dossier home/intlangf/docker/knacss/ où se trouve le fichier package.json), j’exécute la commande docker run --rm -v ~/docker/knacss:/home/app/ test npm install.


Expériences plus anciennes

Avec une Dockerfile

Container with ready-to-run gulp-tasks sur hub.docker.com.

  1. copy the contents of the example directory to your project.
  2. change the gulpfile.js to meet your requirements (sass or less, copy included?)
  3. change the gulp_config.js to meet your requirements

4. make the gulp-File executable

Well you can make it by doing as chmod +x filename.sh so it will execute when you call it will ./filename.sh.

5. run ./gulp build:dev or ./gulp watch

see gulp running for you, without having to worry with nodejs, module dependencies, complex tasks configuration

Avec Docker Compose

Bonus:

How To Remove Docker Images, Containers, and Volumes

Remove all images and containers


[Docker] Mettre en place un container workflow de développement Front-End incluant NodeJS, NPM, Bower, Gulp, etc …

Note: déprécié au profit de [Docker][NodeJS] Utiliser Docker pour créer un environnement de développement NodeJS.

Docker for Gulp Build Tasks et version PDF pour la postérité. Cet article m’a permis de mettre en place un Docker pour compiler mes sources Front-End via NPM (workflow utilisant Bower et Gulp). Et ça marche!!!


Ressources en ligne

Tutoriels

Repositories

  • Le projet docker-npm de nkenney sous Git. Un node, npm, yarn, bower, grunt and gulp runner.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑