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/ 查看上傳的鏡像。

未完待續。。。。