展开全文

此外，还需要添加一个.dockerignore文件，加快构建过程的速度‍

为应用构建Docker镜像

首先确认你的Dcoker 正在运行。

运行以下命令来构建Docker映像。react-docker 可以替换为你要为镜像命名的任何值。

其中-t 为打标签的意思，执行完后将会看到：

Successfullybuilt 137c69857dd0Successfullytagged react-docker:latest

您的镜像已经嗷嗷待发。

运行Docker + React/Vue

现在，使用以下docker run命令, 通过Docker在端口3000上运行React应用。

dockerrun-p3000 :3000react-docker

其中：前一个3000对应本机http://localhost:3000/，第二个3000则是Docker容器端口。

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

在Docker的Dashboard中也可以看到：

此时打开http://localhost:3000/就会看到熟悉又亲切的画面

到这里，你的一首歌的时间之Docker之旅就结束了。接下来的将是更标准化的流程，劝退劝退！

Docker Compose 标准化流程

将docker-compose.yml文件添加到项目根目录：

version: ‘3.7’

services:

sample: container_name: samplebuild: context: .dockerfile: Dockerfilevolumes: –‘.:/app’–‘/app/node_modules’ports: –3000:3000environment: –CHOKIDAR_USEPOLLING=true

有了该文件，就不需要分步执行了，直接：

docker-compose up -d –build

就能看到一样构建了：

生产环境下的Dockerfile

生产环境下需要nginx配置，在根目录先创建nginx.config

server{ listen${PORT:-80}; server_name_;

root/usr/share/nginx/html; indexindex.html;

location/ { try_files$ $uri/index.html; }}

让我们创建一个单独的Dockerfile，用于生产环境，称为Dockerfile.prod：

FROMnode:12.18.3 AS builder

WORKDIR/app

ENVPATH /app/node_modules/.bin:$PATHCOPYpackage.json ./COPYpackage-lock.json ./

# 前端项目构建命令 — npm ci 或 npm install# http://www.gaoxiukun.com/wp/archives/509

RUNnpm ci# React 应用需要react-RUNnpm install [email protected] -g

COPY. ./RUNnpm run build

# 安装nginxFROMnginx:1.17-alpineRUNapk –no-cache add curlRUNcurl -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不是默认的执行文件，所以需要构建并标记：

dockerbuild-fDockerfile.prod-tsample:prod.

接下来执行docker run

dockerrun-it–rm-p3000 :80sample:prod

• -i: 以交互模式运行容器。

• -t: 为容器重新分配一个伪输入终端，通常与 -i 同时使用。

• –rm:在容器退出时自动清理容器内部的文件系统，不懂可忽略

• -p: 指定端口。

-i: 以交互模式运行容器。

-t: 为容器重新分配一个伪输入终端，通常与 -i 同时使用。

–rm:在容器退出时自动清理容器内部的文件系统，不懂可忽略

-p: 指定端口。

成功运行：

在浏览器中导航到http://localhost:3000 以查看该应用程序。

接下来使用新的Docker Compose文件以及docker-compose.prod.yml进行测试：

version: ‘3.7’

services: sample-prod: container_name: sample-prodbuild: context: .dockerfile: Dockerfile.prodports: –‘3000:80’

启动容器：

docker-compose-fdocker-compose.prod.ymlup-d–build

在浏览器中再次进行校验。

结语

在以往，我对Docker容器化的概念，仅停留在了解。而真正实操中，也是被一群指令，配置给吓到劝退。

本文弱化了命令行参数，希望能让广大萌新们能先看懂，再去演练一番，举一反三，不再怕Docker，然后再去学习k8s相关。

Docker 在接下来的几年里，会逐渐成为开发的标配，希望大家能放下对运维领域的偏见，多多学习这些行业内的新标准与概念。