GithubアクションによるNPMパッケージの発行/更新


これまでの時間がないから変更を加えても更新されないNPMパッケージを持っていた.私!前の投稿で話したのは:.それは私の人生をわずかに簡単にし、Githubアクションで発行ステップを自動化する時間です.
Githubアクションのリリース以来、私が知っている人は皆、それについて夢中になっていたので、少し学び、問題を解決しようとすると、私はそれを試してみることができたと思いました.)
そして、ここでは公式GITHUBアクションドキュメントです.GH Actions Docs

ゴール


設定を始める前に何をしたいかを知ることが重要です.私にとって、それは非常に単純であるが、非常に役に立つ何かになるでしょう.
これが私の出発点です.
  • 私はNPMに公開されているオープンソースパッケージがあります
  • NPM: react-native-value-picker

  • Github: react-native-value-picker
  • 私が新しい「公式」を作るときrelease Githubでは、このパッケージを更新/再発行したいので、私の更新はライブになります.
  • これを行うには、NPM CLIを通してログインして発行/再発行する必要があります.
    # Authenticating with npm
    $ npm login
    
    # Publish the package
    $ npm publish
    
    私は知っている、私はそれがパッケージに更新をプッシュするたびに、これらの2つのステップを行うために大量の作業ではないが、私たちはここで何かを学んでいる.
    このタスクを自動化するためにGithubアクションの前に、サードパーティのCI/CDソリューションを含む必要がありました.
    では設定を始めましょう.

    Githubアクションを使用するREPOの準備


    私たちのGithubアクションの中で実行したい実行チェーンやジョブはworkflows .
    それで、Githubは中を見ます.github/workflows ワークフロー/実行チェーンのために.github 私たちのルートの内部のフォルダ、このフォルダは一般的なコードの所有者のような倉庫に特別な構成がある場合です.さらに、我々は我々の内側のフォルダを作る必要があります.github フォルダworkflows .
    すべてがされるとき、あなたはAを持ちますroot/.github/workflows フォルダ.
    ほとんどのCI/CDソリューションのようにworkflows.yml ファイルは、そのファイルをworkflow 上記のフォルダを作成します.YMLファイル名npm-publish.yml そして、それはより明確にするためにひどく作られたフォルダツリーです.
    --------> root
    |   ---> .github
    |      ----> workflows
    |          ----> npm-publish.yml // contains our workflows.
    | ----> rest of app
    

    ワークフローの設定


    だから我々の中npm-publish.yml ワークフローを設定するのは良いです.私は最初に完成したものを掲示します、そして、次に、私はそれが何をするかによって段階的に行きます.
    name: Npm Publish
    
    on:
      release:
        types: [published]
    
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - uses: actions/setup-node@v1
            with:
              node-version: 12
              registry-url: https://registry.npmjs.org/
          - run: yarn install
          - run: npm publish --access public
            env:
              NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}
    
    それを壊しましょう
    name: Npm Publish
    
    ワークフローに名前を付けると、非常にトップでは、私たちが意味するような名前のワークフローを提供します.
    on:
      release:
        types: [published]
    
    The on -キーワードは、ワークフローが実行されるときに、Githubに指示します、この場合、私は新しいリリースがあるとき、私がそれを走らせたいと決めます、そして、より具体的に、私はリリースタイプがそうであるとき、それを望みますpublished . これは重要であり、リリースも可能性があるので必要ですupdated or deleted . これは確かに我々が実行することを確認release publish のみ.
    jobs:
      build:
        runs-on: ubuntu-latest
    
    The jobs キーワードは、私たちのCIに実行する別のステップを伝えます.
    この場合はbuild Ubuntuの最新バージョンでは、プロジェクトとして指定されますubuntu-latest .
    さらに、我々の仕事のステップを定義する必要があります.
       steps:
          - uses: actions/checkout@v2
          - uses: actions/setup-node@v1
            with:
              node-version: 12
              registry-url: https://registry.npmjs.org/
          - run: yarn install
          - run: npm publish --access public
    
    我々の仕事の中で、我々は今、我々の仮想マシン/BOXのオペレーティングシステムをすでに定義しました.
    さて、平易な英語で、我々はこのようにプロジェクトを実行するとき、我々はローカルに何をしますか?
    通常、端末ではこのようになります.
    プロジェクトのクローン
    $ git clone git:repo-address
    
    すべてのパッケージ/依存関係をインストールする
    $ yarn install
    
    3 .出版ステップを行う
    $ npm login
    $ npm Publish
    
    ローカルで既に開発環境設定をしていますが、既にノード、ヤーンなどがありますが、Ubuntuを実行しているGithubsサーバに基本的に新しいコンピュータを作成しているので、もっと具体的な設定が必要です.
    1 . repoをクローンします.
    - uses: actions/checkout@v2
    
    2 .既知の作業版にインストールノードをインストールし、どのパッケージレジストリを使用するかを指定します.
        - uses: actions/setup-node@v1
            with:
              node-version: 12
              registry-url: https://registry.npmjs.org/
    
    依存関係のインストール
    - run: yarn install
    
    NPMへの公開
    - run: npm publish --access public
    
    さらに、ユーザ名とパスワードを渡すことによって、私たちを認証するスクリプトを見ている人間が座っていないので、私たちはpre-authenticated ノード環境へのトークン
            env:
              NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}
    
    そして、それは我々の新しいGithubアクションワークフロー構成です🎉
    続けて!そのNPM認証トークンについてはどうでしょうか?
    次に設定しましょう.

    Authトークンの設定


    以前に述べたように、私たちのノード環境に渡すために、事前に認証されたトークンが必要です.これはNPMへの認証方法であり、セットアップに非常に複雑ではありません.
    設定ファイルにトークンを入れないでください
    Note :あなたはNPMJSにアカウントを持っていると思います.あなたが一緒に続くことに興味があるならば、org.
    頭の上にあなたのアカウントにNPMとクイックアカウントメニューのプレスでAuth Tokens
    インサイドAuth Token ページで新しいトークンを作成します.

    あなたがトークンを付与する場合は、次にプロンプトが表示されますread and publish それともread , この場合、私たちは出版権を持っている必要があります.

    トークンが作成されている後、それをコピーし、私たちのリポジトリの秘密に追加するまで少しの間あなたとそれを保つことができることを確認します.

    我々の倉庫へのNPMトークンの追加


    あなたのパッケージが存在して、設定ページに行くあなたのGitHubリポジトリに頭をつけてください.

    秘密のサブページに設定ヘッドの内側.

    をクリックします

    そして、ここで、我々は我々が我々の行動構成ファイルで書いたもので、トークンの名前と一致したいです.

    我々の秘密の変数参照NPM_AUTH_TOKEN それから、あなたはNPMから値フィールドで得たトークンをペーストしたいでしょう.
    すべてがよく行われるとき、我々はそれを加えました.

    それは設定のために必要なすべて、コミット、マージにマスターし、それが動作するかどうかを確認するために試してみましょう.

    テスト


    そこで、新しく作成されたワークフローをテストするために、新しいリリースを作成する必要があります.

    それは本当にあなたが何をあなたがリリースのために選ぶかについて重要でありません、しかし、pre - releaseチェックボックスがチェックされないことを確認してください.そして、あなたは2010年にバージョンをぶつけましたpackage.json , NPMは変更を公開するときにバージョンを更新する必要があります.
    リリースが行われたら、リポジトリのアクションタブに向かいましょう.

    そこに行く、マイクのドロップ.

    終わり


    あなたがレポを訪問するのが好きであるならば、私はそれがここで利用可能な状態で働いていました:
    ugglr/react-native-value-picker
    パッケージはNPM経由で入手できます.
    NPM: react-native-value-picker
    そしてそのパッケージの作成は以前のポストの一部です.

    読書ありがとう!