为什么在上传到 AWS Amplify 时为 api 密钥创建 React App .env 不起作用

Question

我在我的反应应用程序中为 api 密钥添加了一个 dotenv 文件，我遵循了本教程： https ://www.pluralsight.com/guides/hiding-secret-keys-in-create-react-app 以及这个： https ://create-react-app.dev/docs/adding-custom-environment-variables/我给它加上前缀 REACT_APP_API_KEY。 该应用程序在本地运行，但在上传到 AWS 时不起作用。

这是加载时获取：

useEffect(() => {
    const fetchData = async () => {
      try {
        const url = `https://api.themoviedb.org/3/search/movie/?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=all`;
        const response = await fetch(url);
        const data = await response.json();
        setMovieList(data.results);
      } catch (err) {
        console.log(err);
      }
    };
    fetchData();
  }, []);

这是搜索提交按钮处理程序：

const handleSearch = useCallback(async () => {
    try {
      const url = `https://api.themoviedb.org/3/search/movie/?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${query}&page=1&include_adult=false`;
      const response = await fetch(url);
      const jsondata = await response.json();
      await setMovies(jsondata.results);
    } catch (err) {
      console.log(err);
    }
  }, [query]);

这是本地工作应用程序：

这是在 AWS 中上传的应用程序

Answer 1

通常，每当您部署使用Create React App (CRA)创建的 React 应用程序时，您都会运行yarn build ，然后将build目录上传到某个托管解决方案。 之后没有实际运行的进程二进制文件（从 React 的角度来看）。

在开发过程中，CRA 的工具链（Webpack 开发服务器）是一个正在运行的进程，负责处理内容的实际服务和构建，这意味着它可以访问.env的变量。 一旦你运行了yarn build ，CRA 就会放手，所有的执行都由 CRA 不知道的其他服务器处理。 任何确实存在的变量都在构建时硬注入到构建的应用程序中， 引用 HTML 中的环境变量。

如果您需要根据部署更改这些变量，您应该有另一个.env文件用于您的构建工具或在您的构建脚本中使它们常规环境变量可用。 几乎每个持续部署 (CI) 工具都具有此功能。