摘要：一個(gè)不包含的前端工程，是不會(huì)飛的，因此我們需要強(qiáng)行插上翅膀，即使你之前一把梭是多么的高效，這樣不僅僅是為了效率與可維護(hù)性，單單是從逼格的角度，你也應(yīng)該盡快使用部署你的前端應(yīng)用。

What Docker / Why Docker / Install Docker，請(qǐng)自行查閱相關(guān)資料。

一個(gè)不包含Docker的前端工程，是不會(huì)飛的，因此我們需要強(qiáng)行插上翅膀，即使你之前npm run build && rsync一把梭是多么的高效，這樣不僅僅是為了效率與可維護(hù)性，單單是從逼格的角度，你也應(yīng)該盡快使用Docker部署你的前端應(yīng)用。

Nginx是一個(gè)輕量級(jí)的Web服務(wù)器，用它來部署前端應(yīng)用再好不過了，因此我們先將Nginx的鏡像拉取到本地：

$ docker pull nginx

命令執(zhí)行時(shí)，會(huì)從遠(yuǎn)程倉(cāng)庫(kù)中拉取標(biāo)記為latest（一般為最近更新版本）的nginx鏡像，你可以運(yùn)行命令查看本地鏡像：

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
nginx               latest              dbfc48660aeb        2 weeks ago         109MB

現(xiàn)在讓我們來運(yùn)行一下吧：docker run --rm -p 3333:80 nginx，訪問http://localhost:3333可以看到：

Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working. Further configuration is required.

For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.

Thank you for using nginx.

這里涉及到以下參數(shù)：

--rm，退出時(shí)自動(dòng)刪除容器

-p，將容器的端口發(fā)布到主機(jī)的端口，3333:80代表將容器的80端口映射到主機(jī)的3333端口

沒錯(cuò)，啟動(dòng)一個(gè)Nginx服務(wù)就是那么簡(jiǎn)單，docker run 用法很多，在此就不一一介紹了。

當(dāng)Nginx容器運(yùn)行時(shí)，配置文件、靜態(tài)資源目錄都是在容器內(nèi)部的，因此我們需要想辦法將其中的文件進(jìn)行修改，首先先進(jìn)入到容器的shell環(huán)境查看一下基本的配置信息：

$ docker exec -it nginx-demo sh

其中，docker exec用于在運(yùn)行的容器中執(zhí)行命令，還使用了一些參數(shù)：

-i，保持STDIN打開

-t，分配一個(gè)TTY終端

當(dāng)進(jìn)入到系統(tǒng)中以后，按照Nginx默認(rèn)路徑，很容易找到路徑為/etc/nginx/conf.d/default.conf的文件內(nèi)容：

# 已去掉文件注釋
server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

這樣我們獲取到了兩個(gè)路徑：

default.conf路徑：/etc/nginx/conf.d/default.conf/usr/share/nginx/html

靜態(tài)資源服務(wù)路徑：/usr/share/nginx/html

那我們可不可以將主機(jī)的目錄文件映射到容器內(nèi)呢？答案當(dāng)然是可以的，這時(shí)候-v / --volume出場(chǎng)了，它說老子就是專門干這件事情的。

為了測(cè)試，首先在根目錄下創(chuàng)建一個(gè)名為nginx-demo的文件夾，并初始化index.html文件：

$ cd ~ && mkdir nignx-demo && cd nginx-demo && echo "
Hello World
" > index.html

然后我們啟動(dòng)Nginx容器，并附上一些參數(shù)：

$ docker run -d --rm -p 3333:80 
    -v ~/nginx-demo:/usr/share/nginx/html 
    --name nginx-demo nginx

在此又新增了幾個(gè)參數(shù)：

-d，后臺(tái)運(yùn)行容器

--name，給容器命名

-v，系統(tǒng)卷映射

讓我們來驗(yàn)證一下：

$ curl http://localhost:3333
Hello World

若要自定義Nginx配置文件也同理，為了修改方面，可以使用docker cp將它拷貝到~/docker-nginx/在原有基礎(chǔ)上進(jìn)行進(jìn)行修改：

$ docker cp nginx-demo:/etc/nginx/conf.d/default.conf ~/docker-nginx/default.conf

修改后的文件為：

server {
    listen       80;
    server_name  localhost;
    root   /usr/share/nginx/html;

    location /hello-world/ {
        alias   /usr/share/nginx/html/;
        index index.html;
    }
}

