Docker部署前端应用

项目准备

在项目根目录下，添加Dockerfile文件，此文件用来配置咱们自定义一个镜像所须要指定的依赖项、环境以及执行的命令等。内容格式以下：

# 指定咱们的基础镜像是node，版本是v8.0.0
 FROM node:10.13.0
 # 指定制做咱们的镜像的联系人信息（镜像建立者）
#  MAINTAINER EOI
 
 
 # cd到app文件夹下
 WORKDIR /home/admin/app

 # 将根目录下的文件都copy到container（运行此镜像的容器）文件系统的app文件夹下
 ADD . /home/admin/app/
 
 # 安装项目依赖包
 RUN npm install
#  RUN npm rebuild node-sass --force
 
 # 配置环境变量
#  ENV HOST 0.0.0.0
#  ENV PORT 8000
 
 # 容器对外暴露的端口号
#  EXPOSE 8000
 
 # 容器启动时执行的命令，相似npm run start
 CMD ["npm", "start"]

关于Dockerfile文件中的关键字，解释以下：

• FROM

  • 语法：FROM [:<tag>]
  • 解释：设置要制做的镜像基于哪一个镜像，FROM指令必须是整个Dockerfile的第一个指令，若是指定的镜像不存在默认会自动从Docker Hub上下载。

• MAINTAINER

  • 语法：MAINTAINER <name>
  • 解释：MAINTAINER指令容许你给将要制做的镜像设置做者信息。

• ADD

  • 语法：ADD <src> <dest>
  • 解释：ADD指令用于从指定路径拷贝一个文件或目录到容器的指定路径中，<src>是一个文件或目录的路径，也能够是一个url，路径是相对于该Dockerfile文件所在位置的相对路径， 是目标容器的一个绝对路径。

• WORKDIR

  • 语法：WORKDIR /path/to/workdir
  • 解释：WORKDIR指令用于设置Dockerfile中的RUN、CMD和ENTRYPOINT指令执行命令的工做目录(默认为/目录)，该指令在Dockerfile文件中能够出现屡次，若是使用相对路径则为相对于WORKDIR上一次的值，例如WORKDIR /data，WORKDIR logs，RUN pwd最终输出的当前目录是/data/logs。

• RUN

  • 语法：① RUN <command> #将会调用/bin/sh -c <command>
    
    ② RUN ["executable", "param1", "param2"] #将会调用exec执行，以免有些时候shell方式执行时的传递参数问题，并且有些基础镜像可能不包含/bin/sh
  • 解释：RUN指令会在一个新的容器中执行任何命令，而后把执行后的改变提交到当前镜像，提交后的镜像会被用于Dockerfile中定义的下一步操做，RUN中定义的命令会按顺序执行并提交，这正是Docker廉价的提交和能够基于镜像的任何一个历史点建立容器的好处，就像版本控制工具同样。

• ENV

  • 语法：ENV <key> <value>
  • 解释：ENV指令用于设置环境变量，在Dockerfile中这些设置的环境变量也会影响到RUN指令，当运行生成的镜像时这些环境变量依然有效，若是须要在运行时更改这些环境变量能够在运行docker run时添加–env <key>=<value>参数来修改。
  • 注意：最好不要定义那些可能和系统预约义的环境变量冲突的名字，不然可能会产生意想不到的结果。

• EXPOSE

  • 语法：EXPOSE <port> [ ...]
  • 解释：EXPOSE指令用来告诉Docker这个容器在运行时会监听哪些端口，Docker在链接不一样的容器(使用–link参数)时使用这些信息。

• CMD

  • 语法：
    ① CMD ["executable", "param1", "param2"] #将会调用exec执行，首选方式
    ② CMD ["param1", "param2"] #当使用ENTRYPOINT指令时，为该指令传递默认参数
    ③ CMD [ | ] #将会调用/bin/sh -c执行
  • 解释：CMD指令中指定的命令会在镜像运行时执行，在Dockerfile中只能存在一个，若是使用了多个CMD指令，则只有最后一个CMD指令有效。当出现ENTRYPOINT指令时，CMD中定义的内容会做为ENTRYPOINT指令的默认参数，也就是说可使用CMD指令给ENTRYPOINT传递参数。
  • 注意：RUN和CMD都是执行命令，他们的差别在于RUN中定义的命令会在执行docker build命令建立镜像时执行，而CMD中定义的命令会在执行docker run命令运行镜像时执行，另外使用第一种语法也就是调用exec执行时，命令必须为绝对路径。

