วิธีระบุพอร์ตเพื่อเรียกใช้โปรเจ็กต์ create-react-app

โครงการของฉันอยู่บนพื้นฐานของการสร้างปฏิกิริยาแอป npm startหรือyarn startโดยค่าเริ่มต้นจะเรียกใช้แอปพลิเคชันบนพอร์ต 3000และไม่มีตัวเลือกในการระบุพอร์ตใน package.json

ฉันจะระบุพอร์ตที่เลือกได้ในกรณีนี้ได้อย่างไร ฉันต้องการเรียกใช้สองโครงการนี้พร้อมกัน (สำหรับการทดสอบ) หนึ่งรายการในพอร์ต3005และอื่น ๆ คือ3006

หากคุณไม่ต้องการตั้งค่าตัวแปรสภาพแวดล้อมตัวเลือกอื่นคือแก้ไขscriptsส่วนของ package.json จาก:

"start": "react-scripts start"

ถึง

Linux (ทดสอบบน Ubuntu 14.04 / 16.04) และMacOS (ทดสอบโดย @ aswin-s บน MacOS Sierra 10.12.4):

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

หรือ (อาจจะ) โซลูชันทั่วไปเพิ่มเติมโดย @IsaacPak

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

โซลูชันWindows @JacobEnsor

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

lib-env libทำงานได้ทุกที่ ดูรายละเอียดคำตอบสำหรับAguinaldo Possatto

อัปเดตเนื่องจากความนิยมของคำตอบของฉัน:ปัจจุบันฉันต้องการใช้ตัวแปรสภาพแวดล้อมที่บันทึกไว้ใน.envไฟล์ (มีประโยชน์ในการจัดเก็บชุดตัวแปรสำหรับdeployการกำหนดค่าต่างๆในรูปแบบที่สะดวกและอ่านได้) อย่าลืมเพิ่ม*.envเข้าไป.gitignoreหากคุณยังคงเก็บความลับของคุณไว้ใน.envไฟล์ นี่คือคำอธิบายว่าทำไมการใช้ตัวแปรสภาพแวดล้อมจึงดีกว่าในกรณีส่วนใหญ่ นี่คือคำอธิบายว่าทำไมการจัดเก็บความลับในสภาพแวดล้อมเป็นความคิดที่ไม่ดี

นี่เป็นอีกวิธีหนึ่งในการทำงานนี้ให้สำเร็จ

สร้าง.envไฟล์ที่รูทโปรเจ็กต์ของคุณและระบุหมายเลขพอร์ตที่นั่น ชอบ:

PORT=3005

คุณสามารถใช้cross-envเพื่อตั้งค่าพอร์ตและมันจะทำงานบน Windows, Linux และ Mac

yarn add -D cross-env

จากนั้นใน package.json ลิงก์เริ่มต้นอาจเป็นดังนี้:

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

คุณสามารถระบุตัวแปรสภาพแวดล้อมที่มีชื่อPORTเพื่อระบุพอร์ตที่เซิร์ฟเวอร์จะทำงาน

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

สำหรับผู้ใช้ windows ของฉันฉันค้นพบวิธีการเปลี่ยนพอร์ต ReactJS ให้ทำงานบนพอร์ตใด ๆ ที่คุณต้องการก่อนที่จะรันเซิร์ฟเวอร์ไปที่

 node_modules/react-scripts/scripts/start.js

ในนั้นค้นหาบรรทัดด้านล่างและเปลี่ยนหมายเลขพอร์ตเป็นพอร์ตที่คุณต้องการ

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

และคุณจะไปดี

สร้างไฟล์ที่มีชื่อ.envในไดเรกทอรีหลักด้านข้างpackage.jsonและตั้งค่าPORTตัวแปรเป็นหมายเลขพอร์ตที่ต้องการ

ตัวอย่างเช่น:

.env

PORT=4200

เพียงอัปเดตเล็กน้อยในwebpack.config.js:

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

จากนั้นเรียกใช้npm startอีกครั้ง

ในของคุณpackage.jsonไปที่สคริปต์และใช้--port 4000หรือset PORT=4000เช่นในตัวอย่างด้านล่าง:

