前言

以前一直有疑問困擾著我：人人都在吹的Docker容器化，與前端有何關系？

然而在近兩年的編程生涯，在每一次產品迭代中，漸漸體會到了容器化其魅力所在。

應用部署從刀耕火種，到DevOps崛起，原來不止前端在迅捷發展。接下來，我將用一首歌的時間，帶大家真實的體驗一番Docker容器化。

1. 樸素的Dockerfile

首先準備一個有標準運行指令的Web應用，用腳手架creat-react-app或Vue CLI等生成的即可。

以下的Dockerfile不參雜其它依賴，爭取做到都能看懂：

# 指定Node版本FROM node:12.18.3# 容器中應用程序的路徑。將Web目錄作為工作目錄WORKDIR /web# 將package.json 復制到 Docker 環境COPY ./package.json /web/package.json# 安裝依賴RUN yarn# 將代碼復制到Docker容器中的Web目錄COPY . /web/# 暴露容器內部訪問端口，根據項目變動EXPOSE 8080## 如果是Vue CLi，則換成 yarn serveCMD ["npm", "start"]

是的，開發環境在Docker 部署，關鍵配置就那么幾行。

此外，還需要添加一個.dockerignore文件，加快構建過程的速度

node_modules/**/*build/**/*.DS_Store

2. 為應用構建Docker鏡像

首先確認你的Dcoker 正在運行。

運行以下命令來構建Docker映像。react-docker 可以替換為你要為鏡像命名的任何值。

docker build -t react-docker .

其中-t 為打標簽的意思，執行完后將會看到：

Successfully built 137c69857dd0Successfully tagged react-docker:latest

您的鏡像已經嗷嗷待發。

3. 運行Docker + React/Vue

現在，使用以下docker run命令, 通過Docker在端口3000上運行React應用。

docker run -p 3000:3000 react-docker

其中：前一個 3000 對應本機http://localhost:3000/，第二個 3000 則是Docker容器端口。

可以通過Dcoker ps查看容器信息

在Docker的Dashboard中也可以看到：

此時打開http://localhost:3000/就會看到熟悉又親切的畫面

到這里，你的一首歌的時間之Docker之旅就結束了。接下來的將是更標準化的流程，勸退勸退！

4. Docker Compose?標準化流程

將docker-compose.yml文件添加到項目根目錄：

version: '3.7'services: sample: container_name: sample build: context: . dockerfile: Dockerfile volumes: - '.:/app' - '/app/node_modules' ports: - 3000:3000 environment: - CHOKIDAR_USEPOLLING=true

有了該文件，就不需要分步執行了，直接：

docker-compose up -d --build

就能看到一樣構建了：

5. 生產環境下的Dockerfile

生產環境下需要nginx配置，在根目錄先創建nginx.config

server { listen ${PORT:-80}; server_name _; root /usr/share/nginx/html; index index.html; location / { try_files $$uri /index.html; }}

讓我們創建一個單獨的Dockerfile，用于生產環境，稱為Dockerfile.prod：

FROM node:12.18.3 AS builderWORKDIR /appENV PATH /app/node_modules/.bin:$PATHCOPY package.json ./COPY package-lock.json ./# 前端項目構建命令 — npm ci 或 npm install# http://www.gaoxiukun.com/wp/archives/509RUN npm ci# React 應用需要react-scriptRUN npm install react-scripts@3.4.1 -gCOPY . ./RUN npm run build# 安裝nginxFROM nginx:1.17-alpineRUN apk --no-cache add curlRUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname -s`-`uname -m` -o envsubst && \ chmod +x envsubst && \ mv envsubst /usr/local/binCOPY ./nginx.config /etc/nginx/nginx.templateCMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]COPY --from=builder /app/build /usr/share/nginx/html

因為Dockerfile.prod不是默認的執行文件，所以需要構建并標記：

docker build -f Dockerfile.prod -t sample:prod .

接下來執行docker run

docker run -it --rm -p 3000:80 sample:prod

• -i: 以交互模式運行容器。
• -t: 為容器重新分配一個偽輸入終端，通常與 -i 同時使用。
• --rm:在容器退出時自動清理容器內部的文件系統，不懂可忽略
• -p: 指定端口。

成功運行：

在瀏覽器中導航到http://localhost:3000 以查看該應用程序。

接下來使用新的Docker Compose文件以及docker-compose.prod.yml進行測試：

version: '3.7'services: sample-prod: container_name: sample-prod build: context: . dockerfile: Dockerfile.prod ports: - '3000:80'

啟動容器：

docker-compose -f docker-compose.prod.yml up -d --build

在瀏覽器中再次進行校驗。

?? 結語

在以往，我對Docker容器化的概念，僅停留在了解。而真正實操中，也是被一群指令，配置給嚇到勸退。

本文弱化了命令行參數，希望能讓廣大萌新們能先看懂，再去演練一番，舉一反三，不再怕Docker，然后再去學習k8s相關。

Docker 在接下來的幾年里，會逐漸成為開發的標配，希望大家能放下對運維領域的偏見，多多學習這些行業內的新標準與概念。

如果你覺得這篇內容對你挺有啟發，我想邀請你幫我三個小忙：

點贊，讓更多的人也能看到這篇內容(收藏不點贊，都是耍流氓 -_-)

關注公眾號「前端勸退師」，不定期分享原創知識。

也看看其它文章

勸退師個人微信：huab119，或公眾號留言，我加你們

也可以來我的GitHub博客里拿所有文章的源文件：

前端勸退指南：https://github.com/roger-hiro/BlogFN 一起玩耍呀。~

總結

以上是生活随笔為你收集整理的如何命令行结束react程序_想要成为前端Star 吗？一首歌时间将React / Vue 应用Docker 化...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。