想要成为前端Star 吗？一首歌时间将React / Vue 应用Docker 化

谁践踏了优雅 2023-01-21 14:28 35阅读 0赞

## 前言 ##

以前一直有疑问困扰着我：人人都在吹的`Docker`容器化，与前端有何关系？

然而在近两年的编程生涯，在每一次产品迭代中，渐渐体会到了容器化其魅力所在。

应用部署从刀耕火种，到`DevOps`崛起，原来不止前端在迅捷发展。接下来，我将用一首歌的时间，带大家真实的体验一番`Docker`容器化。![22855aeb463949f2498611fc894dfa41.png][]

## 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 serve
    CMD ["npm", "start"]

是的，开发环境在`Docker` 部署，关键配置就那么几行。

![bc086025428c0a10ffe19d5e39621b5f.png][]

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

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

## 2. 为应用构建`Docker`镜像 ##

首先确认你的`Dcoker` 正在运行。![d09649badca5bd5d5f37140408ca29ef.png][]

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

docker build -t react-docker .

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

![5961430a54431b3cae35a6931c235b9b.png][]

Successfully built 137c69857dd0
    Successfully 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`容器端口。

![25d01f3126de7b815a6a8b096052f8e3.png][]

可以通过`Dcoker ps`查看容器信息![c3332dd11924218707360dcf627275a7.png][]

在`Docker`的`Dashboard`中也可以看到：

![0d0a3283eafb584771898da841694841.png][]

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

![485a0dc759c346d993f0f158b8432581.png][]

到这里，你的一首歌的时间之`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

![a9e3efd25e35adf41d47e78078099b35.png][]

就能看到一样构建了：

![750c3fe308c09fe952c50a5b2af18263.png][]

## 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 builder
    
    
    WORKDIR /app
    
    
    ENV PATH /app/node_modules/.bin:$PATH
    COPY package.json ./
    COPY package-lock.json ./
    
    
    # 前端项目构建命令 — npm ci 或 npm install
    # http://www.gaoxiukun.com/wp/archives/509
    
    
    RUN npm ci
    # React 应用需要react-script
    RUN npm install react-scripts@3.4.1 -g
    
    
    COPY . ./
    RUN npm run build
    
    
    # 安装nginx
    FROM nginx:1.17-alpine
    RUN apk --no-cache add curl
    RUN 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/bin
    COPY ./nginx.config /etc/nginx/nginx.template
    CMD ["/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 .

![ad5a8f0940fba510c027355d936a4295.png][]

接下来执行`docker run`

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

*  `-i`: 以交互模式运行容器。
 *  `-t`: 为容器重新分配一个伪输入终端，通常与 `-i` 同时使用。
 *  `--rm`:在容器退出时自动清理容器内部的文件系统，不懂可忽略
 *  `-p`: 指定端口。

成功运行：![e5ce966dd17144a2ec59f04a6f1e812a.png][]

在浏览器中导航到`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

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

![bec424af7997a0c6f5e864513dd498e4.png][]

## ❤️ 结语 ##

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

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

![612170c9cab8132adf8db201e7cdad77.png][]

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

[22855aeb463949f2498611fc894dfa41.png]: /images/20221020/d32a58ef199f49d187b39fbacee28f2a.png
[bc086025428c0a10ffe19d5e39621b5f.png]: /images/20221020/3def14dfe94e489896a95d0a55a8b6d3.png
[d09649badca5bd5d5f37140408ca29ef.png]: /images/20221020/907e76130a164873a3c5cf29c6daa8ee.png
[5961430a54431b3cae35a6931c235b9b.png]: /images/20221020/1a181d3940084a56a2c6c9881f5e2c3f.png
[25d01f3126de7b815a6a8b096052f8e3.png]: /images/20221020/2a1ebf8b9c5342eb88678fa778cb0c6e.png
[c3332dd11924218707360dcf627275a7.png]: /images/20221020/dcd38c96e49e4cb1881cb828868a4e00.png
[0d0a3283eafb584771898da841694841.png]: /images/20221020/a3b65881b0bb49b9a0f18631fc582573.png
[485a0dc759c346d993f0f158b8432581.png]: /images/20221020/64b41b2635394ee58b31dc5681d24f1a.png
[a9e3efd25e35adf41d47e78078099b35.png]: /images/20221020/5e4aa05b72cd40d38e66adca94a9d964.png
[750c3fe308c09fe952c50a5b2af18263.png]: /images/20221020/1e1f06707fbd4fff9cc4f8ce10a9ea52.png
[ad5a8f0940fba510c027355d936a4295.png]: /images/20221020/1cdd31784c674b3d988383d6e11979d0.png
[e5ce966dd17144a2ec59f04a6f1e812a.png]: /images/20221020/36bb5be23a0d4ff89c0a15de7d2681f8.png
[bec424af7997a0c6f5e864513dd498e4.png]: /images/20221020/2705de79cd30417ea673cbe808188153.png
[612170c9cab8132adf8db201e7cdad77.png]: /images/20221020/bae2041cb92444ef9759f24367f1bf3b.png