package.json (Windows):

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

package.json (Ubuntu):

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

ใช้ได้ทั้ง Windows และ Linux

package.json

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

แต่คุณชอบที่จะสร้าง. env ด้วย PORT = 3006 เขียนไว้ข้างใน

การเปลี่ยนแปลงในไฟล์ package.json ของฉัน"start": "export PORT=3001 && react-scripts start"ก็เหมาะกับฉันเช่นกันและฉันใช้ macOS 10.13.4

เพื่อสรุปเรามีสามวิธีในการทำให้สิ่งนี้สำเร็จ:

1. ตั้งค่าตัวแปรสภาพแวดล้อมชื่อ "PORT"
2. ปรับเปลี่ยนคีย์ "เริ่มต้น" ภายใต้ส่วน "สคริปต์" ของ package.json
3. สร้างไฟล์. env และกำหนดค่า PORT ไว้

อุปกรณ์พกพาที่ดีที่สุดจะเป็นวิธีการสุดท้าย แต่ดังที่ผู้โพสต์คนอื่น ๆ กล่าวเพิ่มให้. env เป็น. gitignore เพื่อไม่ให้อัพโหลดการกำหนดค่าไปยังแหล่งเก็บข้อมูลสาธารณะ

รายละเอียดเพิ่มเติม: บทความนี้

คุณสามารถค้นหาการกำหนดค่าพอร์ตเริ่มต้นที่เริ่มแอพของคุณ

yourapp / scripts / start.js

เลื่อนลงและเปลี่ยนพอร์ตเป็นสิ่งที่คุณต้องการ

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

หวังว่านี่อาจช่วยคุณได้)

ลองสิ่งนี้:

npm start port=30022

มันจะดีถ้าคุณสามารถระบุพอร์ตอื่นนอกเหนือจาก3000พารามิเตอร์บรรทัดคำสั่งหรือตัวแปรสภาพแวดล้อม

ตอนนี้กระบวนการมีส่วนเกี่ยวข้องค่อนข้าง:

1. วิ่ง npm run eject
2. รอให้เสร็จ
3. แก้ไขscripts/start.jsและค้นหา / แทนที่3000ด้วยพอร์ตใด ๆ ที่คุณต้องการใช้
4. แก้ไขconfig/webpack.config.dev.jsและทำเช่นเดียวกัน
5. npm start

ใน Windows สามารถทำได้ 2 วิธี

1. ภายใต้ "\ node_modules \ react-สคริปต์ \ สคริปต์ \ start.js" ค้นหา "DEFAULT_PORT" และเพิ่มหมายเลขพอร์ตปรารถนา

   เช่น: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;

2. ใน package.json ให้เติมบรรทัดด้านล่าง "start": "set PORT = 9999 && react-script start" จากนั้นเริ่มแอปพลิเคชันโดยใช้ NPM start มันจะเริ่มแอพพลิเคชั่นในพอร์ต 9999

วิธีการเกี่ยวกับการให้หมายเลขพอร์ตในขณะที่เรียกใช้คำสั่งโดยไม่จำเป็นต้องเปลี่ยนแปลงอะไรในรหัสแอปพลิเคชันหรือไฟล์สภาพแวดล้อมของคุณ? วิธีนี้ทำให้สามารถเรียกใช้และให้บริการรหัสฐานเดียวกันจากหลาย ๆ พอร์ตได้

ชอบ:

$ export PORT=4000 && npm start

คุณสามารถใส่หมายเลขพอร์ตที่คุณต้องการแทนที่ค่าตัวอย่าง4000ด้านบน

ในกรณีที่คุณทำnpm run ejectไปแล้วให้ไปที่สคริปต์ / start.js และเปลี่ยนพอร์ตในconst DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(3000 ในกรณีนี้) เป็นพอร์ตใดก็ได้ที่คุณต้องการ

การเปลี่ยนพอร์ตเริ่มต้นบน React-App

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

ไปที่บรรทัดนี้:

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

เปลี่ยนหมายเลขพอร์ตด้วยหมายเลขพอร์ตของคุณ

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

ตัวอย่างเช่น:

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

บันทึกและออก