Docker Nginx容器部署vue项目_docker nginx 访问 已经打包好的vue项目

Docker Nginx容器部署vue项目

1. 前提

Docker服务已部署

2. 下载nginx镜像

首先查看有没有nginx镜像

docker images
1

没有的情况下再进行下载

docker pull nginx
1

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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
1
2
3
4
5
6
7

编写好运行，vue应用容器就创建好了

5. vue项目上传

将打包好的vue项目dist上传至/home/mr-web/dist，整个dist上传的需要打到/home/mr-web目录就可以了