myems-web

Introduction

Web用户界面，用于MyEMS能源数据可视化

Web UI for MyEMS energy data visualization

Prerequisites

nginx-1.18.0 or later

Node.js 17.0.0 or later

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/

sudo mkdir -p /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

Download the latest current version Windows installer (.msi) 64-bit from https://nodejs.org/en/download/current/ Install Node.js with Setup Wizard

Test installation

node -v
npm version
npx -v

• Download all the necessary dependencies into the node_modules directory.

cd myems/myems-web
npm i --unsafe-perm=true --allow-root --legacy-peer-deps

• 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.

npm run scss

• 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.

npm start

Installation

Option 1: Install myems-web on Docker

In this section, you will install myems-web on Docker.

• Check and change the config file if necessary:

cd myems/myems-web
nano src/config.js

• Replace 127.0.0.1:8000 in nginx.conf with real HOST ip and port of myems-api

cd myems/myems-web
nano nginx.conf

• Copy source code to root directory

On Windows:

cp -r myems/myems-web c:\
cd c:\myems-web

On Linux:

cp -r myems/myems-web /
cd /myems-web

NOTE: You can safely ignore the command 'npm run build' in this section, because it is built into the Dockerfile

• Build a Docker image

docker buildx build --platform=linux/amd64 -t myems/myems-web .

• Run a Docker container

If run on Windows host, bind-mount nginx.conf to the container

docker run -d -p 80:80 -v c:\myems-web/nginx.conf:/etc/nginx/nginx.conf:ro --log-opt max-size=1m --log-opt max-file=2 --restart always --name myems-web myems/myems-web

If run on Linux host, bind-mount nginx.conf

docker run -d -p 80:80 -v /myems-web/nginx.conf:/etc/nginx/nginx.conf:ro --log-opt max-size=1m --log-opt max-file=2 --restart always --name myems-web myems/myems-web

• -d Run container in background and print container ID

• -p Publish a container's port(s) to the host, 80:80 (Host:Container) binds port 80 (right) of the container to TCP port 80 (left) of the host machine.

• -v If you use -v or --volume to bind-mount a file or directory that does not yet exist on the Docker host, -v creates the endpoint for you. It is always created as a directory. The ro option, if present, causes the bind mount to be mounted into the container as read-only.

• --log-opt max-size=2m The maximum size of the log before it is rolled. A positive integer plus a modifier representing the unit of measure (k, m, or g).

• --log-opt max-file=2 The maximum number of log files that can be present. If rolling the logs creates excess files, the oldest file is removed. A positive integer.

• --restart Restart policy to apply when a container exits

• --name Assign a name to the container

If you want to immigrate the image to another computer,

• Export image to tarball file

docker save --output myems-web.tar myems/myems-web

• Copy the tarball file to another computer, and then load image from tarball file

docker load --input .\myems-web.tar

Option 2: Install myems-web on Server with NGINX

• Install NGINX Server refer to http://nginx.org/en/docs/install.html

• Configure NGINX

sudo nano /etc/nginx/nginx.conf

In the 'http' section, add some directives:

http{
    client_header_timeout 600;
    client_max_body_size 512M;
    gzip on;
    gzip_min_length 512;
    gzip_proxied any;
    gzip_types *;
    gzip_vary on;
    proxy_buffering off;
    ...

}

Add a new 'server' section with directives as below:

  server {
      listen                 80;
      server_name     myems-web;
      location / {
          root    /var/www/myems-web;
          index index.html index.htm;
          # add try_files directive to avoid 404 error while refreshing pages
          try_files $uri  /index.html;
      }
      ## To avoid CORS issue, use Nginx to proxy myems-api to path /api 
      ## Add another location /api in 'server' and replace demo address http://127.0.0.1:8000/ with actual url
      location /api {
          proxy_pass http://127.0.0.1:8000/;
          proxy_connect_timeout 75;
          proxy_read_timeout 600;
          send_timeout 600;
      }
  }

Restart NGINX

sudo systemctl restart nginx

• Install MyEMS Web UI:

Check and change the config file if necessary:

cd myems/myems-web
sudo nano src/config.js

Build and Compress

sudo npm run build
tar czvf myems-web.tar.gz build

Install Upload the file myems-web.tar.gz to you web server. Note that the following path should be same as that was configured in nginx.conf.

tar xzf myems-web.tar.gz
sudo rm -r /var/www/myems-web
sudo mv build  /var/www/myems-web

Option 3: Install on Apache2 Server

• Install Apache2 Server

refer to https://httpd.apache.org/docs/2.4/install.html

• Configure Apache2

sudo vi /etc/apache2/ports.conf

Add a Listen

Listen 80

sudo vi /etc/apache2/sites-available/000-default.conf

Add a new 'VirtualHost' as below

<VirtualHost 127.0.0.1:80>
        ServerAdmin MyEMS-web
        DocumentRoot /var/www/myems-web
        
        <Directory "var/www/myems-web">
                Options FollowSymLinks
                AllowOverride All
                Require all granted
    			Header set Access-Control-Allow-Origin *
        </Directory>
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
        ProxyRequests Off
		ProxyPreserveHost On
		
		<Proxy *>
			Order Deny,Allow
			Allow from all
		</Proxy>
		ProxyPass /api http://127.0.0.1:8000/
		ProxyPassReverse /api http://127.0.0.1:8000/
</VirtualHost>

• Install MyEMS Web UI:

Check and change the config file if necessary:

cd myems/myems-web
sudo nano src/config.js

Build and Compress

cd myems/myems-web/
sudo npm run build
tar czvf myems-web.tar.gz build

Install Upload the file myems-web.tar.gz to you web server. Note that the following path should be same as that was configured in 000-default.conf

tar xzf myems-web.tar.gz
sudo rm -r /var/www/myems-web
sudo mv build  /var/www/myems-web

• avoid 404 error while refreshing pages

cd /var/www/myems-web
sudo vi .htaccess

Add a IfModule as below:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Configure rewrite.load

cd /etc/apache2/mods-enabled/
sudo vi rewrite.load

Add content as below

LoadModule rewrite_module /usr/lib/apache2/modules/mod_rewrite.so

Option 4: Install myems-web 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 compiling, merging and minifying all the source files as necessary and put them in the build/ folder.

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/myems-web/server.js

sudo node server.js