docker配合nginx部署vue

1、获取nginx镜像

docker pull nginx

2、在项目目录下创建default.conf,写入一下配置

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

3、在项目下创建Dockerfile文件

FROM nginx //该镜像是基于nginx:latest镜像构建的
MAINTAINER zouzou //添加说明
RUN rm /etc/nginx/conf.d/default.conf //删除目录下的default.conf文件
ADD default.conf /etc/nginx/conf.d/ //将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置
COPY dist/ /usr/share/nginx/html/ //将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下

4、设置忽略文件.dockerignore

**/node_modules

5、构建docker镜像

docke build -t my-first-app .

注意事项：不能漏掉.，-t是给镜像命名，.(点)是基于当前目录的Dockerfile来构建镜像
6、启动docker容器

docker run -d -p 9090:80 --restart=always --name my-first-app my-first-app

docker run：基于镜像启动一个容器
-d：后台方式启动
-p 9090:80: 端口映射，将宿主机的9090端口映射到容器的80端口
–name：容器名，我起的叫my-first-app
my-first-app：要启动的镜像名称
–restart=always 跟随docker容器启动
7、查看，访问
docker ps

看到对应的容器即成功