{"id":1587,"date":"2022-01-12T15:41:37","date_gmt":"2022-01-12T14:41:37","guid":{"rendered":"https:\/\/wp.qongzi.dev\/?p=1587"},"modified":"2023-12-21T15:46:05","modified_gmt":"2023-12-21T14:46:05","slug":"publication-dun-paquet-npm-depuis-une-ci-gitlab","status":"publish","type":"post","link":"https:\/\/qongzi.com\/publication-dun-paquet-npm-depuis-une-ci-gitlab\/","title":{"rendered":"Publication d&#8217;un paquet NPM depuis une CI Gitlab"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Enjeu<\/h2>\n\n\n\n<p>Publier un paquet NPM aussi bien sur NPMJS que sur les diff\u00e9rentes \u00e9chelles (projet et instance) du Gitlab<em> registry<\/em> via la CI Gitlab. Il est tout \u00e0 fait possible de faire soit l&#8217;un, soit l&#8217;autre, soit les deux.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pr\u00e9requis<\/h2>\n\n\n\n<p>Le paquet en question peut-\u00eatre aussi bien public que <em>scoped<\/em> pour une publication uniquement sur NPM. Il sera n\u00e9cessairement <em>scoped<\/em> sur le <em>registry<\/em> Gitlab et, de ce fait, sur NPMJS.<\/p>\n\n\n\n<p>\u26a0\ufe0f <strong>La publication d&#8217;un paquet <em>scoped<\/em> et priv\u00e9 sur NPMJS est payante, votre paquet sera donc public par d\u00e9faut.<\/strong><\/p>\n\n\n\n<p>Dans notre cas, nous traiterons une double publication registry Gitlab et NPMJS, <strong>notre publication sera donc <em>scoped<\/em> et publique<\/strong>.<\/p>\n\n\n\n<p>Pour cela il faut :<\/p>\n\n\n\n<ul>\n<li><strong>Une organisation Gitlab<\/strong> du nom du <em>scope<\/em> suivant <a href=\"https:\/\/docs.gitlab.com\/ee\/user\/packages\/npm_registry\/#package-naming-convention\" target=\"_blank\" rel=\"noopener\">la convention<\/a><\/li>\n\n\n\n<li><strong>Un paquet pr\u00e9fix\u00e9<\/strong> du nom du <em><a href=\"https:\/\/docs.npmjs.com\/creating-and-publishing-scoped-public-packages\" target=\"_blank\" rel=\"noopener\">namespace<\/a><\/em><a href=\"https:\/\/docs.npmjs.com\/creating-and-publishing-scoped-public-packages\" target=\"_blank\" rel=\"noopener\"> NPM dans lequel vous voulez publier<\/a> (e.g <em>@mynamespace\/mypackagename<\/em>)<\/li>\n\n\n\n<li><strong>Un <\/strong><a href=\"https:\/\/docs.npmjs.com\/creating-and-viewing-access-tokens\" target=\"_blank\" rel=\"noopener\"><strong>token NPMJS<\/strong><\/a> que vous ajouterez en <a href=\"https:\/\/docs.gitlab.com\/ee\/ci\/variables\/#add-a-cicd-variable-to-a-project\" target=\"_blank\" rel=\"noopener\">variable d&#8217;environnement de v\u00f4tre CI Gitlab<\/a> (e.g <em>$NPM_TOKEN<\/em>).<\/li>\n<\/ul>\n\n\n\n<p>Je sugg\u00e8re d&#8217;utiliser un <strong>token de type <em>Automation<\/em><\/strong> qui est d\u00e9di\u00e9 aux <em>workflows<\/em> automatis\u00e9s.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Configuration<\/h2>\n\n\n\n<p><em>Je n&#8217;aborde pas les \u00e9tapes de test mais vous recommande fortementde<strong> tester votre code<\/strong> ainsi que de <strong>suivre des normes de formatage et de pr\u00e9sentation standards<\/strong> gr\u00e2ce a <a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener\">Eslint<\/a> et <a href=\"https:\/\/prettier.io\/\" target=\"_blank\" rel=\"noopener\">Prettier<\/a>. Il est aussi int\u00e9ressant de <strong>d\u00e9velopper vos librairies avec <a href=\"https:\/\/www.typescriptlang.org\/\" target=\"_blank\" rel=\"noopener\">Typescript<\/a><\/strong> afin de fournir un typage aux futurs utilisateurs. Cela facilitera \u00e9galement la scalabilit\u00e9 de votre projet.<\/em><\/p>\n\n\n\n<p>Une fois <a href=\"https:\/\/docs.npmjs.com\/creating-a-package-json-file\" target=\"_blank\" rel=\"noopener\">votre projet initialis<\/a>\u00e9, cr\u00e9ez un fichier <em>.gitlab-ci.yml<\/em> \u00e0 la racine de votre projet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.1. Image Docker<\/h3>\n\n\n\n<p>L&#8217;image Docker n&#8217;a pas une grande incidence sur l&#8217;\u00e9tape de publication, essayez toutefois d&#8217;utiliser une image LTS <em>light<\/em> dans la mesure du possible :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ymlimage: node:lts-alpine<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">1.2. D\u00e9finition des \u00e9tapes et param\u00e9trage de la mise en cache<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>image: node:lts-alpine\n\nstages:\n  - test\n  - build\n  - deploy\n\n# Configuration de la mise en cache des d\u00e9pendances pour persister leur installation au sein des diff\u00e9rentes \u00e9tapes\ncache:\n    key: ${CI_COMMIT_REF_SLUG}\n    paths:\n        - node_modules\/\n\n\n# Installation des d\u00e9pendances avant l'ex\u00e9cution des jobs\nbefore_script:\n  - npm i\n\n# Vos \u00e9tapes de tests...<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">1.3. Build et artifacts<\/h3>\n\n\n\n<p>Peu de choses \u00e0 dire niveau <em>build<\/em>, pensez simplement \u00e0 bien ajouter les diff\u00e9rents chemins de vos <em>artifacts<\/em>. \u00c0 la fin le paquet correspondra a ces fichiers\/dossiers, le <em>package.json<\/em> et le <em>README.md<\/em> :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Vos \u00e9tapes de tests...\n\nbuild:\n  stage: build\n  script:\n    - npm run build\n  artifacts:\n    paths:\n      - dist\n    # - vos autres dossiers\/fichiers a inclure\n    <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. D\u00e9ploiement Gitlab registry<\/h2>\n\n\n\n<p>Nous voulons d\u00e9ployer notre librairie sur le registry Gitlab, aux \u00e9chelles du projet et de l&#8217;instance de notre organisation. Il est n\u00e9cessaire de :<\/p>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-layout-1 wp-block-group-is-layout-flex\">\n<ul>\n<li>Attendre la fin du <em>build<\/em><\/li>\n\n\n\n<li>Charger les <em>artifacts<\/em><\/li>\n\n\n\n<li>Configurer l&#8217;URL du <em>package<\/em><\/li>\n\n\n\n<li>S&#8217;authentifier<\/li>\n\n\n\n<li>Configurer la publication a l&#8217;\u00e9chelle du projet<\/li>\n\n\n\n<li>Configurer la publication a l&#8217;\u00e9chelle de l&#8217;organisation<\/li>\n\n\n\n<li>Publier<\/li>\n<\/ul>\n<\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>publish_gitlab_registry:\n  stage: deploy\n  needs:\n    - job: build\n      artifacts: true\n  dependencies:\n    - build\n  script:\n    # Configuration de l'URL du package, remplacer l'organisation par le nom de votre organisation, le CI_PROJECT_ID est fourni par la CI\n    - npm config set ${ORGANIZATION}:registry https:\/\/gitlab.com\/api\/v4\/projects\/${CI_PROJECT_ID}\/packages\/npm\/\n\n    # Configuration de la publication a l'\u00e9chelle du projet, le CI_JOB_TOKEN est fourni et suffit a l'authentification\n    - npm config set -- '\/\/gitlab.com\/api\/v4\/projects\/${CI_PROJECT_ID}\/packages\/npm\/:_authToken' \"${CI_JOB_TOKEN}\"\n\n    # Configuration de la publication a l'\u00e9chelle de l'instance, le CI_JOB_TOKEN est fourni et suffit a l'authentification\n    - npm config set -- '\/\/gitlab.com\/api\/v4\/packages\/npm\/:_authToken' \"${CI_JOB_TOKEN}\"\n\n    # Publication\n    - npm publish\n\n  # Nous conseillons de ne pas trigger la publication a chaque CI, ici la r\u00e8gle demande si le tag existe, restreignant ainsi la publication au tag  \n  rules:\n    - if: $CI_COMMIT_TAG<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">3. D\u00e9ploiement sur NPMJS<\/h2>\n\n\n\n<p>Enfin pour publier sur NPMJS ce paquet <em>scoped<\/em> (suivant le nom du paquet dans le <em>package.json<\/em>), la logique est la m\u00eame, seule la configuration change :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>publish_npm:\n  stage: deploy\n  needs:\n    - job: build\n      artifacts: true\n  dependencies:\n    - build\n  script:\n    # Configuration pour la publication sur NPMJS, NPM_TOKEN est le token NPM de type automation g\u00e9n\u00e9r\u00e9 plus t\u00f4t et ajout\u00e9 aux variables d'environnement de votre CI Gitlab\n    - npm config set -- '\/\/registry.npmjs.org\/:_authToken' \"${NPM_TOKEN}\"\n\n    # Etant donn\u00e9 que le paquet est scope, il est n\u00e9cessaire de sp\u00e9cifier le fait qu'il est public\n    - npm publish --access public\n  rules:\n    - if: $CI_COMMIT_TAG<\/code><\/pre>\n\n\n\n<p><strong>R\u00e9sum\u00e9 .gitlab-ci.yml :<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>image: node:lts-alpine\n\nstages:\n  - test\n  - build\n  - deploy\n\ncache:\n  key: ${CI_COMMIT_REF_SLUG}\n  paths:\n    - node_modules\/\n\nbefore_script:\n  - npm install\n\n# Vos \u00e9tapes de tests...\n\nbuild:\n  stage: build\n  script:\n    - npm run build\n  artifacts:\n    paths:\n      - dist\n\npublish_gitlab_registry:\n  stage: deploy\n  needs:\n    - job: build\n      artifacts: true\n  dependencies:\n    - build\n  script:\n    - npm config set ${ORANIZATION}:registry https:\/\/gitlab.com\/api\/v4\/projects\/${CI_PROJECT_ID}\/packages\/npm\/\n    - npm config set -- '\/\/gitlab.com\/api\/v4\/projects\/${CI_PROJECT_ID}\/packages\/npm\/:_authToken' \"${CI_JOB_TOKEN}\"\n    - npm config set -- '\/\/gitlab.com\/api\/v4\/packages\/npm\/:_authToken' \"${CI_JOB_TOKEN}\"\n    - npm publish\n  rules:\n    - if: $CI_COMMIT_TAG\n\npublish_npm:\n  stage: deploy\n  needs:\n    - job: build\n      artifacts: true\n  dependencies:\n    - build\n  script:\n    - npm config set -- '\/\/registry.npmjs.org\/:_authToken' \"${NPM_TOKEN}\"\n    - npm publish --access public\n  rules:\n    - if: $CI_COMMIT_TAG<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">4. La suite<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1. NPMJS<\/h3>\n\n\n\n<p>La publication sur NPMJS vous notifiera par mail, vous pourrez ensuite utiliser le paquet depuis n&#8217;importe quel projet en l&#8217;installant comme n&#8217;importe quelle autre d\u00e9pendance :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @myscope\/mypackage<\/code><\/pre>\n\n\n\n<p>\u26a0\ufe0f <strong>Il est impossible de publier plusieurs fois le m\u00eame paquet avec la m\u00eame version, pensez donc \u00e0 <em>bump<\/em> la version dans le <em>package.json<\/em> \u00e0 chaque publication\ufe0f<\/strong><\/p>\n\n\n\n<p>Vous pouvez aussi g\u00e9rer votre paquet depuis votre compte NPMJS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.2. Gitlab registry<\/h3>\n\n\n\n<p>Vous retrouverez votre paquet dans le <em>repository<\/em> de votre projet dans <strong><em>Packages &amp; Registries -&gt; Package Registry<\/em><\/strong><\/p>\n\n\n\n<p>Il vous suffira de <a href=\"https:\/\/docs.gitlab.com\/ee\/user\/packages\/npm_registry\/index.html#authenticate-to-the-package-registry\" target=\"_blank\" rel=\"noopener\">param\u00e9trer votre authentification au registry<\/a> selon votre pr\u00e9f\u00e9rence. J&#8217;utilise personnellement un <em>personnal access token<\/em> avec un <em>scope api<\/em>. Une fois authentifi\u00e9, vous pouvez installer votre paquet comme n&#8217;importe quelle autre d\u00e9pendance :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @myscope\/mypackage<\/code><\/pre>\n\n\n\n<p><strong>Tout devrait fonctionner pour peu que votre paquet soit fonctionnel !<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il est tout \u00e0 fait possible de publier un paquet NPM aussi bien sur NPMJS que sur les diff\u00e9rentes \u00e9chelles (projet et instance) du Gitlab registry via la CI Gitlab.<\/p>\n","protected":false},"author":4,"featured_media":1588,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[40,37,63,64],"meta_box":{"card_category":"D\u00e9veloppement"},"_links":{"self":[{"href":"https:\/\/qongzi.com\/wp-json\/wp\/v2\/posts\/1587"}],"collection":[{"href":"https:\/\/qongzi.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qongzi.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qongzi.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qongzi.com\/wp-json\/wp\/v2\/comments?post=1587"}],"version-history":[{"count":0,"href":"https:\/\/qongzi.com\/wp-json\/wp\/v2\/posts\/1587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qongzi.com\/wp-json\/wp\/v2\/media\/1588"}],"wp:attachment":[{"href":"https:\/\/qongzi.com\/wp-json\/wp\/v2\/media?parent=1587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qongzi.com\/wp-json\/wp\/v2\/categories?post=1587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qongzi.com\/wp-json\/wp\/v2\/tags?post=1587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}