docker通过nginx镜像部署静态文件

docker通过nginx镜像部署项目的实质，就是将（项目）静态文件和及其依赖（nginx）制作成镜像(image)，然后通过镜像生成容器的过程。这样，通过运行容器就能运行服务，而且image可以方便分享。

准备工作包括：需要部署的静态文件，自定义的nginx配置文件，Dockerfile文件（制作镜像）。

1. 获得打包后的静态文件

vue项目与react项目的打包方式不一样，基本上执行yarn build类似的指令就可以构建打包，获得dist/目录（内部保存的就是静态文件）。一般而言，开发环境中node_module依赖包特别多，打包过程只有用到的依赖进入了静态文件。所以开发环境中项目可能几个GB，但打包完成的静态文件只占几十MB。

2. 准备default.conf文件

=== default.conf文件（替换nginx镜像中默认的配置文件） ===

server {
    listen       3000; //项目中的端口号(真实使用#注释)
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;   //配置url映射的真实位置
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

3. 编写Dockerfile文件

=== Dockerfile文件 ===

FROM nginx:1.14.0 //使用Nginx作为基础镜像（从镜像仓库拉取）

MAINTAINER ldj //作者

RUN rm /etc/nginx/conf.d/default.conf //删除nginx 默认配置(后边路径说明nginx镜像以linux系统作为基础镜像)

ADD default.conf /etc/nginx/conf.d/ //添加我们自己的配置 default.conf 在下面

COPY dist/  /usr/share/nginx/html/  //把刚才生成dist文件夹下的文件copy到nginx下面去

4. 创建镜像

# 当前文件结构

├── default.conf
├── dist
└── Dockerfile

# docker打包
# -t指定镜像名称:版本号（tag）
docker image build -t biggfish:1.0

# 生成容器
# 末尾千万不要加 /bin/bash 否则端口不能正常映射
docker container run -p 3000:3000 -itd --name biggfishContainer biggfish:1.0

5. 访问测试

通过 本机ip:3000 访问

如果能看到项目首页：成功