写给前端的Docker实战教程(12)_写给前端的Docker实战教程本篇文章详细

为了能够让镜像上传到服务器，你需要在hub.docker.com中注册一个账号，然后替换代码中的pea3nut/pea3nut-info:latest为用户名/包名:latest即可使用 Github 登录 Travis CI 后，在左边点击+加号添加自己的 Github 仓库后，需要移步到 Setting 为项目添加DOCKER_USERNAME和DOCKER_PASSWORD环境变量。这样保证我们可以秘密的登录 Docker Hub 而不被其他人看到自己的密码。如下图

然后需要添加 Dockerfile 文件来描述如何打包 Docker 镜像。

按照.travis.yml的命令次序，在打包镜像时，npm run build已经执行过了，项目产出已经有了。不必在 Docker 容器中运行npm install和npm run build之类的，直接复制文件即可：

FROM nginx

COPY ./dist/ /usr/share/nginx/html/

EXPOSE 80

Note: 过程虽然简单但是线条很长，建议本地多测试测试再进行git push

若你编译出的静态站点也是一个 SPA 单页应用，需要增加额外的 Nginx 配置来保证请求都能打到index.html。下边是我写的vhost.nginx.conf Nginx 配置文件，将不访问文件的请求全部重定向到/index.html：