在项目根目录下添加.dockerignore文件，此文件的做用相似.gitignore文件，能够忽略掉添加进镜像中的文件，写法、格式和.gitignore同样，一行表明一个忽略。本项目添加的忽略以下

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

构建镜像

• 查看本地镜像

➜  ~ docker images
REPOSITORY               TAG                 IMAGE ID            CREATED             SIZE
test/deploy   1.0                 2646a0cda7e0        10 hours ago        1.14GB
deploy                   1.0                 2646a0cda7e0        10 hours ago        1.14GB
lzqs/deploy              1.0                 2646a0cda7e0        10 hours ago        1.14GB
<none>                   <none>              2aa256b547c4        10 hours ago        1.14GB
node                     10.13.0             58375a768efa        3 weeks ago         893MB

• 在项目根目录下执行命令，构建当前项目镜像

➜  my-app git:(master) ✗  docker build -t deploy:1.0 .
'''''''''
Successfully built d8f0875e967b
Successfully tagged deploy:1.0

deploy是镜像名，1.0是镜像的版本号，到此你已经成功构建了一个新的镜像，你能够经过docker images，查看你的镜像。

➜  my-app git:(master) ✗ docker images
REPOSITORY               TAG                 IMAGE ID            CREATED              SIZE
deploy                   1.0                 666b40a937b7        About a minute ago   2.35GB

• 启动镜像，测试是否成功。

➜  my-app git:(master) ✗ docker run -d -p 9000:8000 deploy:1.0
508739047fba955bebf709b822d9837c5b41ee31f574ffece0e3e350448c786d
➜  my-app git:(master) ✗ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                        PORTS                    NAMES
508739047fba        deploy:1.0          "npm start"         20 seconds ago      Up 19 seconds                 0.0.0.0:9000->8000/tcp   nifty_kilby

docker run -d -p 9000:8000 deploy:1.0中-d表示后台运行，-p 9000:8000表示指定本地的9000端口隐射到容器内的8000端口。 deploy:1.0为咱们要运行的镜像。经过docker ps -a查看docker的进程（容器的运行自己就是一种特殊的进程）运行状况，发现咱们的容器已经在运行。本地能够访问localhost:9000。
经过docker logs能够查看咱们容器内应用进程的运行日志。docker logs <CONTAINER ID>

➜  my-app git:(master) ✗ docker logs 508739047fba

> my-app@0.1.0 start /home/admin/app
> cross-env NODE_ENV=dev react-scripts start

Starting the development server...

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.17.0.2:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

docker stop <CONTAINER ID>能够中止容器运行

 docker start <CONTAINER ID>能够启动容器运行

 docker restart <CONTAINER ID>能够重启容器

 docker rm <CONTAINER ID> -f能够强制删除在运行的容器

上传镜像

• 登陆docker

➜  my-app git:(master) ✗ docker login
Login with your Docker ID to push and pull images from Docker Hub. If you don't have a Docker ID, head over to https://hub.docker.com to create one.
Username: ***
Password:
Login Succeeded

• 给本地生成的镜像打tag
  docker tag <name:tag> <namespace>/<name:tag>，namespace能够指定为你登陆docker的用户名
  docker tag deploy:1.0 dockerlogin/deploy:1.0
• docker push <namespace>/<name:tag>将镜像上传至docker的公共仓库
  docker push dockerlogin/deploy:1.0
  若是只是docker push <name:tag>会出现以下error，只需把上传镜像改为tag标签便可

my-app git:(master) ✗ docker push deploy:1.0
The push refers to repository [docker.io/library/deploy]
a624588532de: Preparing
e472c10d9b1b: Preparing
7ef8f9a2435f: Preparing
bc995157b3fa: Preparing
56b4f883ebdc: Preparing
d8293569bfa4: Waiting
c4d021050ecd: Waiting
9978d084fd77: Waiting
1191b3f5862a: Waiting
08a01612ffca: Waiting
8bb25f9cdc41: Waiting
f715ed19c28b: Waiting
denied: requested access to the resource is denied

• 上传成功后，docker logout 退出，登陆 https://hub.docker.com/ 查看上传的镜像。

未完待续。。。。