将React App从Codesandbox部署到Github Pages

Question

我遵循了这个youtube tutorial的要求，将我的react应用程序部署到github页面。我在codeandbox中制作了我的react应用，并将沙箱导出到了github。我下载了node.js，npm和git。

我的文件夹结构： 用户>测试> package-lock.json + andair-master>（内部和air-master）node_modules +构建>（内部构建）public + src + package.json

我下载了我的github项目“ andair-master”，并将其内容复制并粘贴到一个空文件夹“ test”中。

我打开Git Bash并更改目录，直到进入“ andair-master”。我先执行“ git init”，然后执行“ git remote add origin https://github.com/develijahlee/andair.git”，然后尝试“ npm run deploy”。我意识到我缺少一个“ build”文件夹，所以我在“ andair-master”文件夹中创建了一个。然后，将我的“ src”和“ public”文件夹放入“ build”文件夹中，并尝试运行“ npm run deploy”。还是行不通。我注意到我的github缺少gh-pages分支。我不确定如何制作gh-pages分支，或者为什么“ npm run deploy”不起作用。如果有人能告诉我我是否错过了一步，那将非常感激。谢谢。

Answer 1

您的create-react-app项目中缺少一些依赖项。这可能是因为您尝试从codeandbox导出项目（不过我不确定）

您必须先解决这些问题。

依赖项1 （react-scripts）：

npm install react-scripts --save-dev

依赖项2 （node-sass，因为您在项目中使用scss）

npm install node-sass --save

依赖关系3 （gh-pages）

npm install gh-pages --save-dev

完成上述步骤后，验证您的package.json与以下结构匹配

{
  "name": "and-air",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "homepage": "https://develijahlee.github.io/andair/",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.25",
    "@fortawesome/free-regular-svg-icons": "5.11.2",
    "@fortawesome/react-fontawesome": "0.1.5",
    "node-sass": "^4.13.0",
    "react": "16.9.0",
    "react-dom": "16.8.6"
  },
  "devDependencies": {
    "gh-pages": "^2.1.1",
    "react-scripts": "^3.2.0",
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

现在您可以运行部署脚本

npm run deploy

此步骤之后，请验证是否创建了名称为gh-pages的新分支

点击github中的设置标签

向下滚动到 GitHub Pages 部分，然后将分支切换到gh-pages分支。

页面上线后，您应该会收到一条成功消息。

Answer 2

这是代码中的部署脚本：

"deploy": "gh-pages -d build"

这意味着gh-pages工具使用构建目录进行部署，因此您需要做两件事才能使其工作

• 使用以下命令正确创建构建文件夹：

npm run build

• 现在为您在本地添加的内容安装gh-pages工具：

npm i gh-pages

现在您可以运行deploy命令，它将起作用。 希望对您有帮助。