在使用Docker运行React.js时的笔记

2 年 ago

雅, 悟

2 minutes

环境

$ cat /etc/linuxmint/info 
RELEASE=19.3
CODENAME=tricia
EDITION="Cinnamon"
DESCRIPTION="Linux Mint 19.3 Tricia"
DESKTOP=Gnome
TOOLKIT=GTK
NEW_FEATURES_URL=https://www.linuxmint.com/rel_tricia_cinnamon_whatsnew.php
RELEASE_NOTES_URL=https://www.linuxmint.com/rel_tricia_cinnamon.php
USER_GUIDE_URL=https://www.linuxmint.com/documentation.php
GRUB_TITLE=Linux Mint 19.3 Cinnamon

安装Docker

$ apt update
$ apt install docker-ce docker-ce-cli docker-compose

安装Node.js和create-react-app。

$ apt install nodejs
$ npm install create-react-app yarn

创建一个React.js应用的示例

$ create-react-app docker-test
$ cd docker-test

先试一下普通地启动看看。

yarn start

使用浏览器访问 http://localhost:3000 ，确认React.js正常运行。确认后使用Ctrl-C停止运行。

创建Dockerfile和docker-compose.yml文件。

在创建的React应用的根目录下，创建以下内容的Dockerfile和docker-compose.yml文件。

FROM node:14.4.0-buster-slim
WORKDIR /usr/src/app
RUN npm install --save prop-types
RUN npm install -g create-react-app

version: '3'
services:
  node:
    build:
      context: .
    tty: true
    environment:
      - NODE_ENV=production
    volumes:
      - ./:/usr/src/app
    command: sh -c "yarn start"
    ports:
      - "3000:3000"

如果按上述的内容，React应用程序的根目录在Docker环境中被挂载到 /usr/src/app，那么只需将 WORKDIR 指定为 /usr/src/app，执行的脚本就只有 sh -c “yarn start”，因此在 command 中指定了它。

当在Docker Hub上查看节点时，会看到一些带有版本号的名字，比如alpine，buster以及stretch。如果不了解的话，其实这些都是Linux发行版。

选择标有 “slim” 标记的软件包，表示它们是不包含额外软件包的 Debian 发行版。无论如何，这次只需要在 Docker 中运行 node，所以选择了 node:14.4.0-buster-slim。

值得一提的是，Debian 目前的版本是 buster（10.0），之前的版本如下所示。

Debian 10 (buster) — 現在の安定版リリース
Debian 9 (stretch) — 過去の安定版リリース
Debian 8 (jessie) — 過去の安定版リリース
Debian 7 (wheezy) — 過去の安定版リリース

阿尔派（Alpine）Linux似乎是面向高级用户的轻巧Linux系统。由于其轻量级的特性，可能会有更小的映像大小，但我之前只使用过Debian和Ubuntu，所以还是决定不使用阿尔派。

构建Docker镜像

$ docker-compose build

使用Docker来运行React.js应用程序

启动 (qǐ

$ docker-compose up

使用浏览器访问 http://localhost:3000，确认React.js正在运行。
使用Ctrl-C停止。

在后台启动

$ docker-compose up -d

停下来 xià

$ docker-compose down

确认图像信息

$ docker images | grep dockertest
dockertest_node     latest               daf22d9465c7        26 minutes ago      194MB

赠品

停止所有的Docker镜像

$ docker stop $(docker ps -q)