Linux server docker nginx deploys vue front-end program

My Docker column

https://blog.csdn.net/weixin_45580378/category_12276045.html

1. I won’t talk about vue packaging

2. Upload the vue packaged file to the html of nginx
3. Modify the nginx configuration file
The following is my configuration file for reference

user  root;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    
    
    worker_connections  1024;
}


http {
    
    
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;
	#第一个程序
	server {
    
    
		listen       80; #监听端口
		listen  [::]:80;
		server_name  localhost; #这个不用改

		location / {
    
    
			root   /usr/share/nginx/html/ui; #这里是跳转的路径 特别注意 这里的路径不是linux你上传的路径 而是你启动nginx启动时候映射得docker内部路径
			index  index.html index.htm; #显示的index页面
		}
		
		location /api/ {
    
     
			proxy_pass   http://101.42.249.162:8005/api/; #这里是代理后端的路径
		}
	
		error_page   500 502 503 504  /50x.html;
		location = /50x.html {
    
    
			root   /usr/share/nginx/html;
		}
	}
	#第二个程序
	server {
    
    
		listen       8092;
		listen  [::]:8092;
		server_name  localhost;

		location / {
    
    
			root   /usr/share/nginx/html/ms;
			index  index.html index.htm;
		}
		
		location /api/ms/ {
    
    
			proxy_pass   http://101.42.249.162:8097/api/ms/;
		}
	
		error_page   500 502 503 504  /50x.html;
		location = /50x.html {
    
    
			root   /usr/share/nginx/html;
		}
	}

    sendfile        on;

    keepalive_timeout  65;

    include /etc/nginx/conf.d/*.conf;
}

Remember to map your front-end port to the host. When you access the port on the host, it will be mapped to the port in docker, will be monitored by nginx, and will be mapped to the specified page by nginx