GitHub 작업을 사용하여 NPM 패키지 게시/업데이트

NPM 패키지는 수시로 변경해도 영원히 업데이트되지 않습니다.나는 원한다!나는 이전 게시물에서 언급한 적이 있다.이제 내 생활을 좀 간단하게 하고 Github 조작으로 자동화 발표 절차를 밟을 때가 되었다.
GitHub Actions가 발표된 이래로 제가 아는 모든 사람들이 그것에 대해 이야기하고 있습니다. 그래서 공부를 좀 하고 제가 직면한 문제를 해결하기 위해 제가 한번 해 보겠습니다.)
오, 공식 GitHub 운영 문서입니다: GH Actions Docs

골문


설정을 시작하기 전에 (또는... 어떤 일을 하든지, 정말!) 자신이 무엇을 하고 싶은지 아는 것이 중요하다.나에게 있어서 이것은 매우 간단하지만 매우 유용한 일이 될 것이다.
이것은 나의 출발점이자 내가 이루고 싶은 목표이다.
  • NPM에 게시된 오픈 소스 패키지가 있습니다.
  • NPM: react-native-value-picker

  • Github: react-native-value-picker
  • 제가 Github에 새로운'공식'release을 만들었을 때 이 가방을 업데이트/재발포하고 싶습니다. 그러면 제 업데이트가 효력을 발생합니다.
  • 이 작업을 수동으로 수행하려면 다음과 같이 NPM CLI를 통해 로그인하여 게시/다시 게시해야 합니다.
    # Authenticating with npm
    $ npm login
    
    # Publish the package
    $ npm publish
    
    알아요. 알아요. 제가 소프트웨어 패키지를 업데이트하고 싶을 때마다 이 두 단계를 완성하는 것은 큰 작업량이 아니지만 여기서 배운 것이 있습니다.
    GitHub를 조작하기 전에 이 임무를 자동화하기 위해 제3자 CI/CD 솔루션이 필요합니다. 가장 중요한 것은 무료입니다.
    구성부터 시작합시다.

    GitHub 작업을 위한 재구매 준비


    GitHub 작업에서 실행할 실행 체인 또는 작업은 workflows 이라고 합니다.
    GitHub는 .github/workflows 에서 워크플로우/실행 체인을 찾습니다. 따라서 루트 디렉터리에 .github 폴더를 만듭니다. 저장소에 코드 소유자와 같은 특별한 설정이 있으면 이 폴더는 흔히 볼 수 있습니다.또한 .github 폴더에 workflows 라는 폴더를 만들어야 합니다.
    이 모든 것이 완료되면 root/.github/workflows 폴더가 있습니다.
    대부분의 CI/CD 솔루션과 마찬가지로 GitHub 작업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]
    
    키워드on - GitHub 워크플로우가 언제 실행되는지 알려 줍니다. 이 예에서 새 버전이 있을 때 실행하도록 지정했습니다. 더 구체적으로 말하면 버전 유형published이 있을 때 실행하고 싶습니다.발표도 updated 또는 deleted 이 될 수 있기 때문에 매우 중요하고 필수적이다.이것은 우리가 release publish 에서만 운행할 수 있도록 보장한다.
    jobs:
      build:
        runs-on: ubuntu-latest
    
    키워드jobs는 CI에서 수행해야 할 다양한 단계를 알려줍니다.
    이 예에서 최신 버전의 Ubuntu build 에서 이 항목을 지정하고 싶습니다.
    또한 작업 단계를 정의해야 합니다.
       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
    
    현재 VM/엔클로저의 운영 체제를 정의한 단계를 정의하고 있기 때문에 컴퓨터에서 로컬로 프로젝트를 실행하는 것과 같은 단계에 있습니다.
    좋아, 간단하게 말하자면, 우리가 이런 프로젝트를 실행할 때, 우리는 현지에서 무엇을 합니까?
    일반적으로 터미널에서는 다음과 같이 보입니다.
    1. 프로젝트 복제
    $ git clone git:repo-address
    
    2. 모든 패키지/종속성 설치
    $ yarn install
    
    3. 제작 단계 수행
    $ npm login
    $ npm Publish
    
    로컬에서 우리는 이미 개발 환경 설정을 가지고 노드, 사선 등을 가지고 있다. 그러나 우리는 본질적으로 Ubuntu를 실행하는 Githubs 서버에 새 컴퓨터를 만드는 것이기 때문에 더욱 구체적으로 해야 한다. 이것이 바로 우리가 프로필에서 한 일이다.
    1. 복제 환매.
    - uses: actions/checkout@v2
    
    2. 알려진 작업 버전에 node를 설치하고 사용할 패키지 등록표를 지정합니다.
        - uses: actions/setup-node@v1
            with:
              node-version: 12
              registry-url: https://registry.npmjs.org/
    
    3. 종속성 설치
    - run: yarn install
    
    4, NPM에 게시
    - run: npm publish --access public
    
    5. 그 밖에 스크립트가 사용자 이름과 비밀번호를 전송하는 것을 보고 앉아 있는 사람이 없기 때문에 노드 환경에 ubuntu-latest 영패를 전달해야 한다
            env:
              NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}
    
    이것이 바로 우리의 새로운 Github 작업 흐름 설정입니다.🎉
    등등그 NPM 인증 영패는 어떻다고 말할 수 있습니까?
    이제 구성합니다.

    인증 토큰을 설정합니다.


    앞에서 말한 바와 같이, 우리는 우리의 노드 환경에 전달할 예비 인증 영패가 필요하다.이것은 우리가 NPM에 대해 신분 검증을 하는 방식이며 설정이 복잡하지 않다.
    프로필에 영패를 넣지 마십시오. 영패는 사유로 유지해야 합니다.
    주: NPMJ에 계좌가 있다고 가정합니다.org, 네가 따라갈 흥미가 있다면.
    npm의 계정으로 가서 빠른 계정 메뉴에서 누르기pre-authenticated Auth Tokens 페이지에서 새 영패를 만들어야 합니다.

    그리고 영패Auth Token를 수여할지 아니면 영패read and publish만 수여할지 알려 줍니다. 이 예에서 우리는 발표 권한을 가지고 있기 때문에 그것을 읽고 발표해 주십시오.

    토큰을 만든 후 복사하여 저장소 기밀에 추가할 때까지 일정 기간 보관할 수 있는지 확인합니다.

    NPM 토큰을 저장소에 추가


    GitHub 저장소로 이동하여 가방이 있는 곳으로 이동한 다음 설정 페이지로 이동합니다.

    설정된 내부 지향 기밀 하위 페이지입니다.

    새 암호 만들기 를 클릭합니다.

    여기서 영패의 이름을 작업 프로필에서 작성한 내용과 일치시켜야 합니다.

    우리의 예에서, 우리는 우리의 비밀 변수를 레퍼런스 read 라고 명명하고, NPM에서 얻은 영패를value 필드에 붙여야 합니다.
    모든 것이 좋으면 우리는 그것을 보충할 것이다.

    이것이 바로 우리가 필요로 하는 설정입니다. 그것을 제출하고master에 통합해서 효과가 있는지 시험해 봅시다.

    테스트


    따라서, 우리가 새로 만든 작업 흐름을 테스트하기 위해서, 우리는 그것을 트리거로 설정하기 때문에, 새로운 버전을 발표해야 한다.

    게시를 위해 선택한 태그는 사실상 중요하지 않지만, 미리 게시 확인란이 선택되어 있지 않은지 확인하십시오.NPM_AUTH_TOKEN 에서 버전을 업그레이드했습니다. NPM은 변경 사항을 발표할 때 버전을 업데이트해 달라고 요청했습니다.
    발표가 끝난 후, 우리는 저장소의'작업'옵션 카드로 돌아가서 무엇이 실행 중인지 봅시다!

    자, 마이크 내려놔.

    중지


    만약 당신이 내가 계속 일하고 있는 환매를 방문하고 싶다면 여기서 찾을 수 있습니다.
    ugglr/react-native-value-picker
    이 패키지는 NPM을 통해 제공됩니다.
    NPM: react-native-value-picker
    패키지의 생성은 이전 게시물의 일부입니다.

    읽어주셔서 감사합니다!

    좋은 웹페이지 즐겨찾기