编译打包

npm build 后的 dist 目录 就我们需要放到 nginx 服务器上的。

安装docker

Ubuntu 系统、或者centos 系统 上先把 docker 环境安装好。

配置nginx配置文件

主要配置 location / 和 location /api 这个地方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;


    location / {
        root   /app;
        index  index.html;
    }

    location /api {
        proxy_pass http://gmall-h5-api.atguigu.cn;
    }

}




启动容器

1
2
3
docker run --rm -it --name nginx -p 80:80 vue-demo:0.1


然后浏览器 访问 http://192.168.1.111/ 地址就行，默认端口80.

构建 app 镜像

docker build -t vue-demo:0.1 . 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
FROM nginx

WORKDIR /app

MAINTAINER bright.ma


COPY ./dist /app

ADD ./default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80