将 React App 从 Codesandbox 部署到 Github Pages答案

【问题标题】：Deploying React App from Codesandbox to Github Pages将 React App 从 Codesandbox 部署到 Github Pages
【发布时间】：2020-02-22 20:59:04
【问题描述】：

我按照youtube tutorial 将我的 React 应用程序部署到 github 页面。我在代码沙箱中制作了我的反应应用程序，并将沙箱导出到我的github。我下载了 node.js、npm 和 git。

我的文件夹结构：用户 > 测试 > package-lock.json + andair-master > (inside andair-master) node_modules + build > (inside build) 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”不起作用。如果有人能告诉我我是否遗漏了一步，那将不胜感激。谢谢。

【问题讨论】：

标签： reactjs git github github-pages

【解决方案1】：

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

你必须先解决这些问题。

依赖 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"
  ]
}

现在您可以运行 deploy 脚本

npm run deploy

在这一步之后，验证是否创建了一个名为 gh-pages 的新分支

点击github中的设置标签

向下滚动到 GitHub Pages 部分并将您的分支切换到 gh-pages 分支。

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

【讨论】：

谢谢。下载缺少的依赖项后，我终于收到了“编译成功”的消息。通过 git bash 登录到我的 github 帐户后，我终于得到了一个“gh-pages”分支，但我收到了 404 错误。我尝试查看您的 Forked 存储库，一切似乎都与我的相似。我的 Github 页面源是“gh-pages”，所以我不确定为什么会收到这个 404 错误。如果您对此事有任何建议，将不胜感激。谢谢。
试过这个网址吗？ develijahlee.github.io/andair。我可以看到部署的应用程序 :)
啊我现在看到了，猜它只是在加载。非常感谢您的帮助！
好的，你很高兴 :) 。我正在删除我的示例 repo 和 gh 页面
再次运行 npm run deploy。您正在将更改推送到 master 但实际代码在 gh-pages 分支中。应该是这样的

【解决方案2】：

以下是代码中的部署脚本：

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

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

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

npm run build

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

npm i gh-pages

现在您可以运行 deploy 命令，它会工作。希望对您有所帮助。

【讨论】：