為了測(cè)試修改成功與否，將location改為/hello-world/，這樣的話，當(dāng)訪問http://localhost:3333/hello-world/即可獲取正確的響應(yīng)，因?yàn)橹暗娜萜鬟€在運(yùn)行，因此我們需要先停掉之前的容器，再重新運(yùn)行即可：

$ docker stop nginx-demo
$ docker run -d --rm -p 3333:80 
    -v ~/nginx-demo:/usr/share/nginx/html 
    -v ~/nginx-demo/default.conf:/etc/nginx/conf.d/default.conf 
    --name nginx-demo nginx
$ curl -L http://localhost:3333/hello-world/
Hello World

如果你和我一樣，感覺每次執(zhí)行 docker run 攜帶一大堆參數(shù)不太優(yōu)雅，那就試試docker-compose工具吧（請(qǐng)自行安裝），它主要的職責(zé)是完成容器的編排，當(dāng)然也可以配置啟動(dòng)參數(shù)，為了實(shí)現(xiàn)相同的效果，于是乎得到了下面的docker-compose.yml文件：

services:
  web:
    image: nginx
    container_name: nginx-demo
    ports:
      - 3333:80
    volumes:
      - ~/nginx-demo:/usr/share/nginx/html
      - ~/nginx-demo/default.conf:/etc/nginx/conf.d/default.conf

docker-compose還有一些常用命令：

docker-compose up -d，創(chuàng)建并啟動(dòng)容器

docker-compose down，停止并刪除容器

docker-compose --help，查看幫助

相信你可以通過上述命令讓你的容器飛起來。

在這里就直接使用create-react-app先創(chuàng)建一個(gè)前端工程：

$ npx create-react-app react-app

我們希望直接通過上述學(xué)到的啟動(dòng)Nginx容器先運(yùn)行一下服務(wù)，因此首先執(zhí)行yarn build手動(dòng)編譯，這時(shí)會(huì)在根目錄下生成編譯目錄：build/，此時(shí)在根目錄下添加docker-compose.yml：

services:
  web:
    image: nginx
    container_name: docker-app
    ports:
      - 3333:80
    volumes:
      - ~/react-app/build:/usr/share/nginx/html

執(zhí)行docker-compose up -d，create-react-app項(xiàng)目已經(jīng)正常運(yùn)行在你的容器里了。以上是通過各種手段直接構(gòu)建的容器，現(xiàn)在我們換一種方式，直接構(gòu)建鏡像，構(gòu)建鏡像一般是通過Dockerfile來構(gòu)建，那我們來寫一個(gè)Dockerfile文件"替換"掉docker-compose.yml：

FROM nginx

COPY build/ /usr/share/nginx/html

EXPOSE 80

在這里最主要的是通過過COPY命令替代了--volume參數(shù)，我們先構(gòu)建鏡像，構(gòu)建好以后，就可以直接通過鏡像運(yùn)行容器了，此時(shí)可直接運(yùn)行鏡像：

$ docker build --tag react-app .
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
react-app           latest              f151ab2c873e        6 seconds ago       110MB
$ docker run --rm -p 3333:80 react-app

訪問http://localhost:3333 ，恭喜你運(yùn)行成功。在通常構(gòu)建流程中，我們也會(huì)將編譯所需環(huán)境與編譯腳本集成進(jìn)構(gòu)建鏡像步驟中，因此上述Dockerfile可改寫為：

# stage 1
FROM node:11-alpine as build-deps
WORKDIR /usr/src/app
COPY . .
RUN yarn && yarn build

# stage 2
FROM nginx
COPY build/ /usr/share/nginx/html

EXPOSE 80

node的鏡像版本號(hào)一定要采用-alpine后綴的，這樣構(gòu)建的鏡像會(huì)節(jié)約很多空間，因?yàn)樗腔?Alpine Linux項(xiàng)目，它是一個(gè)輕量級(jí)Linux發(fā)行版本。

當(dāng)我們重新構(gòu)建完鏡像后，自行驗(yàn)證一下吧。需要注意的是，當(dāng)你在構(gòu)建時(shí)無意中會(huì)把node_modules、.git之類的文件夾一起放到構(gòu)建上下文之中，這樣會(huì)影響到構(gòu)建速度與鏡像大小，這時(shí)候.dockerignore文件就排上用場(chǎng)啦，它能幫助你去定義構(gòu)建環(huán)境中你真正需要的文件，在這里也為工程簡(jiǎn)單配置了一下：

node_modules
.git

How To Run Nginx in a Docker Container on Ubuntu 14.04 | DigitalOcean

Create React App + Docker — multi-stage build example. Let’s talk about artifacts!

Do not ignore .dockerignore (it’s expensive and potentially dangerous)