使用github Actions将React应用发布到Github Pages [英] Publish React app to Github Pages using github Actions

问题描述

我制作了一个简单的Reactjs应用，现在我想将其发布在gh页上.我按照此Facebook教程进行了部署，并且它也正在从我的PC部署.但是现在，我考虑使用 Github Actions 在每次推送到master分支上进行部署，而不是每次手动进行部署.所以我写了下面的动作.

I made a simple Reactjs app and now I want to publish it on gh-pages. I followed this Facebook tutorial for deploying it and it is also getting deployed from my PC. But now instead of every time manually deploying it, I thought of using Github Actions to deploy on every push to the master branch. so I wrote the below Action.

name: gh pages publish

on:
  push:
    branches: master

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/
  - name: publish package
    run: |
      yarn
      npm run deploy

但是此操作失败，因为它要求用户输入用户名和密码.

But this action fails because it requires the user to input the username and password.

> gh-pages -d build
fatal: could not read Username for 'https://github.com': No such device or address

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! timetablemanager@0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the timetablemanager@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2020-06-21T07_07_19_700Z-debug.log
##[error]Process completed with exit code 1.

我该如何解决?

这是package.json文件

Here is the package.json file

    {
  "homepage": "http://itissandeep98.github.io/TimeTableManager/",
  "name": "timetablemanager",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.5.0",
    "bootstrap-social": "^5.1.1",
    "font-awesome": "^4.7.0",
    "gh-pages": "^3.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

推荐答案

根据create react app github页面的问题排查此处，您需要执行以下操作.

According to the create react app github pages troubleshoot here, you need to do the following.

1. 创建一个新的个人访问令牌
2. git远程设置URL的来源https://< user>:< token> @ github.com/< user>/< repo> .
3. 再次尝试 npm运行deploy

还要确保package.json中的所有内容都是正确的，但这肯定看起来像是身份验证问题.

Also make sure everything in your package.json is correct, but this definitely looks like an authentication issue.

这篇关于使用github Actions将React应用发布到Github Pages的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！