added installation on docker to readme of web ui

README.md

@@ -99,7 +99,9 @@ administrator@myems.io
 ```
 </details>
 
-### Docker-compose 安装
+### Docker-Compose 
+
+除了上面的分步安装方式，也可以使用docker-compose命令一键安装
 
 #### 前提
 
@@ -120,16 +122,14 @@ administrator@myems.io
 | 数据库账号 | root        |
 | 数据库密码 | !MyEMS1        |
 
+#### Docker-Compose安装
 
-
+1.  克隆仓库
-#### 安装
-
-- 1.克隆仓库
 ```
 git clone https://gitee.com/myems/myems.git 
 ```
 
-- 2.数据库导入 (否则数据库没有用户信息，网页无法验证登录)
+2.  数据库导入 (否则数据库没有用户信息，网页无法验证登录)
 
 ```
 cd myems/database/install
@@ -146,18 +146,18 @@ mysql -u root -p < myems_user_db.sql
 注： 如有问题，详情可查看"database/README.md"
 
 
-- 3.修改配置
+3.  修改配置
 
 注：如“配置”所述，这里假定的**主机IP为 192.168.0.1，数据库IP为 192.168.0.2，数据库账号为：root,数据库密码:!MyEMS1,用户应该修改为自己对应的主机IP,数据库IP,数据库账号，数据库密码**
 
-**3.1** 修改nginx.conf里的API配置
+3.1  修改nginx.conf里的API配置
 ```
 cd myems
 sed -i 's/127.0.0.1:8000/192.168.0.1:8000/g' admin/nginx.conf
 sed -i 's/127.0.0.1:8000/192.168.0.1:8000/g' web/nginx.conf
 ```
 
-**3.2** 复制example.env为.env并修改.env里的数据库IP，账号，密码
+3.2  复制example.env为.env并修改.env里的数据库IP，账号，密码
 ```
 # 这里以修改数据库IP为例，如果数据库账号密码也不同，请根据自己需求替换.env里的账号密码
 cd myems
@@ -173,7 +173,7 @@ cp myems-normalization/example.env myems-normalization/.env
 sed -i 's/127.0.0.1/192.168.0.2/g' myems-normalization/.env 
 ```
 
-**3.3** 测试数据库是否可以正确连接
+3.3  测试数据库是否可以正确连接
 ```
 cd myems
 python3 myems-api/test_mysql.py
@@ -181,7 +181,7 @@ python3 myems-api/test_mysql.py
 注：如果测试通过，继续下一步操作，否则请修改.env配置。
 
 
-- 4.web打包 (Web UI 为React项目，需要打包为产品文件)
+4.  Web UI 打包 (Web UI 为React项目，需要打包为产品文件)
 
 ```
 cd myems/web
@@ -189,8 +189,7 @@ npm install
 npm run build
 ```
 
-
+5. 运行docker-compose命令
-- 5.docker-compose一键安装
 
 ```
 cd myems
@@ -198,8 +197,7 @@ docker-compose up -d
 ```
 
 
-- 6.测试
+6.  测试
-
 
 |       | 网址                    | 结果             |
 | ----- | ----------------------- | ---------------- |

web/README.md

@@ -1,11 +1,14 @@
-# MyEMS Web
+# myems-web
 
 ## Introduction
 MyEMS Web 用户界面，用于查询能源报表
 Providing Web UI of MyEMS for viewing energy reports
 
 ## Prerequisites
-Node.js
+
+nginx-1.18.0 or later
+
+Node.js 16.0.0 or later
 
 ## Running in Local Environment for Development
 
@@ -43,19 +46,45 @@ We are using webpack and webpack-serve to automatically detect file changes. So,
 sudo npm start
 ```
 
-## Install Production Build Option 1: on Node.js Web Server
+## Installation
-*   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.
+### 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:
+```bash
+cd myems/web
+sudo nano src/config.js
+```
+* Download all the necessary dependencies into the node_modules directory.
+```bash
+sudo npm i --unsafe-perm=true --allow-root --legacy-peer-deps
+```
+* Build for production with NPM
 ```bash
 sudo npm run build
 ```
-*   Run the production build locally at http://localhost:80.
+* Build a Docker image
-If you want to listen on other port, change it in myems/web/server.js
+```bash
+cd myems/web
+docker build -t myems/myems-web .
 ```
-sudo node server.js
+* Run a Docker container
+```bash
+docker run -d -p 80:80 --restart always --name myems-web myems/myems-web
 ```
 
-## Install Production Build Option 2:  on NGINX Server (Highly Recommended)
+-d		Run container in background and print container ID
+
+-p		Publish a container's port(s) to the host, 8001:8001 (Host:Container) binds port 8001 (right)  of the container to TCP port 8001 (left) of the host machine.
+
+--restart	Restart policy to apply when a container exits
+
+--name		Assign a name to the container
+
+
+### Option 2: Install myems-web on NGINX Server
 
 *   Install NGINX  Server
 refer to http://nginx.org/en/docs/install.html
@@ -105,11 +134,6 @@ Restart NGINX
 sudo systemctl restart nginx
 ```
 
-*   Download MyEMS:
-```bash
-cd ~
-git clone https://github.com/MyEMS/myems.git
-```
 *   Install MyEMS Web UI:
 
   Check and change the config file if necessary:
@@ -131,7 +155,7 @@ sudo rm -r /var/www/html/web
 sudo mv build  /var/www/html/web
 ```
 
-## Install Production Build Option 3: on Apache2 Server
+### Option 3: Install on Apache2 Server
 *   Install Apache2 Server
 
 refer to https://httpd.apache.org/docs/2.4/install.html
@@ -163,11 +187,6 @@ Add a new 'VirtualHost' as below
 </VirtualHost>
 ```
 
-*   Download MyEMS:
-```bash
-cd ~
-git clone https://github.com/MyEMS/myems.git
-```
 *   Install MyEMS Web UI:
 
   Check and change the config file if necessary:
@@ -214,3 +233,15 @@ sudo vi rewrite.load
 ```bash
 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 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
+```