vue-cli-plugin-docker-nginx-diff-proxy - npm Package Compare versions

Comparing version 0.0.9 to 1.0.0

README-CH.md

+# vue-cli-plugin-docker-nginx-diff-proxy
+[中文](https://github.com/ashen9/vue-cli-plugin-docker-nginx-diff-proxy/blob/master/README-CH.md) | [English](https://github.com/ashen9/vue-cli-plugin-docker-nginx-diff-proxy/blob/master/README.md)
+> 此插件用于构建不同环境反向代理的docker镜像
+
+这是一个vue cli插件，它使用nginx添加了一个最小的docker部署（**~19mb**+静态文件）来为vue应用提供服务。
+### 安装
+
+```
+vue add vue-cli-plugin-docker-nginx-diff-proxy
+```
+
+这将自动添加现有VUE CLI项目所需的所有文件。
+                                                                          
+  
+1. 在package.json中，将添加一些脚本:
+    * docker-build-dev  
+        >_构建开发环境_
+    * docker-build-qa  
+        >_构建测试环境_
+    * docker-build-pro  
+        >_构建生产环境_
+    * docker-run-dev  
+        >_构建开发环境并且通过3000端口启动一个容器_
+    * docker-run-qa  
+        >_构建测试环境并且通过3000端口启动一个容器_
+    * docker-run-pro
+        >_构建生产环境并且通过3000端口启动一个容器_  
+
+2. nginx文件夹将添加到根目录中，它包含四个文件:
+    * default-dev.conf  
+        >_nginx在开发环境中的配置文件_
+    * default-qa.conf  
+        >_nginx在测试环境中的配置文件_ 
+    * default-pro.conf  
+        >_nginx在生产环境中的配置文件_
+    * gzip.conf  
+        >_Gzip压缩默认是开启的，你可以根据需要自行关闭
+
+3. 在vue.conf.js中，一个dockernginxproxy属性将被添加到pluginoptions中
+    * proxy_prefix  
+        >_反向代理的前缀，默认为'/proxy'_ 
+    * env_prefix  
+        >_不同环境的代理地址，可以随意添加环境_      
+        - dev  
+            _开发环境代理地址，默认为“http://localhost:8080”_
+        - qa  
+            _测试环境代理地址，默认为“http://localhost:8080”_
+        - pro  
+            _生产环境代理地址，默认为“http://localhost:8080”_
+                        
+4. Dockerfile将添加到根目录
+    * Dockerfile  
+        >_根据env参数动态加载不同环境nginx配置_
+ 
+### 生成并运行本地Docker容器
+
+```
+npm run docker-run-<ENV>
+```
+
+这将构建一个Docker容器并在端口“3000”上运行它。如果要在不同的端口上运行，请更改“package.json”中的运行脚本
+
+```
+  "docker-run-<ENV>": "docker run docker-build-<ENV> && docker run -d -p <PORT>:80 <your project>-<ENV>"
+```
+
+请确保已在您的计算机上安装并运行[Docker]（https://docs.docker.com/install/）。
+
+### 调整nginx配置
+
+您会发现自动生成的三个nginx配置文件是相同的，这是为了增加灵活性，您可以在任何环境中随意添加和修改任何nginx配置。您还可以添加更多环境的nginx模板以支持更多环境。

generator.js

@@ -5,3 +5,4 @@ module.exports = (api, options, rootOptions) => {
   let scripts = {};
-  let dockerNginxProxy = {};
+  let env_prefix = {};
+  const proxy_prefix = '/proxy';
   envEntity.map((e) => {
@@ -12,3 +13,3 @@ const key = `docker-build-${e}`;
     scripts[key2] = `npm run ${key} && docker run -d -p 3000:80 ${APPNAME}-${e}`;
-    dockerNginxProxy[e] = 'http://localhost:8080';
+	  env_prefix[e] = 'http://localhost:8080';
   });
@@ -19,3 +20,6 @@ api.extendPackage({
       pluginOptions: api.hasPlugin('vue-cli-plugin-docker-nginx-diff-proxy') ? {} : {
-        dockerNginxProxy: dockerNginxProxy
+        dockerNginxProxy: {
+	        proxy_prefix,
+	        env_prefix
+        }
       }
@@ -22,0 +26,0 @@ }

package.json

@@ -28,3 +28,3 @@ {
   },
-  "version": "0.0.9"
+  "version": "1.0.0"
 }

README.md

@@ -1,5 +0,5 @@
-# vue-cli-plugin-docker-nginx
+# vue-cli-plugin-docker-nginx-diff-proxy
+[中文](https://github.com/ashen9/vue-cli-plugin-docker-nginx-diff-proxy/blob/master/README-CH.md) | [English](https://github.com/ashen9/vue-cli-plugin-docker-nginx-diff-proxy/blob/master/README.md)
+> This plug-in is to build a docker image of multiple environment reverse proxy
 
-> having a node container running an express server seemed kind of overkill for serving a built vue-app
-
 This is a vue-cli-plugin that adds a minimal docker deployment (**~19MB** + static files) using nginx to serve your vue-app
@@ -10,11 +10,50 @@
 ```
-vue add vue-cli-plugin-docker-nginx
+vue add vue-cli-plugin-docker-nginx-diff-proxy
 ```
 
-This will automatically add all the files needed to your existing vue-cli project
+This will automatically add all the files needed to your existing vue-cli project  
+1. in your package.json, will add some scripts:
+    * docker-build-dev  
+        >_Build development environment_
+    * docker-build-qa  
+        >_Build test environment_
+    * docker-build-pro  
+        >_Build production environment_
+    * docker-run-dev  
+        >_Build development environment and Start with 3000 port_
+    * docker-run-qa  
+        >_Build test environment and Start with 3000 port_
+    * docker-run-pro
+        >_Build production environment and Start with 3000 port_  
 
+2. a nginx folder will be added to the root, It contains four files
+    * default-dev.conf  
+        >_Configuration files for nginx in development environment_
+    * default-qa.conf  
+        >_Configuration files for nginx in test environment_ 
+    * default-pro.conf  
+        >_Configuration files for nginx in production environment_
+    * gzip.conf  
+        >_Gzip is on by default,You can close it if you don't need it
+
+3. in your vue.conf.js,A dockerNginxProxy property will be added to pluginOptions
+    * proxy_prefix  
+        >_Prefix for reverse proxy, default is '/proxy'_ 
+    * env_prefix  
+        >_Proxy address of different environment, you can add environment at will_      
+        - dev  
+            _Proxy address of development enviroment, default is 'http://localhost:8080'_
+        - qa  
+            _Proxy address of test enviroment, default is 'http://localhost:8080'_
+        - pro  
+            _Proxy address of production enviroment, default is 'http://localhost:8080'_
+                        
+4. a Dockerfile will be added to the root
+    * Dockerfile  
+        >_Dynamically load nginx configuration according to Env parameters_
+ 
 ### Build and run local docker container
 
 ```
-npm run docker
+npm run docker-run-<ENV>
 ```
@@ -25,3 +64,3 @@
 ```
-  "docker": "docker build . -t vue-app && docker run -d -p <PORT>:80 vue-app"
+  "docker-run-<ENV>": "docker run docker-build-<ENV> && docker run -d -p <PORT>:80 <your project>-<ENV>"
 ```
@@ -33,2 +72,4 @@
 
-With the default settings nginx listens on port `80` and is configured to route all requests back to `index.html`. This way you can safely use `history`-mode in your `vue-router`. These settings can be changed in `default.conf` in you projects root.
+You will find that the three nginx configuration files generated automatically are the same,
+This is to increase flexibility,You can add and modify any configuration at will in different environments.
+You can also add templates to support more environments.

template/Dockerfile

@@ -9,5 +9,5 @@ # stage-1: build dist folder
 RUN npm install --silent
+COPY . .
 #RUN npm install cnpm
 #RUN cnpm install --silent
-COPY . .
 RUN npm run build-${MODE}
@@ -21,3 +21,3 @@
 #COPY nginx/default.conf /etc/nginx/default.conf
-COPY nginx/default-${ENV}.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /usr/src/app/nginx/default-${ENV}.conf /etc/nginx/conf.d/default.conf
 COPY --from=build /usr/src/app/dist /usr/share/nginx/html

template/nginx/default-dev.conf

@@ -11,5 +11,3 @@ server {
 
-        location /proxy {
-            proxy_pass   http://localhost:8080;
-        }
+        # don't delete me , you will build fialed ###
 
@@ -21,2 +19,1 @@ error_page   500 502 503 504  /50x.html;
 }
-

template/nginx/default-pro.conf

@@ -11,5 +11,3 @@ server {
 
-        location /proxy {
-            proxy_pass  http://localhost:8080;
-        }
+        # don't delete me , you will build fialed ###
 
@@ -21,2 +19,1 @@ error_page   500 502 503 504  /50x.html;
 }
-

template/nginx/default-qa.conf

@@ -11,5 +11,3 @@ server {
 
-        location /proxy {
-            proxy_pass   http://localhost:8080;
-        }
+        # don't delete me , you will build fialed ###
 
@@ -21,2 +19,1 @@ error_page   500 502 503 504  /50x.html;
 }
-

WebpackPlugin.js

@@ -5,2 +5,22 @@ const FS = require('fs');
 //读取文件，并且替换文件中指定的字符串
+let taskConfFile = function(filePath,targetStr,text){
+  FS.readFile(filePath,function(err,data){
+    if(err){
+      return err;
+    }
+    let str = data.toString();
+    if (str.includes(text)) {
+      var regExp = new RegExp(`${text}.*\}`, 'g');
+
+      str = str.replace(regExp, targetStr);
+      console.log(str);
+      FS.writeFile(filePath, str, function (err) {
+        if (err) return err;
+      });
+    } else {
+      resertFile(filePath, targetStr);
+    }
+  });
+}
+//读取文件，并且替换文件中指定的字符串
 let replaceFile = function(filePath,sourceRegx,targetStr){
@@ -18,2 +38,8 @@ FS.readFile(filePath,function(err,data){
 }
+//向文件倒数第二行插入
+let resertFile = function (filePath, targetStr) {
+  const data = FS.readFileSync(filePath, 'utf8').split('\n');
+  data.splice(data.length - 2, 0, targetStr)
+  FS.writeFileSync(filePath, data.join('\n'), 'utf8')
+}
 
@@ -23,3 +49,4 @@
   constructor (options = {}) {
-    this.options = options;
+    this.env_prefix = options.env_prefix;
+    this.proxy_prefix = options.proxy_prefix;
   }
@@ -39,3 +66,2 @@
             let path = nginxPath + '/' + item;
-            console.log(path);
             //判断文件的状态，用于区分文件名/文件夹
@@ -50,6 +76,10 @@ FS.stat(path, (err, status) => {
                 if (item.match(new RegExp(/\.conf$/))) {
-                  Object.keys(this.options).map((key) => {
+                  Object.keys(this.env_prefix).map((key) => {
                     if (item.includes(key)) {
-                      console.log(this.options[key]);
-                      replaceFile(path, /http\:\/\/localhost\:8080/g, this.options[key]); // ^ 以什么开头
+                      // replaceFile(path, /http\:\/\/localhost\:8080/g, this.env_prefix[key]); // ^ 以什么开头
+                      // replaceFile(path, /location \/proxy/g, `location ${this.proxy_prefix[key]}`); // ^ 以什么开头
+                      const text = `location ${this.proxy_prefix}`
+                      const insertText = `      ${text} { proxy_pass  ${this.env_prefix[key]} }\n`;
+                      taskConfFile(path, insertText, text);
+                      // resertFile(path, insertText);
                     }
@@ -56,0 +86,0 @@ });

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Improved metrics

Total package byte prevSize

16638

56.09%

Number of package files

14

7.69%

Lines of code

161

25.78%

Number of low quality alerts

1

-50%

Number of lines in readme file

73

128.13%

No dependency changes