vue-cli-plugin-docker-nginx-diff-proxy

中文 | English

This plug-in is to build a docker image of multiple environment reverse proxy

This is a vue-cli-plugin that adds a minimal docker deployment (~19MB + static files) using nginx to serve your vue-app

prepare: you must have a 'build-proxy' Scripts in your package.json , and 'build-proxy' can build your app to request <proxy_prefix>

Installation

vue add vue-cli-plugin-docker-nginx-diff-proxy

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-run-<ENV>

This will build a docker container and run it on port 3000. If you want to run it on different port change the run script in your package.json to

  "docker-run-<ENV>": "docker run docker-build-<ENV> && docker run -d -p <PORT>:80 <your project>-<ENV>"

Please make sure to have docker installed and running on your machine.

Tweak nginx config

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.