如何从其他设备访问create-react-app项目及GitHub Pages部署相关问题

GitHub Pages加载data.json失败问题 #

GitHub Pages是纯静态托管服务，仅支持托管静态资源文件，不支持运行你本地监听在3001端口的后端服务，你当前代码硬编码请求http://localhost:3001/days，部署到线上后这个地址不存在，自然无法获取数据。
如果你的data.json是不需要修改的静态数据：

• 将文件放到项目public目录下，比如public/data/days.json
• 请求路径改为相对路径，不需要带域名和端口，比如useFetch("/data/days.json")，如果你的项目部署在GitHub Pages的子路径下，还要在路径前加上子路径前缀，比如你的项目访问路径是xxx.github.io/voca_app，就写useFetch("/voca_app/data/days.json")

其他电脑访问你的React应用方法 #

分两种场景：

• 本地开发阶段：确保所有设备在同一局域网下，启动React开发服务时加上--host 0.0.0.0参数，启动命令为npm start --host 0.0.0.0，查看你本机的局域网IP（Windows执行ipconfig，Mac/Linux执行ifconfig获取形如192.168.x.x的地址），其他设备直接访问http://你的局域网IP:3000即可，注意后端服务也要同步监听0.0.0.0，前端请求地址改为你的局域网IP而非localhost。
• 公网访问阶段：直接将打包后的静态资源部署到GitHub Pages，用平台分配的域名即可访问，但注意必须将后端接口部署到公网可访问的服务器，不能继续用本地接口。

代码适配修改说明 #

仅修改硬编码的URL不够，建议用环境变量区分不同环境的接口地址，避免来回修改代码：

1. 在项目根目录新建两个环境变量文件：
   • .env.development（开发环境生效）：写入REACT_APP_API_URL=http://localhost:3001
   • .env.production（生产打包时生效）：写入REACT_APP_API_URL=你的公网后端接口地址
2. 代码中所有请求地址统一替换为环境变量，你给出的代码修改后示例如下：

import { useHistory } from "react-router-dom";
import useFetch from "../hooks/useFetch";

export default function CreateDay() {
  const days = useFetch(`${process.env.REACT_APP_API_URL}/days`);
  const history = useHistory();

  function addDay() {
    fetch(`${process.env.REACT_APP_API_URL}/days/`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json', 
      },
      body: JSON.stringify({ 
        day: days.length + 1,
      }),
    })
    .then( response => {
      if(response.ok) {
        alert("생성이 완료 되었습니다");
        history.push("/voca_app");
      }
    });
  }

  return (
  <div>
    <h3>현재 일수: {days.length}일</h3>
    <button onClick={addDay}>Day 추가</button>
  </div>
  );
}

3. 额外注意：你的代码用到了POST请求修改数据，GitHub Pages本身不支持后端逻辑，所以如果要保留新增Day的功能，必须将后端服务部署到公网；如果不需要修改数据，仅做静态展示，可以把所有数据提前写到静态JSON文件中，去掉POST相关逻辑，就不需要额外部署后端服务。
4. 你用到了react-router-dom，如果项目部署在GitHub Pages的子路径下，需要给BrowserRouter组件添加basename属性，比如<BrowserRouter basename="/voca_app">，否则路由跳转可能失效。

内容的提问来源于stack exchange，提问作者user16890895