จะทำให้ webpack dev server ทำงานบนพอร์ต 80 และ 0.0.0.0 ได้อย่างไรเพื่อให้สาธารณชนเข้าถึงได้

ฉันยังใหม่กับโลกทั้งnodejs / reactjsดังนั้นขอโทษถ้าคำถามของฉันดูเหมือนโง่ ดังนั้นฉันเล่นรอบกับreactabular.js

เมื่อใดก็ตามที่ฉันทำnpm startมันจะทำงานต่อlocalhost:8080ไป

ฉันจะเปลี่ยนให้ทำงาน0.0.0.0:8080เพื่อให้เข้าถึงได้แบบสาธารณะได้อย่างไร ฉันพยายามอ่านซอร์สโค้ดใน repo ด้านบน แต่ไม่พบไฟล์ที่ใช้การตั้งค่านี้

นอกจากนี้ในการเพิ่มไปยัง - ฉันจะทำให้มันทำงานบนพอร์ตได้80อย่างไรถ้าเป็นไปได้?

บางอย่างเช่นนี้ใช้ได้สำหรับฉัน ฉันคาดเดาว่าสิ่งนี้จะเหมาะกับคุณ

เรียกใช้ webpack-dev โดยใช้สิ่งนี้

webpack-dev-server --host 0.0.0.0 --port 80

และตั้งค่านี้ใน webpack.config.js

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
     config.paths.demo
 ]

หมายเหตุถ้าคุณกำลังใช้การโหลดที่ร้อนคุณจะต้องทำเช่นนี้

เรียกใช้ webpack-dev โดยใช้สิ่งนี้

webpack-dev-server --host 0.0.0.0 --port 80

และตั้งค่านี้ใน webpack.config.js

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
    'webpack/hot/only-dev-server',
     config.paths.demo
 ],

....
plugins:[new webpack.HotModuleReplacementPlugin()]

นี่คือวิธีที่ฉันทำและดูเหมือนว่าจะทำงานได้ดี

ในไฟล์ webpack.config.js ของคุณให้เพิ่มสิ่งต่อไปนี้:

devServer: {
    inline:true,
    port: 8008
  },

เห็นได้ชัดว่าคุณสามารถใช้พอร์ตใดก็ได้ที่ไม่ขัดแย้งกับพอร์ตอื่น ฉันพูดถึงปัญหาความขัดแย้งเท่านั้นเพราะฉันใช้เวลาประมาณ 4 ชั่วโมง ต่อสู้กับปัญหาเพียงเพื่อค้นพบว่าบริการของฉันทำงานบนพอร์ตเดียวกัน

กำหนดค่า webpack (ใน webpack.config.js) ด้วย:

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}

ฉันยังใหม่ต่อการพัฒนา JavaScript และ ReactJS ฉันไม่สามารถหาคำตอบที่เหมาะกับฉันจนกว่าจะหาคำตอบได้ด้วยการดูโค้ดสคริปต์ตอบกลับ การใช้ ReactJS 15.4.1+ โดยใช้ react-สคริปต์คุณสามารถเริ่มต้นด้วยโฮสต์ที่กำหนดเองและ / หรือพอร์ตโดยใช้ตัวแปรสภาพแวดล้อม:

HOST='0.0.0.0' PORT=8080 npm start

หวังว่านี่จะช่วยผู้มาใหม่อย่างฉัน

ทำงานต่อไปนี้สำหรับฉัน -

1) ในการPackage.jsonเพิ่มนี้:

"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}

2) ในการwebpack.config.jsเพิ่มนี้ภายใต้วัตถุการกำหนดค่าที่คุณส่งออก:

devServer: {
    host: "GACDTL001SS369k", // Your Computer Name
    port: 8080
}

3) ตอนนี้กับประเภทอาคาร: npm run dev

4) หลังจากการคอมไพล์ # 3 และพร้อมเพียงตรงไปที่เบราว์เซอร์ของคุณและป้อนที่อยู่เป็น http://GACDTL001SS369k:8080/

แอปของคุณควรหวังว่าจะทำงานกับ URL ภายนอกที่ผู้อื่นสามารถเข้าถึงได้ในเครือข่ายเดียวกัน

