Introduction to docker: deployment of Vue and visual interface, with ngxin configuration attached

This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details ：8 Yuegengwen challenge

For small partners in back-end development , You can only understand the publishing of background services , But if you build a personal project or do private work . Front office deployment is also an inseparable topic . This article describes how to publish vue Previous item .

The landlord here mainly depends on nginx Release vue.

1. Install release vue

A cliche , First you need to use docker install nginx.

1. Look at the mirror image

docker search nginx  
 Copy code 

2. Pull the mirror image

docker pull nginx 
 Copy code 

3. Look at the mirror image

docker images
 Copy code 

4.vue pack

here , We need to vue pack , You need to execute the packaging command , If there are no special modifications, please execute ：

npm run build
 Copy code 

5. preparation

1. New folder

Separately build

• /usr/local/nginx/system： Front desk bag storage location
• /usr/local/nginx/conf： The location of the configuration file
• /usr/local/nginx/log： Log file storage location

2. mount vue package

newly build /usr/local/nginx/system Folder （ Mount as host to docker The folder of the container ）, stay vue Get... From the packaged file dist file , And put the folder in /usr/local/nginx/system in .

3. mount nginx To configure

take nginx.conf Copied to the /usr/local/nginx/conf in , Attached below nginx To configure .

worker_processes  1;
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
 
    # Specify the log path  
    access_log /var/log/nginx/access.log; 
    error_log /var/log/nginx/error.log;
 
    sendfile        on;
 
    keepalive_timeout  65;
 
    server {
        listen       80;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location ^~/system { # When the access path is  ip/system when   Will visit /usr/share/nginx/system/dist Under the static file   Then the static file will call the interface  ajax complete 
	            alias /usr/share/nginx/system/dist; # Appoint dist File storage path 
            	    index index.html;
		        try_files $uri $uri/ /system/index.html;
        }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
 Copy code 

5. Running the mirror

docker run --name nginx -d -p 80:80 --net=host -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf  -v /usr/local/nginx/log:/var/log/nginx  -v /usr/local/nginx/system:/usr/share/nginx/system nginx
 Copy code 

Parameters on ：（ps The folder of the host needs to be created ） docker run --name nginx： Container name

• -d -p 80:80 Put in the container 80 port , Specifies the to the host 80 port .
• --net=host： With host Mode start
• -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf ： The host machine /usr/local/nginx/conf/nginx.conf File mapped to container /etc/nginx/nginx.conf, In fact, it is based on /usr/local/nginx/conf/nginx.conf Start for profile .
• -v /usr/local/nginx/log:/var/log/nginx： The host machine /usr/local/nginx/log Mapped to container /var/log/nginx Deposit log journal , And nginx Use it with .
• -v /usr/local/nginx/system:/usr/share/nginx/system ： The host machine /usr/local/nginx/system Folders and containers /usr/share/nginx/system mapping , take vue Of dist File put in /usr/local/nginx/system, In the container nginx.conf Specify the directory to jump to /usr/share/nginx/system.
• nginx Image name

The above mapping process is , When it starts /usr/local/nginx/conf/nginx.conf It will be copied to /etc/nginx/nginx.conf in , Empathy docker Under the container log The file will also be mapped to /usr/local/nginx/log,/usr/share/nginx/system Will map to docker Container of /usr/share/nginx/system in .

2. summary

nginx Release vue The principle is when you are web Browser input xxxx/system when （ Paths can be configured in a variety of ways ）,nginx Will listen web Of 80 port . If the path is configured with interception , Then, you will get... From the configuration file path （ Configuration above alias /usr/share/nginx/system/dist）. So you can get vue The foreground static file of .

At the same time, if it is configured as above, it will also be configured in a global way , Configure single sign on .