Làm cách nào để chỉ định một cổng để chạy dự án dựa trên ứng dụng tạo phản ứng?

Dự án của tôi dựa trên ứng dụng tạo phản ứng . npm starthoặc yarn starttheo mặc định sẽ chạy ứng dụng trên cổng 3000 và không có tùy chọn chỉ định một cổng trong gói.json.

Làm thế nào tôi có thể chỉ định một cổng lựa chọn của tôi trong trường hợp này? Tôi muốn chạy hai dự án này cùng một lúc (để thử nghiệm), một trong cổng 3005và một là3006

Nếu bạn không muốn đặt biến môi trường , một tùy chọn khác là sửa đổi scriptsphần của gói.json từ:

"start": "react-scripts start"

đến

Linux (được thử nghiệm trên Ubuntu 14.04 / 16.04) và MacOS (được thử nghiệm bởi @ aswin-s trên MacOS Sierra 10.12.4):

"start": "PORT=3006 react-scripts start"

hoặc (có thể) giải pháp tổng quát hơn của @IsaacPak

"start": "export PORT=3006 react-scripts start"

Giải pháp Windows @JacobEnsor

"start": "set PORT=3006 && react-scripts start"

lib chéo env hoạt động ở khắp mọi nơi. Xem câu trả lời của Aguinaldo Possatto để biết chi tiết

Cập nhật do tính phổ biến của câu trả lời của tôi: Hiện tại tôi thích sử dụng các biến môi trường được lưu trong.env tệp (hữu ích để lưu trữ các bộ biến cho các deploycấu hình khác nhau ở dạng thuận tiện và dễ đọc). Đừng quên thêm *.envvào .gitignorenếu bạn vẫn đang lưu trữ bí mật của mình trong .envcác tệp. Dưới đây là giải thích tại sao sử dụng các biến môi trường tốt hơn trong hầu hết các trường hợp. Dưới đây là lời giải thích tại sao lưu trữ bí mật trong môi trường là ý tưởng tồi.

Đây là một cách khác để hoàn thành nhiệm vụ này.

Tạo một .envtập tin tại gốc dự án của bạn và chỉ định số cổng ở đó. Giống:

PORT=3005

Bạn có thể sử dụng cross-env để đặt cổng và nó sẽ hoạt động trên Windows, Linux và Mac.

yarn add -D cross-env

sau đó trong gói.json, liên kết bắt đầu có thể như thế này:

"start": "cross-env PORT=3006 react-scripts start",

Bạn có thể chỉ định một biến môi trường có tên PORTđể chỉ định cổng mà máy chủ sẽ chạy.

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell

Đối với các cửa sổ của tôi, tôi đã phát hiện ra một cách để thay đổi cổng ReactJS để chạy trên bất kỳ cổng nào bạn muốn. Trước khi chạy máy chủ, hãy truy cập

 node_modules/react-scripts/scripts/start.js

Trong đó, tìm kiếm dòng bên dưới và thay đổi số cổng thành cổng mong muốn của bạn

 var DEFAULT_PORT = process.env.PORT || *4000*;

Và bạn tốt để đi.

Tạo một tệp có tên .envtrong thư mục chính bên cạnh package.jsonvà đặt PORTbiến thành số cổng mong muốn.

Ví dụ:

.env

PORT=4200

Chỉ cần cập nhật một chút trong webpack.config.js:

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
}

rồi npm startlại chạy .

Trong của bạn package.json, đi đến các tập lệnh và sử dụng --port 4000hoặc set PORT=4000, như trong ví dụ dưới đây:

package.json (Các cửa sổ):

"scripts": {
    "start": "set PORT=4000 && react-scripts start"
}

package.json (Ubuntu):

"scripts": {
    "start": "export PORT=4000 && react-scripts start"
}

Điều này hoạt động trên cả Windows và Linux

pack.json

"scripts": {
    "start": "(set PORT=3006 || export PORT=3006) && react-scripts start"
    ...
}

nhưng bạn có thể thích tạo .env với PORT = 3006 được viết bên trong nó

Thay đổi trong tệp "start": "export PORT=3001 && react-scripts start"pack.json cũng có hiệu quả với tôi và tôi đang dùng macOS 10.13.4

Tóm lại, chúng tôi có ba cách tiếp cận để thực hiện điều này:

1. Đặt biến môi trường có tên "PORT"
2. Sửa đổi khóa "bắt đầu" trong phần "tập lệnh" của gói.json
3. Tạo một tệp .env và đặt cấu hình PORT trong đó

Cách di động nhất sẽ là cách tiếp cận cuối cùng. Nhưng như được đề cập bởi người đăng khác, hãy thêm .env vào .gitignore để không tải cấu hình lên kho lưu trữ nguồn công cộng.

Thêm chi tiết: bài viết này

bạn có thể tìm thấy cấu hình cổng mặc định khi bắt đầu ứng dụng của bạn

yourapp / scripts / start.js

cuộn xuống và thay đổi cổng thành bất cứ điều gì bạn muốn

const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 4000;

hy vọng điều này có thể giúp bạn;)

Thử cái này:

npm start port=30022

Sẽ thật tuyệt khi có thể chỉ định một cổng khác ngoài 3000 là tham số dòng lệnh hoặc biến môi trường.

Ngay bây giờ, quá trình này khá liên quan:

1. Chạy npm run eject
2. Đợi nó kết thúc
3. Chỉnh sửa scripts/start.jsvà tìm / thay thế3000 bằng bất kỳ cổng nào bạn muốn sử dụng
4. Chỉnh sửa config/webpack.config.dev.jsvà làm tương tự
5. npm start

Trong Windows, nó có thể được thực hiện theo 2 cách.

1. Trong "\ node_modules \ Reac-scripts \ scripts \ start.js", tìm kiếm "DEFAULT_PORT" và thêm số cổng mong muốn.

   Ví dụ: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;

2. Trong gói.json, nối dòng dưới đây. "start": "set PORT = 9999 && Reac-scripts start" Sau đó khởi động ứng dụng bằng NPM start. Nó sẽ khởi động ứng dụng trong cổng 9999.

Làm thế nào về việc đưa ra số cổng trong khi gọi lệnh mà không cần thay đổi bất cứ điều gì trong mã ứng dụng hoặc tệp môi trường của bạn? Bằng cách đó, có thể chạy và phục vụ cùng một cơ sở mã từ một số cổng khác nhau.

giống:

$ export PORT=4000 && npm start

Bạn có thể đặt số cổng bạn thích thay cho giá trị mẫu 4000ở trên.

Trong trường hợp bạn đã hoàn thành npm run eject, hãy chuyển đến scripts / start.js và thay đổi cổng trong const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(3000 trong trường hợp này) thành bất kỳ cổng nào bạn muốn.

Thay đổi cổng mặc định trên React-App

cd /your/project/project_name/node_modules/react-scripts/scripts/
vim start.js

Đi đến dòng này:

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

Thay đổi số cổng với số cổng của bạn

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

Ví dụ:

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3100;

Lưu và thoát