为Facebook/create-react-app生产构建手动设置端口和主机

Question

我使用Facebook/Create-React-App创建了一个React应用程序，并成功地在http://localhost:5000上运行了生产构建。

我的问题是是否有办法在此生产构建中更改5000端口？

根据高级配置，生产环境下无法更改HOST和PORT，只能在开发环境下进行更改。具体内容请参考：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration。

以下是我的package.json：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build"
  }

这是我的.env文件。

##
HOST=127.0.0.1
PORT=8008
## PUBLIC_URL=http://myexamplesite.lk/
##

REACT_APP_ROOT_BASE_URL=https://myexamplesite.lk/api/
REACT_APP_ROOT_BASE_URL_META=http://myexamplesite.lk/

- Viraj

Answer 1

来自React文档：

“端口可以使用-p或--port标志进行调整。”

serve -p 7000 -s build

- Idan Dagan

---

感谢您的回答，我已经像这样完成了它：“deploy”：“serve -p 8080 -s build”，但是每次更改端口时我都必须添加它，或者我必须像“deploy：dev”：“serve -p 8080 -s build”，“deploy：qa”：“serve -p 9090 -s build”一样为每个环境声明。我的问题是如何使用.env文件来设置它。 - Viraj

Answer 2

create-react-app列出了可以在运行npm run build时使用的所有.env文件。 要在本地生产构建中更改端口，您可以创建一个名为.env.production.local的文件并设置所需的端口：

##
HOST=127.0.0.1
PORT=5000
## PUBLIC_URL=http://myexamplesite.lk/
##

REACT_APP_ROOT_BASE_URL=https://myexamplesite.lk/api/
REACT_APP_ROOT_BASE_URL_META=http://myexamplesite.lk/

- Tony Nguyen