前言

以前始终有疑难困扰着我：人人都在吹的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 App

当初，应用以下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 在接下来的几年里，会逐步成为开发的标配，心愿大家能放下对运维畛域的偏见，多多学习这些行业内的新规范与概念。

如果你感觉这篇内容对你挺有启发，我想邀请你帮我三个小忙：

  1. 点赞，让更多的人也能看到这篇内容（珍藏不点赞，都是耍流氓 -_-）
  2. 关注公众号「前端劝退师」，不定期分享原创常识。
  3. 也看看其它文章

劝退师集体微信：huab119，或公众号留言，我加你们

也能够来我的GitHub博客里拿所有文章的源文件：

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