乐趣区

关于前端:想要成为前端Star-吗一首歌时间将ReactVue-应用Docker-化

前言

以前始终有疑难困扰着我:人人都在吹的 Docker 容器化,与前端有何关系?

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

利用部署从刀耕火种,到 DevOps 崛起,原来不止前端在迅捷倒退。接下来,我将用一首歌的工夫,带大家实在的体验一番 Docker 容器化。

1. 奢侈的Dockerfile

首先筹备一个有规范运行指令的 Web 利用,用脚手架 creat-react-appVue 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 部署,要害配置就那么几行。

此外,还须要增加一个 .dockerignore 文件,放慢构建过程的速度

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

2. 为利用构建 Docker 镜像

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

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

docker build -t react-docker .

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

Successfully built 137c69857dd0
Successfully 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 查看容器信息

DockerDashboard中也能够看到:

此时关上 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 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 .

接下来执行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…
一起游玩呀。~

退出移动版