diff --git a/web/README.md b/web/README.md index 18b79969..57493eca 100644 --- a/web/README.md +++ b/web/README.md @@ -1,76 +1,63 @@ # MyEMS Web ## Introduction -MyEMS Web 用户界面，用于能源数据分析 -Providing Web UI for MyEMS users to analysis energy data +MyEMS Web 用户界面，用于查询能源报表 +Providing Web UI of MyEMS for viewing energy reports ## Prerequisites Node.js -nginx-1.18.0 or later - -## Running in Local environment -This project is scaffolded using Create React App. +## Running in Local Environment for Development * Install Node.js via binary archive on Linux Download Current Linux Binaries (x64) from https://nodejs.org/en/download/current/ -Unzip the binary archive to /usr/local/bin/nodejs, ```bash sudo mkdir -p /usr/local/lib/nodejs -sudo tar -xJvf node-v1x.x.x-linux-x64.tar.xz -C /usr/local/lib/nodejs +sudo tar -xJvf node-vxx.x.x-linux-x64.tar.xz -C /usr/local/lib/nodejs +sudo ln -s /usr/local/lib/nodejs/node-vxx.x.x-linux-x64/bin/node /usr/bin/node +sudo ln -s /usr/local/lib/nodejs/node-vxx.x.x-linux-x64/bin/npm /usr/bin/npm +sudo ln -s /usr/local/lib/nodejs/node-vxx.x.x-linux-x64/bin/npx /usr/bin/npx ``` -Using sudo to symlink node, npm, and npx into /usr/bin/: -```bash -sudo ln -s /usr/local/lib/nodejs/node-v1x.x.x-linux-x64/bin/node /usr/bin/node -``` -```bash -sudo ln -s /usr/local/lib/nodejs/node-v1x.x.x-linux-x64/bin/npm /usr/bin/npm -``` -```bash -sudo ln -s /usr/local/lib/nodejs/node-v1x.x.x-linux-x64/bin/npx /usr/bin/npx -``` -Test installation using +Test installation ```bash node -v -``` -```bash npm version -``` -```bash npx -v ``` -* Open the “myems/web” directory with your cmd or terminal +* Download all the necessary dependencies into the node_modules directory. ```bash cd myems/web sudo npm i --unsafe-perm=true --allow-root ``` - -This command will download all the necessary dependencies for falcon in the node_modules directory. -* If you modified any scss files, then you need to compile SCSS +* If you modified any scss files then you need to compile SCSS, else you can safely ignore this step. Run below command in your project directory to compile scss. ```bash sudo npm run scss ``` -* Run 'sudo npm start' +* Starting the Development Server A local web server will start at http://localhost:3000. We are using webpack and webpack-serve to automatically detect file changes. So, if you edit and save a file, your browser will automatically refresh and preview the change. +``` +sudo npm start +``` -## Creating a Production Build +## Install Production Build Option 1: on Node.js Web Server * Run below command in your project directory to make the Production build. +This will create an optimized production build by compililing, merging and minifying all the source files as necessary and put them in the build/ folder. ```bash sudo npm run build ``` +* Run the production build locally at http://localhost:80. +If you want to listen on other port, change it in myems/web/server.js +``` +sudo node server.js +``` -This will create an optimized production build by compililing, merging and minifying all the source files as necessary and put them in the build/ folder. - -You can run 'node server.js' to run the production build locally at http://localhost:5000. - -## Option 1: Install Production Build on NGINX Server +## Install Production Build Option 2: on NGINX Server (Highly Recommended) * Install NGINX Server - refer to http://nginx.org/en/docs/install.html * Configure NGINX @@ -116,16 +103,16 @@ Restart NGINX sudo systemctl restart nginx ``` -* Download myems: +* Download MyEMS: ```bash cd ~ git clone https://github.com/MyEMS/myems.git ``` -* Install myems-web : +* Install MyEMS Web UI: Check and change the config file if necessary: ```bash -cd ~/myems/web +cd myems/web sudo nano src/config.js ``` Build and Compress @@ -142,7 +129,7 @@ sudo rm -r /var/www/html/web sudo mv build /var/www/html/web ``` -## Option 2: Install Production Build on Apache2 Server +## Install Production Build Option 3: on Apache2 Server * Install Apache2 Server refer to https://httpd.apache.org/docs/2.4/install.html @@ -174,21 +161,21 @@ Add a new 'VirtualHost' as below ``` -* Download myems: +* Download MyEMS: ```bash cd ~ git clone https://github.com/MyEMS/myems.git ``` -* Install myems-web : +* Install MyEMS Web UI: Check and change the config file if necessary: ```bash -cd ~/myems/web +cd myems/web sudo nano src/config.js ``` Build and Compress ```bash -cd ~/myems/web/ +cd myems/web/ sudo npm run build tar czvf myems-web.tar.gz build ``` @@ -199,4 +186,4 @@ tar czvf myems-web.tar.gz build tar xzf myems-web.tar.gz sudo rm -r /var/www/web sudo mv build /var/www/web -``` \ No newline at end of file +``` diff --git a/web/package-lock.json b/web/package-lock.json index 3952689e..b7fe83ae 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -30,6 +30,7 @@ "echarts-for-react": "^2.0.16", "element-resize-event": "^3.0.3", "emoji-mart": "^3.0.0", + "express-rate-limit": "^5.3.0", "fuse.js": "^6.4.3", "google-maps-react": "^2.0.6", "i18next": "^19.6.3", @@ -8599,6 +8600,11 @@ "node": ">= 0.10.0" } }, + "node_modules/express-rate-limit": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-5.3.0.tgz", + "integrity": "sha512-qJhfEgCnmteSeZAeuOKQ2WEIFTX5ajrzE0xS6gCOBCoRQcU+xEzQmgYQQTpzCcqUAAzTEtu4YEih4pnLfvNtew==" + }, "node_modules/express/node_modules/array-flatten": { "version": "1.1.1", "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" @@ -28780,6 +28786,11 @@ } } }, + "express-rate-limit": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-5.3.0.tgz", + "integrity": "sha512-qJhfEgCnmteSeZAeuOKQ2WEIFTX5ajrzE0xS6gCOBCoRQcU+xEzQmgYQQTpzCcqUAAzTEtu4YEih4pnLfvNtew==" + }, "ext": { "version": "1.4.0", "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==", diff --git a/web/package.json b/web/package.json index 59399009..439b31e3 100644 --- a/web/package.json +++ b/web/package.json @@ -25,6 +25,7 @@ "echarts-for-react": "^2.0.16", "element-resize-event": "^3.0.3", "emoji-mart": "^3.0.0", + "express-rate-limit": "^5.3.0", "fuse.js": "^6.4.3", "google-maps-react": "^2.0.6", "i18next": "^19.6.3", diff --git a/web/server.js b/web/server.js index 2c37d479..11de3884 100644 --- a/web/server.js +++ b/web/server.js @@ -21,6 +21,6 @@ app.use(limiter); app.get('*', function(req, res) { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); -app.listen(process.env.PORT || 5000, function() { - console.log(`Frontend start on http://localhost:5000`); +app.listen(process.env.PORT || 80, function() { + console.log(`Frontend start on http://localhost:80`); });