PS: GACDTL001SS369kเป็นชื่อคอมพิวเตอร์ของฉันดังนั้นแทนที่ด้วยสิ่งที่เป็นของคุณในเครื่องของคุณ

หากคุณอยู่ในแอปพลิเคชันตอบโต้ที่สร้างขึ้นด้วย 'create-react-app' ให้ไปที่package.jsonและเปลี่ยน

"start": "react-scripts start",

ถึง ... ( unix )

"start": "PORT=80 react-scripts start",

หรือเพื่อ ... ( ชนะ )

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

ทำงานต่อไปนี้สำหรับฉันในไฟล์กำหนดค่า JSON:

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},

ฉันต่อสู้กับคำตอบอื่น ๆ (การตั้งค่าของฉันคือ: ฉันกำลังใช้งานnpm run devด้วย webpack 3.12.0 หลังจากสร้างโครงการของฉันโดยใช้vue init webpackบนกล่องเสมือน Ubuntu 18.04 ภายใต้ Windows ฉันมีคนจรจัดกำหนดค่าให้ส่งต่อพอร์ต 3000 ไปยังโฮสต์)

• น่าเสียดายที่การวางnpm run dev --host 0.0.0.0 --port 3000ไม่ได้ผล --- มันยังวิ่งอยู่บน localhost: 8080
• นอกจากนี้ไฟล์webpack.config.jsไม่มีอยู่และการสร้างไฟล์ก็ไม่ได้ช่วยอะไรเช่นกัน
• จากนั้นฉันก็พบว่าไฟล์การกำหนดค่าอยู่ในbuild/webpack.dev.conf.js(และbuild/webpack.base.conf.jsและbuild/webpack.prod.conf.js) process.envแต่ก็ไม่ได้มีลักษณะเหมือนความคิดที่ดีในการแก้ไขไฟล์เหล่านี้เพราะพวกเขาเป็นจริงอ่านโฮสต์และพอร์ตจาก

ดังนั้นฉันค้นหาเกี่ยวกับวิธีการตั้งค่าตัวแปร process.envและประสบความสำเร็จโดยใช้คำสั่ง:

HOST=0.0.0.0 PORT=3000 npm run dev

หลังจากทำสิ่งนี้ในที่สุดฉันก็ได้รับ "ใบสมัครของคุณทำงานที่นี่: http://0.0.0.0:3000 " และในที่สุดฉันก็สามารถดูได้โดยการเรียกดูlocalhost:3000จากเครื่องโฮสต์

แก้ไข: พบวิธีที่จะทำมันอีกอย่างก็คือโดยการแก้ไขโฮสต์ dev config/index.jsและพอร์ตใน

สำหรับฉัน: เปลี่ยนโฮสต์ฟังทำงาน:

.listen(3000, 'localhost', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

ถูกเปลี่ยนเป็น:

.listen(3000, '0.0.0.0', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

และเซิร์ฟเวอร์เริ่มฟัง 0.0.0.0

ฉันลองวิธีแก้ปัญหาข้างต้น แต่ก็ไม่มีโชค ฉันสังเกตเห็นบรรทัดนี้ใน package.json ของโครงการของฉัน:

 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

}

ฉันดูbin/webpack-dev-server.jsและพบบรรทัดนี้:

.describe("port", "The port").default("port", 8080)

ฉันเปลี่ยนพอร์ตเป็น 3000 บิตของวิธีเดรัจฉานบังคับ แต่มันก็ใช้ได้สำหรับฉัน

ใน package.json เปลี่ยนค่า "เริ่มต้น" ดังนี้

หมายเหตุ: เรียกใช้ $ sudo npm startคุณต้องใช้sudoเพื่อเรียกใช้สคริปต์ตอบสนองบนพอร์ต 80

สำหรับฉันรหัสนี้ทำงาน เพียงเพิ่มลงในpackage.jsonไฟล์ของคุณ:

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "webpack-dev-server --progress --colors",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},

และเรียกใช้สคริปต์ "สร้าง" โดยการเรียกใช้ npm run build

ฉันพยายามใช้พอร์ตอื่น:

PORT=80 npm run dev