linux 服务器 docker nginx 部署 vue 前端 程序

我的Docker专栏

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

1.vue 打包 这个就不说了

2.把vue打包好的文件上传到nginx的html中
3.修改nginx配置文件
下面是我的配置文件，供参考

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;
}

记得把你前端的端口映射到主机上，当你访问主机上的端口时，才会映射到docker里面的端口，才会被nginx监听到，才会让nginx映射到指定的页面