`npm run dev` 是一個長時間執行的程式

我收到了這個問題: 每次運行 npm run dev時,我得到的本地主機端口都不一樣。一開始是 3000,然後再次運行又得到了 3001,再次運行又得到了 3002。我們怎麼強制它使用 3000 端口? 在本地開發網站時,你可以使用 npm run dev 命令來啟動開發伺服器。 這是 Web 開發 中的常見做法,所有工具似乎都會使用這個程式,例如 Astro 和 Next.js 等等。 每次運行這個命令時,它都是一個長時間執行的進程,不會自動結束。 例如你運行 Astro 的開發伺服器,它會在 3000 端口上監聽: 然後你打開另一個終端,再次運行 npm run dev,這次它會在 3001 端口上運行: 現在你的應用程式同時在以下兩個地址上運行: http://localhost:3000 和 http://localhost:3001 你需要在終端中使用 ctrl-c 結束這兩個進程,以確保 3000 端口不被佔用,且在你嘗試打開 http://localhost:3000 時瀏覽器中不會顯示任何內容。 然後你可以再次運行 npm run dev,它會自動在空閒的 3000 端口上啟動。 每當你對項目進行更改(例如因為需要 npm install 某個套件),你需要使用 ctrl-c 結束開發伺服器,然後重新啟動它。

如何在本地主機上配置React應用程序的HTTPS

如果您使用create-react-app建立應用程序並在本地計算機上運行它,則默認情況下它將使用HTTP協議進行服務。 任何在生產環境運行的應用程序都將使用HTTPS,它是HTTP的安全版本。 在大多數情況下,您將輕而易舉地獲得HTTPS,特別是如果您使用像Netlify或Vercel這樣的現代平台來提供應用程序的話。 但是在本地環境中,情況會比我們希望的要複雜一些。 讓我們看看您可以如何實現這一點! 正如您所知,create-react-app應用程序是通過npm run start或簡單地通過npm start運行的,因為在package.json文件的scripts部分中,我們有這一行: "start": "react-scripts start" 將其更改為: "start": "HTTPS=true react-scripts start" 這將HTTPS環境變量設置為true值。 但這還不夠。 現在,我們還需要生成一個本地證書。這一步對於任何應用程序都是有效的,不僅僅限於create-react-app應用程序,但我將在本文中包含它作為參考。 注意:我在macOS上運行這些命令。Linux應該是同樣的。我對Windows不提供保證。 在項目的根文件夾中運行: openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365 然後運行: openssl rsa -in keytmp.pem -out key.pem 現在,您應該在文件夾中看到cert.pem和key.pem文件。 現在將package.json文件中的start腳本更改為: "start": "export HTTPS=true&&SSL\_CRT\_FILE=cert.pem&&SSL\_KEY\_FILE=key.pem react-scripts start", 如果您運行npm run start,並訪問https://localhost:3000(或您的應用程序使用的端口,如果不同-在我的情況下是3008),您應該會看到此警告消息: 要在macOS上解決此問題,請按照我的教程如何在macOS上安裝本地證書的說明進行操作。 一旦您這樣做了,您就可以正常查看使用SSL提供的應用程序了: