起因
一直想上手一下
docker，奈何自己摆脱不了懒惰的天性。就在之前有个docker的线下技术活动，就刚好学习一下。
如何实践呢？就在一个前端项目上结合docker部署吧。
场景说明
我有一个博客，仓库是
github，前端是用vue（或者react）写的，结合travis CI持续集成，再用gulp自动发布到服务器上。
[ 注：怕小白不懂，详说下流程。先本地git commit && git push代码到github仓库，然后travis CI会自动拉取代码并执行travis.yml文件里的命令npm install && gulp publish。]
现在要加入docker，那么如何加呢？
思考结果
一开始不咋懂，就探索的第一个方案，结果想改个小东西的时候发现太麻烦，就发现了第二种方案。
两种方案：
- 方案一：先构建镜像上传到
dockerhub仓库，然后在服务器上拉取镜像并创建容器。- 构建镜像：
docker build - 上传：
docker push - 拉取镜像：
docker pull - 创建容器：
docker run
- 构建镜像：
- 方案二：直接在服务器上拉取代码构建镜像，并创建容器。
- 构建镜像：
docker build - 创建容器：
docker run
- 构建镜像：
真正实践
这里只详述方案一，方案二省略！！
1. 准备工作（ 这些都要自己先准备好 ）：
- 本地新建一个前端项目，并且远程仓库是
github。 - 服务器上安装
docker（如何安装，请看 docker官网 ）。 - 然后了解下
github的CI工具travis CI，并把项目CI跑起来。
准备工作做好后，就开始下面的流程。
2. 第一步：
- 在已建好的项目根目录加入2个文件：
Dockerfile、nginx.conf:
Dockerfile:
from nginx
label maintainer "lingzi"
copy ./build/ /usr/share/nginx/html/
copy ./nginx.conf /etc/nginx/conf.d/default.conf
expose 83
nginx.conf:
server {
listen 83;
root /usr/share/nginx/html/;
include /etc/nginx/default.d/*.conf;
location / {
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://lemonof.com:7001/;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
3. 第二步：
- 因为要把创建的镜像推到
dockerhub仓库，所以要先在dockerhub官网注册账号。 - 新建travis.yml文件
travis.yml:
language: node_js
node_js:
- "8"
install: npm install
script:
- npm run build
- docker build -t imagename . // `imagename`是变量，镜像的名字，你随便写个。特别注意，后面那个点是必须要的，不要写掉了！
- docker login -u $DOCKER_USER -p $DOCKER_PASS
- docker push imagename // `imagename`注释同上
注：$DOCKER_USER和$DOCKER_PASS是travis里设置的环境变量。为了安全，把用户名和密码都设置成环境变量了，当然，你也可以直接写上你的用户名和密码。例如：docker login -u 用户名 -p 密码
4. 第三步：
- 用
xshell登录服务器。 - 因为准备工作里已经安装好了
docker（注：没装的赶紧装），此时直接在服务器上拉取镜像：
docker pull imagename
注：如果dockerhub平台里imagename设置为private，如下图所示，就要先登录：docker login -u username -p password，才能拉取镜像。
repository设置.png
- 在服务器上创建容器并运行
docker run --name dockername -d -p 83:83 imagename
// dockername 容器名；
// imagename 镜像名
// -d 后台运行容器，并返回容器ID；
// -p 端口映射，格式为：主机(宿主)端口:容器端口
现在访问服务器的83端口，应该就能看到东西了。这就是我博客的首页了。
首页.png
结尾发言
希望能帮到大家。
代码仓库地址：https://github.com/lingziyb/ice-blog
