GitHub Actions发布NPM -- 自动部署

关于如何使用GitHub Actions自动部署NPM和实操过程中遇到的问题，以及解决办法。
通过详细步骤截图，让你可以0基础也能跟着完成操作，实现使用Github自动部署npm包。

一、首先做好两个准备工作：
        第一步，注册一个GitHub仓库：GitHub官网；注册之后将代码上传到GitHub；(需要注意的是不能是私有仓库)
        然后，注册一个自己的NPM：NPM官网。
        由于以上这两步相对简单我就做演示了。
        接下来处理一些细节问题：

二、获取GitHub和NPM的Access Token
        1、首先获取GitHub的Access Token:
        登录GitHub后点击右上角个人头像进入具体看下列图片步骤更好理解；
         Settings > Developer settings > Personal access tokens > Fine-grained tokens > Generate new token > 最后得到生成的token，先复制保存-[重要]；
        到这里我们就拿到了GitHub上的Access Token;
        2、首先获取NPM的Access Token:
        登录NPM，点击右上角头像进入具体看下列图片步骤更好理解；
        Access Tokens > Generate New Token > Granular Access Token >  最后得到生成的token，先复制保存-[重要]；

        好了至此我们就拿到了GitHub和NPM两个地方的Token了，切记这两个Token要复制出来保存，因为一旦离开页面就看不到完整的Token了，当然如果不小心关闭了导致没有保存，可以按照同步骤再次创建，但最好还是保存起来。

三、进入GitHub仓库添加Token
        在第一步的时候我们已经注册了GitHub并提交了代码，所以我们直接进入我们的代码仓库中进入下一步骤：
        Settings > Secrets and variables > Actions > New repository secret > 分别添加在第二步中获取的GitHub以及NPM的Access Token。
        


        到此我们就配置好了所需要的Token，那我们现在还需要的就是去配置自动化推送NPM。

四、配置Actions
        1、进入仓库选择Actions，我们可以选择 set up a workflow yourselfset up a workflow yourself 也可以快速配置选择此工作流程，点击Configure进行配置，

        我们也可自行配置工作列流程，下列是我配置的步骤，你们也可以更具自己的需要配置工作步骤流程，然后点击Commit changes...提交修改；
下面是我自己的Workflow，可根据自己所需自行修改；

name: Node.js Package

# 触发工作流程的事件
on:
  push:
    branches:
      - main
      - "releases/**"
      - dev

# 按顺序运行作业
jobs:
  publish-gpr:
    # 指定的运行器环境
    runs-on: ubuntu-latest
    # 设置 node 版本
    strategy:
      matrix:
        node-version: [14]
    steps:
      # 拉取 github 仓库代码
      - uses: actions/checkout@v3
      # 设定 node 环境
      - uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          # 默认配置
          registry-url: https://registry.npmjs.org/
      # 安装依赖，相当于 npm ci
      - name: Install dependencies
        run: npm install
      # 执行构建步骤
      - name: 构建
        run: |
          npm run build
      # 执行部署步骤
      - name: 部署
        # 默认配置
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          # 在第三步中设置的 ACCESS_TOKEN 
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          # 指定推送到的远程分支
          BRANCH: pages
          # 指定构建之后的产出路径
          FOLDER: build
      - run: npm publish
        env:
          # 在第三步中设置的 NPM_TOKEN
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

        完成Workflow后我们重新提交一下项目代码，执行git:

git add .
git commit -m ':new: new commit'
git push

        提交完成后我们回到Actions就会看到它自动帮我们提交到了NPM：

        接下来就是验证我们的NPM包是否可用了，我们可以在项目中使用 npm i [npm包名]。
 

我遇到的问题：
        问题一
        工作流运行过程产生错误"The process ‘/usr/bin/git’ failed with exit code 128 ❌"，导致部署失败。
解决方法：
        回到项目仓库 > Setting > Actions > General，在"工作流权限(Workflow permissions)"中，选择Read and write permissions。
        问题二
        npm ERR! 404 'xxxxxxxxxxxx@1.0.0' is not in the npm registry.
解决方法：
        这个是通过修改项目中package.json文件中的版本号解决，将版本号+1："version": "1.0.1"

 

制作不易，如有帮助到您请分享给更多人，并留下你免费的赞！