ローカルホスト:8080 Webサーバーが使用するポートです。それは ローカル開発サーバー で実行されます ポート 8080 。という場合に使用されます。 ローカルホスト:3000 そして ローカルホスト:5000 他のアプリケーションの実行で忙しいです。開発者は、localhost:8080 を使用して、開発されたアプリケーションのプレビューを確認し、実稼働環境にデプロイする前に、応答性やその他のパラメーターの要件に従ってテストします。
localhost:8080 を分解して理解してみましょう。
strをintに変換する方法
- ローカルホスト: これは、開発目的で使用しているホスト名または現在のデバイスを指します。
- 8080: これは、作成された開発サーバーがリッスンするように構成されているポート番号です。
以下の点を 1 つずつ理解して、localhost:8080 の概念をさらに詳しく見てみましょう。
マシン上で localhost:8080 サーバーを起動するにはどうすればよいですか?
localhost:8080 サーバーを起動するには、次のような localhost:8080 ポートで動作するサービスが必要です。 ReactJS 、 NodeJS 、 VueJS 、 AngularJS 、など。 上記のサービスのいずれかを使用している場合は、使用しているサービスに基づいて、IDE またはコマンド プロンプトのターミナル内にコマンドを入力する必要があります。
さまざまなサービスのコマンドを以下に示します。
- Node.js : マシンにnode.jsがインストールされている場合は、 ノードパッケージマネージャー(npm)。 次のようなツールを使用できます httpサーバー または ライブサーバー 以下のコマンドを使用して、localhost:8080 開発サーバーを起動します。
// Install tools globally npm install -g http-server/liver-server // Navigate to your project cd pathOfYourProject // Start the server at port:8080 http-server/live-server -p 8080>
- ReactJS : ReactJS の場合、サーバーを外部にインストールする必要はありません。を使用して反応アプリを作成している場合 反応アプリの作成 開発サーバーが自動的に作成されます。以下のコマンドを実行して、8080 ポートでサーバーを起動するだけです。
// Navigate to your project directory cd pathOfYourProject // By default, the port will be 3000, use below command to // run server at port 8080 $env:PORT=8080 ; npm start>
- AngularJS : Angular アプリには開発サーバーも付属しており、Angular CLI を使用して Angular アプリを作成し、以下のコマンドを実行するだけです。
// Navigate to your project directory cd pathOfYourProject // Start the server ng serve //By default, angular app run on port 4200 use below command to change it ng serve --port 8080>
開発サーバーを作成する方法 ReactJS ?
ReactJS で開発サーバーを作成して起動するには、次の手順に従います。
- ステップ1: を使用して反応アプリを作成します npm 作成-反応-アプリ コマンドの後にプロジェクトの名前を指定して実行します。
npm create-react-app projectName>
- ステップ2: 現在のプロジェクト フォルダーに移動します。
cd pathToYourProject>
- ステップ 3: 内にファイルを作成します 送信元 フォルダーに移動し、以下のコマンドを使用してサーバーを実行します。
$env:PORT=8080 ; npm start>
例: 以下のコードは、ファイルのテンプレート コードとして使用できます。
JavaScript
// App.js file> import React, { useState } from> 'react'> ;> const App = ({ prop }) =>{> > const [isHidden, setIsHidden] = useState(> false> )> > function> btnClickHandler() {> > setIsHidden((prev) =>!前);>>' > return> (> > 'center' }}>techcodeview.com { isHidden && コンピュータ サイエンス ポータルへようこそ。 } style={ {backgroundColor: 'green'、color: '#fff'、padding: '15px'、カーソル: 'pointer'、border: 'none'、borderRadius: ' 10px' }}> クリックしてその他のページ コンテンツを切り替えます { isHidden && このコンテンツは、ボタンのクリック イベントを使用して動的に切り替えられます。 } ); };デフォルトのアプリをエクスポートします。>> |
>
>
出力: