Jak określić port, aby uruchomić projekt oparty na tworzeniu aplikacji?

Mój projekt opiera się na tworzeniu aplikacji . npm startlub yarn startdomyślnie uruchomi aplikację na porcie 3000 i nie ma opcji podania portu w pliku package.json.

Jak mogę w tym przypadku podać wybrany port? Chcę uruchomić dwa z tego projektu jednocześnie (do testowania), jeden w porcie, 3005a drugi jest3006

Jeśli nie chcesz ustawiać zmiennej środowiskowej , inną opcją jest modyfikacja scriptsczęści pliku package.json z:

"start": "react-scripts start"

do

Linux (testowany na Ubuntu 14.04 / 16.04) i MacOS (testowany przez @ aswin-s na MacOS Sierra 10.12.4):

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

lub (być może) bardziej ogólne rozwiązanie @IsaacPak

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

Rozwiązanie Windows @JacobEnsor

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

cross-env lib działa wszędzie. Zobacz Aguinaldo Possatto odpowiedź szczegóły

Aktualizacja ze względu na popularność mojej odpowiedzi: obecnie wolę używać zmiennych środowiskowych zapisanych w .envpliku (przydatne do przechowywania zestawów zmiennych dla różnych deploykonfiguracji w wygodnej i czytelnej formie). Nie zapomnij dodać *.envdo, .gitignorejeśli nadal przechowujesz swoje sekrety w .envplikach. Oto wyjaśnienie, dlaczego użycie zmiennych środowiskowych jest lepsze w większości przypadków. Oto wyjaśnienie, dlaczego przechowywanie tajemnic w środowisku jest złym pomysłem.

Oto inny sposób na wykonanie tego zadania.

Utwórz .envplik w katalogu głównym projektu i podaj tam numer portu. Lubić:

PORT=3005

Możesz użyć cross-env do ustawienia portu, a będzie on działał w systemach Windows, Linux i Mac.

yarn add -D cross-env

następnie w pakiecie.json łącze początkowe może wyglądać tak:

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

Możesz podać nazwę zmiennej środowiskowej, PORTaby określić port, na którym serwer będzie działał.

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

Dla moich użytkowników systemu Windows odkryłem sposób, aby zmienić port ReactJS, aby działał na dowolnym porcie, który chcesz. Przed uruchomieniem serwera przejdź do

 node_modules/react-scripts/scripts/start.js

W nim wyszukaj wiersz poniżej i zmień numer portu na żądany port

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

I jesteś gotowy iść.

Utwórz plik o nazwie .envw głównym katalogu oprócz package.jsoni ustaw PORTzmienną na żądany numer portu.

Na przykład:

.env

PORT=4200

Po prostu zaktualizuj trochę w webpack.config.js:

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

następnie biegnij npm startponownie.

W swoim package.jsonprzejdź do skryptów i użyj --port 4000lub set PORT=4000, podobnie jak w poniższym przykładzie:

package.json (Windows):

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

package.json (Ubuntu):

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

Działa to zarówno w systemie Windows, jak i Linux

pakiet.json

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

ale prawdopodobnie wolisz utworzyć .env z PORT = 3006 zapisanym w nim

Zmiana mojego pliku package.json również "start": "export PORT=3001 && react-scripts start"działała dla mnie i korzystam z systemu macOS 10.13.4

Podsumowując, mamy trzy podejścia do osiągnięcia tego:

1. Ustaw zmienną środowiskową o nazwie „PORT”
2. Zmodyfikuj klucz „start” w części „scripts” pliku package.json
3. Utwórz plik .env i umieść w nim konfigurację PORT

Najbardziej przenośne będzie ostatnie podejście. Ale jak wspomniano w innym plakacie, dodaj .env do .gitignore, aby nie przesyłać konfiguracji do publicznego repozytorium źródłowego.

Więcej informacji: ten artykuł

domyślną konfigurację portu można znaleźć przy uruchomieniu aplikacji

yourapp / scripts / start.js

przewiń w dół i zmień port na cokolwiek chcesz

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

mam nadzieję, że to może ci pomóc;)

Spróbuj tego:

npm start port=30022

Byłoby miło móc określić port inny niż 3000jako parametr wiersza poleceń lub zmienną środowiskową.

W tej chwili proces jest dość zaangażowany:

1. Biegać npm run eject
2. Poczekaj, aż to się skończy
3. Edytuj scripts/start.jsi znajdź / zamień na 3000dowolny port, którego chcesz użyć
4. Edytuj config/webpack.config.dev.jsi zrób to samo
5. npm start

W systemie Windows można to zrobić na 2 sposoby.

1. W obszarze „\ node_modules \ reaguj-scripts \ scripts \ start.js” wyszukaj „DEFAULT_PORT” i dodaj pożądany numer portu.

   Np .: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;

2. W pakiecie.json dodaj poniższy wiersz. „start”: „ustaw PORT = 9999 && start-scripts start” Następnie uruchom aplikację za pomocą NPM start. Uruchomi aplikację w porcie 9999.

Co powiesz na podanie numeru portu podczas wywoływania polecenia bez potrzeby zmiany czegokolwiek w kodzie aplikacji lub plikach środowiska? W ten sposób można uruchomić i obsługiwać tę samą bazę kodu z kilku różnych portów.

lubić:

$ export PORT=4000 && npm start

Możesz umieścić numer portu, który chcesz, zamiast powyższej przykładowej wartości 4000.

Jeśli już to zrobiłeś npm run eject, przejdź do skryptów / start.js i zmień port w const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(w tym przypadku 3000) na dowolny żądany port.

Zmiana domyślnego portu w aplikacji React

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

Przejdź do tej linii:

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

Zmień numer portu na swój numer portu

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

Na przykład:

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

Zapisz i wyjdź