heroku 带有React的Laravel环境变量:这是一个好的做法吗?

4dc9hkyq  于 2022-11-13  发布在  React
关注(0)|答案(1)|浏览(114)

我有一个React应用程序,它向Laravel后端发出API请求。
我的应用程序托管在Heroku上(我不知道它是否为我的问题改变了一些东西)。
我想为这些请求区分生产环境和本地环境。
在我的“welcome.blade.php”中,我添加了以下 meta标记:

<meta name="app_env" content="<?php echo env("APP_ENV") ?>" />

APP_ENV包含“生产”或“本地”。
在我的React应用程序中,我有以下脚本:

export let urlApi = (document.querySelector("[name=app_env]").content === "production" ) ?
"https://laravel-react.herokuapp.com/api"
:
"http://localhost/laravel_react/public/api"
;

我在每个需要它的组件中导入这个函数:

import { urlApi } from './../findUrlApi';
// .....
return fetch(`${urlApi}/products`,{
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer "+localStorage.getItem("token")
        }
      })

它工作正常。
但我的问题是,这是一个好的实践吗?(我是React的初学者)。

mctunoxg

mctunoxg1#

我不认为这是一个好的做法。环境变量(如APP_ENV和API URL)不应该驻留在源代码中。
但是,您可以像往常一样将它们存储在Laravel .env文件中,但要在密钥前加上前缀MIX_。例如:MIX_API_URL=http://localhost.env文件中的每个MIX_*变量都将向React应用程序公开。然后,您可以通过调用process.env.MIX_API_URL从React应用程序获取MIX_API_URL值。
更新的Laravel .env文件

...
MIX_APP_ENV=production (or local)   # Should be same as APP_ENV
MIX_API_LOCAL_URL=http://localhost/laravel_react/public/api
MIX_API_PRODUCTION_URL=https://laravel-react.herokuapp.com/api

在需要它的React组件中

const { MIX_APP_ENV, MIX_API_LOCAL_URL, MIX_API_PRODUCTION_URL } = process.env;
const apiUrl = MIX_APP_ENV === 'local'? MIX_API_LOCAL_URL: MIX_API_PRODUCTION_URL;

return fetch(apiUrl + '/products', { ... });

如果调用process.env.MIX_API_URL不起作用,并且您正在运行npm run watch,请尝试重新启动npm run watch并硬重新加载浏览器。
参考文献

  1. Laravel文档-编译资源(混合)-环境变量

相关问题