Docker Nginx容器部署vue项目

Doc k e r Ngin x 容器 部署 vue 项目

文章 目录

Docker Nginx容器部署vue项目

1. 前提

2. 下载 nginx 镜像

docker images

没有的情况下再进行下载

docker pull nginx

3. 编写 nginx.conf 配置文件

在/home/mr-web/conf目录下创建nginx.conf配置文件

#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            # 这里重点关注以下：这里是容器内部地址
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
            error_page 404 index.html;
        }
        #和上面vue文件对应上，访问后端都加mr-api
        #这里看情况，有的vue项目访问后端接口不需要代理
        location /mr-api {
            #rewrite ^/rest/(.*) /$1 break;
            proxy_pass http://192.168.1.113:8081;
            #proxy_cookie_path / /rest;
            proxy_redirect off;
            #client_max_body_size 500m;
            #proxy_set_header X-Real-IP $remote_addr;
            #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

4. 编写 构建 命令

docker run 
-d -p 8080:80 
--name mr-web 
-v /home/mr-web/conf/nginx.conf:/etc/nginx/nginx.conf 
-v /home/mr-web/logs:/var/log/nginx 
-v /home/mr-web/dist:/usr/share/nginx/html 
nginx:latest