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

What Docker / Why Docker / Install Docker，請自行查閱相關資料。

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

Nginx是一個輕量級的Web服務器，用它來部署前端應用再好不過了，因此我們先將Nginx的鏡像拉取到本地：

$ docker pull nginx

命令執行時，會從遠程倉庫中拉取標記為latest（一般為最近更新版本）的nginx鏡像，你可以運行命令查看本地鏡像：

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

現在讓我們來運行一下吧：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.

這里涉及到以下參數：

--rm，退出時自動刪除容器

-p，將容器的端口發布到主機的端口，3333:80代表將容器的80端口映射到主機的3333端口

沒錯，啟動一個Nginx服務就是那么簡單，docker run 用法很多，在此就不一一介紹了。

當Nginx容器運行時，配置文件、靜態資源目錄都是在容器內部的，因此我們需要想辦法將其中的文件進行修改，首先先進入到容器的shell環境查看一下基本的配置信息：

$ docker exec -it nginx-demo sh

其中，docker exec用于在運行的容器中執行命令，還使用了一些參數：

-i，保持STDIN打開

-t，分配一個TTY終端

當進入到系統中以后，按照Nginx默認路徑，很容易找到路徑為/etc/nginx/conf.d/default.conf的文件內容：

# 已去掉文件注釋
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;
    }
}

這樣我們獲取到了兩個路徑：

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

靜態資源服務路徑：/usr/share/nginx/html

那我們可不可以將主機的目錄文件映射到容器內呢？答案當然是可以的，這時候-v / --volume出場了，它說老子就是專門干這件事情的。

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

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

然后我們啟動Nginx容器，并附上一些參數：

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

在此又新增了幾個參數：

-d，后臺運行容器

--name，給容器命名

-v，系統卷映射

讓我們來驗證一下：

$ curl http://localhost:3333
Hello World

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

$ 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;
    }
}

為了測試修改成功與否，將location改為/hello-world/，這樣的話，當訪問http://localhost:3333/hello-world/即可獲取正確的響應，因為之前的容器還在運行，因此我們需要先停掉之前的容器，再重新運行即可：

$ 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

如果你和我一樣，感覺每次執行 docker run 攜帶一大堆參數不太優雅，那就試試docker-compose工具吧（請自行安裝），它主要的職責是完成容器的編排，當然也可以配置啟動參數，為了實現相同的效果，于是乎得到了下面的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，創建并啟動容器

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

docker-compose --help，查看幫助

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

在這里就直接使用create-react-app先創建一個前端工程：

$ npx create-react-app react-app

我們希望直接通過上述學到的啟動Nginx容器先運行一下服務，因此首先執行yarn build手動編譯，這時會在根目錄下生成編譯目錄：build/，此時在根目錄下添加docker-compose.yml：

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

執行docker-compose up -d，create-react-app項目已經正常運行在你的容器里了。以上是通過各種手段直接構建的容器，現在我們換一種方式，直接構建鏡像，構建鏡像一般是通過Dockerfile來構建，那我們來寫一個Dockerfile文件"替換"掉docker-compose.yml：

FROM nginx

COPY build/ /usr/share/nginx/html

EXPOSE 80

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

$ 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 ，恭喜你運行成功。在通常構建流程中，我們也會將編譯所需環境與編譯腳本集成進構建鏡像步驟中，因此上述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的鏡像版本號一定要采用-alpine后綴的，這樣構建的鏡像會節約很多空間，因為它是基于 Alpine Linux項目，它是一個輕量級Linux發行版本。

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

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)