初心者でも安心！Webpack Dev Serverを使ってReactJSアプリケーションを開発・公開する
2024-04-02
Webpack Dev Serverをポート80と0.0.0.0で実行して公開する方法
Webpack Dev Serverは、開発中にReactJSアプリケーションを簡単に実行できるツールです。デフォルトではポート8080で実行されますが、ポート80と0.0.0.0で実行することで、インターネット上の他のユーザーからアクセスできるように公開できます。
必要なもの
- Node.js
- ReactJS
- npm
- Webpack
手順
package.jsonファイルに以下の設定を追加します。
"devServer": {
"port": 80,
"host": "0.0.0.0",
"public": "public"
}
port: Webpack Dev Serverが使用するポート番号です。ここでは80に設定しています。host: Webpack Dev Serverが使用するホスト名です。ここでは0.0.0.0に設定しています。0.0.0.0はすべてのネットワークインターフェースを意味します。public: 静的ファイルが保存されているディレクトリです。ここではpublicディレクトリに設定しています。
- 以下のコマンドを実行してWebpack Dev Serverを起動します。
npm start
- ブラウザで
http://your-ip-address:80を開きます。your-ip-addressは自分のIPアドレスに置き換えます。
注意事項
- ポート80を使用するには、管理者権限が必要です。
- ファイアウォールが有効になっている場合は、ポート80を開放する必要があります。
補足
-
上記の手順でうまくいかない場合は、以下の方法を試してください。
--hostオプションをlocalhostに設定します。
用語解説
- Node.js: JavaScriptをサーバーサイドで実行するためのプラットフォーム
- ReactJS: ユーザーインターフェース構築のためのJavaScriptライブラリ
- npm: Node.jsのパッケージマネージャー
- Webpack: JavaScriptモジュールバンドラー
{
"name": "my-app",
"version": "1.0.0",
"description": "My React app",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack --prod"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^5.70.0",
"webpack-dev-server": "^4.7.4"
}
}
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
App.css
h1 {
color: red;
}
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
実行方法
npm installを実行して必要なパッケージをインストールします。- ブラウザで
http://localhost:80を開きます。
結果
ブラウザに "Hello, world!" と赤字で表示されます。
- 上記のコードは簡単なサンプルです。実際のアプリケーションでは、より多くのファイルやコードが必要になります。
Webpack Dev Serverをポート80と0.0.0.0で実行するその他の方法
方法1: webpack.config.jsファイルを使用する
module.exports = {
devServer: {
port: 80,
host: "0.0.0.0",
public: "public"
}
};
方法2: --hostと--portオプションを使用する
webpack-dev-server --host 0.0.0.0 --port 80
方法3: 環境変数を使用する
- 以下の環境変数を設定します。
WEBPACK_DEV_SERVER_HOST=0.0.0.0
WEBPACK_DEV_SERVER_PORT=80
- 上記の方法を使用する場合は、ポート80を使用する権限があることを確認してください。
Webpack Dev Serverをポート80と0.0.0.0で実行するには、いくつかの方法があります。自分に合った方法を選択してください。
node.js reactjs npm
