{
    "componentChunkName": "component---src-templates-blog-post-jsx",
    "path": "/post/automate-deploy-to-npm-with-circleci/",
    "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"0ce491d6-b1a5-5aa8-a0ba-f9a2b75dbd45","excerpt":"こんにちは。 RubygemsへのデプロイをCircleCIで自動化してみた | WEB EGGに引き続きnpmのデプロイも自動化してみました。 gemのときとは微妙に差異があるので、あらためて備忘録として残しておきます。 作ったもの こちらのリポジトリです。circle.yml…","html":"<p>こんにちは。<br>\n<a href=\"/post/automate-deploy-to-rubygems-with-circleci/\">RubygemsへのデプロイをCircleCIで自動化してみた | WEB EGG</a>に引き続きnpmのデプロイも自動化してみました。<br>\ngemのときとは微妙に差異があるので、あらためて備忘録として残しておきます。</p>\n<!--more-->\n<h2 id=\"作ったもの\" style=\"position:relative;\"><a href=\"#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE\" aria-label=\"作ったもの permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>作ったもの</h2>\n<p>こちらのリポジトリです。circle.ymlにデプロイ周りのことが書かれています。</p>\n<blockquote>\n<p><a href=\"https://github.com/Leko/roulette-cli\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GitHub – Leko/roulette-cli: Simple roulette game</a></p>\n</blockquote>\n<h2 id=\"基本的なnpmのデプロイ手順\" style=\"position:relative;\"><a href=\"#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AAnpm%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E6%89%8B%E9%A0%86\" aria-label=\"基本的なnpmのデプロイ手順 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>基本的なnpmのデプロイ手順</h2>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">npm</span> login <span class=\"token comment\"># アカウント情報を入力</span>\n<span class=\"token function\">npm</span> publish</code></pre></div>\n<p>で現在のプロジェクトをnpmへデプロイできます。</p>\n<blockquote>\n<p><a href=\"https://circleci.com/docs/npm-login/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Using npm login on CircleCI – CircleCI</a></p>\n</blockquote>\n<p>このドキュメントを参考に、loginで与える認可情報は環境変数で保持すればOKでした。</p>\n<h2 id=\"もう少しリッチなnpmのデプロイ方法\" style=\"position:relative;\"><a href=\"#%E3%82%82%E3%81%86%E5%B0%91%E3%81%97%E3%83%AA%E3%83%83%E3%83%81%E3%81%AAnpm%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E6%96%B9%E6%B3%95\" aria-label=\"もう少しリッチなnpmのデプロイ方法 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>もう少しリッチなnpmのデプロイ方法</h2>\n<p><a href=\"/post/automate-deploy-to-rubygems-with-circleci/\">RubygemsへのデプロイをCircleCIで自動化してみた | WEB EGG</a>のときはgemが自動でやってくれのたですが、<br>\nnpmではタグを切ったりCHANGELOG書いたりを自前で行う必要があります。</p>\n<blockquote>\n<p><a href=\"http://efcl.info/2014/07/20/git-tag-to-release-github/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Git tagとGitHub ReleasesとCHANGELOG.mdの自動化について | Web Scratch</a></p>\n</blockquote>\n<p>こちらの記事を参考にしようと思ったのですが、やり過ぎ感が漂っており要件には合わなかったので、<br>\nラップしている元の<a href=\"https://github.com/conventional-changelog/standard-version\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">standard-version</a>というライブラリを使用してみました。<br>\nこのライブラリを使用すると、</p>\n<ul>\n<li>CHANGELOGの自動生成</li>\n<li>バージョン用のGitのタグを切る</li>\n<li>(バージョン番号の設定) ※今回は無効化します。バージョン番号は自分で決める方針で</li>\n</ul>\n<p>が自動で行われます。</p>\n<h2 id=\"circleciにuser-keyを追加する\" style=\"position:relative;\"><a href=\"#circleci%E3%81%ABuser-key%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B\" aria-label=\"circleciにuser keyを追加する permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>CircleCIにuser keyを追加する</h2>\n<p>CircleCIと連携したままのだと、read onlyなデプロイキーが使用されています。 なのでリポジトリからpullはできるのですが、タグの追加やpushができない。</p>\n<p>この手順については<a href=\"/post/automate-deploy-to-rubygems-with-circleci/\">RubygemsへのデプロイをCircleCIで自動化してみた | WEB EGG</a>に書いてあるので、そちらをご参照ください。</p>\n<h2 id=\"試す\" style=\"position:relative;\"><a href=\"#%E8%A9%A6%E3%81%99\" aria-label=\"試す permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>試す</h2>\n<p>CircleCIの表示は</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 668px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/84a00524f5f739a2eac44fa2a8dd6903/65654/b782c30ff31333c2cea5152a250c73b0.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 76.04790419161675%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'304\\'%20viewBox=\\'0%200%20400%20304\\'%20preserveAspectRatio=\\'none\\'%3e%3cpath%20d=\\'M15%2084l1%2057h384V27H15v57m0%20156v64h385V176H15v64\\'%20fill=\\'%23d3d3d3\\'%20fill-rule=\\'evenodd\\'/%3e%3c/svg%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/84a00524f5f739a2eac44fa2a8dd6903/5251b/b782c30ff31333c2cea5152a250c73b0.webp 167w,\n/static/84a00524f5f739a2eac44fa2a8dd6903/7390e/b782c30ff31333c2cea5152a250c73b0.webp 334w,\n/static/84a00524f5f739a2eac44fa2a8dd6903/7c056/b782c30ff31333c2cea5152a250c73b0.webp 668w,\n/static/84a00524f5f739a2eac44fa2a8dd6903/a8a2c/b782c30ff31333c2cea5152a250c73b0.webp 872w\"\n              sizes=\"(max-width: 668px) 100vw, 668px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/84a00524f5f739a2eac44fa2a8dd6903/21521/b782c30ff31333c2cea5152a250c73b0.png 167w,\n/static/84a00524f5f739a2eac44fa2a8dd6903/86d36/b782c30ff31333c2cea5152a250c73b0.png 334w,\n/static/84a00524f5f739a2eac44fa2a8dd6903/74866/b782c30ff31333c2cea5152a250c73b0.png 668w,\n/static/84a00524f5f739a2eac44fa2a8dd6903/65654/b782c30ff31333c2cea5152a250c73b0.png 872w\"\n            sizes=\"(max-width: 668px) 100vw, 668px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/84a00524f5f739a2eac44fa2a8dd6903/74866/b782c30ff31333c2cea5152a250c73b0.png\"\n            alt=\"スクリーンショッ\"\n            title=\"スクリーンショッ\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n  </a>\n    </span></p>\n<p>npmのパッケージは</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 257px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/06b52aefc4639e75e97d08b37f7c2cbc/96e35/b203346692a299a373192edf35b2a426.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 62.87425149700599%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'252\\'%20viewBox=\\'0%200%20400%20252\\'%20preserveAspectRatio=\\'none\\'%3e%3cpath%20d=\\'M24%2017v7c0%206%202%208%206%208%203-1%205%201%204%205l1%203v1l-1%203c1%203%2011%204%2014%201l4-1h3V31l-1-14H24m154%2012v9h4c5%200%207-2%207-7%200-3-3-6-6-6-1%201-2%200-2-2l-2-3-1%209m66-6l-2%202c-3%200-7%204-7%207%200%204%203%206%207%206h4v-8l-1-10-1%203M95%2027c-3%204-1%2011%204%2011%206%200%208-7%204-11-3-3-5-3-8%200m41%200c-4%205-2%2011%204%2011%205%200%207-6%204-10s-5-4-8-1m18-1c-2%200-2%201-2%208s2%2011%203%206c0-1%201-2%203-2%205%200%207-8%203-11-2-2-2-2-7-1m118%200c-2%200-2%201-2%206s0%206%202%206l1-4c0-4%202-8%203-6l1%205c0%204%200%205%202%205l1-4c0-6%202-8%204-5l1%205%201%204V26h-8l-3-1-3%201m85%201c-1%201-2%203-1%204%201%202%201%206-1%208%200%202%202%205%205%205%206%200%209-7%202-8-3%200-4-2-1-2%202%200%204-2%204-6%201-3%201-3-3-3-3%200-4%201-5%202m12%200c-4%204-1%2011%204%2011%203%200%206-5%205-8-2-5-6-6-9-3M44%2087c0%202%202%203%204%202l2%201-1%202c-3%200-2%203%200%204%204%201%202%202-3%202-2%200-3%202%200%203%205%203%2010-1%208-5v-8c-1-2-8-3-10-1m20%201c-4%208%203%2018%208%2012%202-2%203-10%201-12-2-3-8-3-9%200m166-1v13c2%203%205%202%207%200s3-11%201-13h-8m-67%204c-4%204-1%2011%204%2011%204%200%204-2%200-2-4-1-4-4%200-4l4-1c1-1%207%202%207%204l-3%201h-3c1%202%206%202%208%201%202-2%201-4-2-6s-4-5-1-4c1%201%202%200%202-1%200-2-5-1-6%201l-2%202-1-2c-1-3-5-3-7%200m33%200c-3%202-2%207%200%209%204%204%209%201%209-5%200-5-6-8-9-4m98-1c-2%202-1%205%202%206%204%202%204%204%200%204h-3c1%203%207%202%208%200l1-2%202%202c3%202%208%203%208%201l-3-1c-4-1-4-4%200-4s5-1%203-5-9-1-9%204l-1%203-1-1-2-2c-4-2-4-4%200-4h2c-1-2-5-2-7-1M76%20148v9l1%208%203%201c6%200%209-4%206-10-1-3-1-3-4-3-3%201-3%200-3-2%200-3-2-5-3-3m173%204v4l1%203c-1%205%203%209%206%206l-1-1c-2%200-2-1-2-4%200-4%200-5%202-5s2%201%202%204c0%204%202%207%204%207%203%200%203-2%201-2-3-1-3-7%200-9%201-1%201-1-1-3s-2-2-4-1c-1%202-4%202-4%201-1-3-2-2-4%200m-223%202l-1%209c0%206%200%207%203%208s8-1%208-4c0-2-1-3-3-3-4%200-7-2-4-2s6-3%206-6c1-3%201-3-3-3l-6%201m79%201c-3%204-2%206%200%209%204%204%2010%201%2010-4%200-7-7-9-10-5m12%204c1%208%202%209%203%202%200-6%203-7%204-3l1%204%201%203%201-4c0-4%201-6%203-6l1%205c0%203%200%205%202%205%201%201%201%200%201-4%200-7-1-7-10-8h-7v6m63-4c-3%202-2%207%200%209%204%204%209%201%209-5%200-5-6-8-9-4m28%200c-5%207%202%2014%208%2010%202-2%202-8%200-10-2-3-7-2-8%200M71%20212c-3%202-7%208-7%2011%200%205%205%2012%208%2012%202%200%204-7%203-8-2-2-1-6%201-6%202-1%205%202%203%204v7c2%204%203%204%207-1%209-10-3-25-15-19m-44%201l-1%208c0%207%200%208%202%208l1-3c-1-5%200-7%201-3%202%206%203%205%206-1%201-3%201-3%202%202%200%208%202%206%202-3%200-7%200-8-2-8l-2%202-2%205-1%204-2-5c-2-6-3-7-4-6\\'%20fill=\\'%23d3d3d3\\'%20fill-rule=\\'evenodd\\'/%3e%3c/svg%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/06b52aefc4639e75e97d08b37f7c2cbc/5251b/b203346692a299a373192edf35b2a426.webp 167w,\n/static/06b52aefc4639e75e97d08b37f7c2cbc/a93a3/b203346692a299a373192edf35b2a426.webp 257w\"\n              sizes=\"(max-width: 257px) 100vw, 257px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/06b52aefc4639e75e97d08b37f7c2cbc/21521/b203346692a299a373192edf35b2a426.png 167w,\n/static/06b52aefc4639e75e97d08b37f7c2cbc/96e35/b203346692a299a373192edf35b2a426.png 257w\"\n            sizes=\"(max-width: 257px) 100vw, 257px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/06b52aefc4639e75e97d08b37f7c2cbc/96e35/b203346692a299a373192edf35b2a426.png\"\n            alt=\"スクリーンショッ\"\n            title=\"スクリーンショッ\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n  </a>\n    </span></p>\n<p>いい感じです。</p>\n<h2 id=\"まとめ\" style=\"position:relative;\"><a href=\"#%E3%81%BE%E3%81%A8%E3%82%81\" aria-label=\"まとめ permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>まとめ</h2>\n<p>この記事の内容を試している時に「そういえば前に似たようなことやったな」と思い自分の過去の記事を調べることがありました。<br>\nそのとおりにやっていけば基本的に上手く行ったので、記事を残すことは重要だなとあらためて感じました。</p>\n<p>ベースとなる知識があらかじめ備わっているとその派生系を覚えるのも楽ですしね。</p>","timeToRead":3,"frontmatter":{"title":"npmへのデプロイをCircleCIで自動化してみた","tags":["CircleCI","Nodejs","npm"],"date":"January 04, 2017","featuredImage":null}}},"pageContext":{"slug":"/automate-deploy-to-npm-with-circleci/","previous":{"fields":{"slug":"/nextengine-api-client-with-nodejs/"},"frontmatter":{"title":"ネクストエンジンAPIのNodejs版クライアント作った","tags":["Nodejs"]}},"next":{"fields":{"slug":"/how-to-clone-private-repository-in-docker-build/"},"frontmatter":{"title":"Dockerのビルド時にGithubのプライベートリポジトリをcloneする","tags":["Docker","Git","npm"]}}}},
    "staticQueryHashes": ["2585454260","2954598359"]}