将 React.js 与 Docker 结合使用

2020-11-07 08:00:00 · 飞浪

使用单体应用管理更新、CI/CD 和部署可能会给您带来很多麻烦。容器来了！

介绍

在现代软件开发中，应用程序是使用多种框架、语言和技术开发的。使用单片应用程序管理更新、CI/CD 和部署会给您带来很多麻烦。进入容器！在本指南中，您将了解 Docker 以及如何将其与您的 React 应用程序一起使用。

什么是 Docker？

Docker于 2013 年由 Docker Inc. 推出。它使应用程序能够使用容器在隔离状态下运行。这样一来，您的应用程序就可以只使用其所需的库和依赖项进行打包。与提供硬件虚拟化的虚拟机不同，容器通过将软件与其环境隔离开来提供操作系统级虚拟化，确保其尽管存在差异但仍能统一运行，并解决“它在我的计算机上可以运行”的问题。使用 Docker-swarm 或 Kubernetes 等编排工具，多个容器可以在一台主机或多台机器上运行。

设置Docker

要安装 Docker，请访问此URL并下载适合您的机器类型的设置。Docker 使用分层文件系统根据您在名为Dockerfile 的文件中提供的容器运行时规范来构建您的容器。安装 Docker 后，在终端中运行以下命令以验证 Docker 是否已安装。

      $ docker --version
Docker version 19.03.8, build afacb8b
    

设置 React 应用程序

接下来，选择您想要的任何 React 应用程序，或者通过运行以下命令从头开始设置另一个。

      $ npx create-react-app <your_app_name>

#<your_app_name> - preferred name of your app

现在在项目根目录创建一个名为Dockerfile的文件并添加以下内容。

      # pull the base image
FROM node:alpine

# set the working direction
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./

COPY package-lock.json ./

RUN npm install

# add app
COPY . ./

# start app
CMD ["npm", "start"]
    

这里发生了什么事🤔？

首先指示 Docker 拉取官方 Node 映像、为您的应用程序设置工作目录并安装所有依赖项。

为了确保容器不会臃肿，请添加.dockerignore文件以避免将不必要的文件复制到容器中。在.dockerignore文件中添加以下内容。

      node_modules
npm-debug.log
build
.dockerignore
**/.git
**/.DS_Store
**/node_modules
    

要启动你的容器，请在你的终端中运行以下命令来构建将在其上构建容器的图像。

      $ docker build -t ps-container:dev .

您的输出应类似于以下内容：

      Sending build context to Docker daemon  630.3kB
Step 1/8 : FROM node:alpine
 ---> 89234s7298ds
Step 2/8 : WORKDIR /app
 ---> Using cache
 ---> 8da38hd8a9848
Step 3/8 : ENV PATH /app/node_modules/.bin:$PATH
 ---> Using cache
 ---> e930973d8h383
Step 4/8 : COPY package.json ./
 ---> Using cache
 ---> jnd3898398h8r
Step 5/8 : COPY package-lock.json ./
 ---> 390jf983h8hf8
Step 6/8 : RUN npm install
 ---> Running in 23uf2983f98
 ...
Step 7/8 : COPY . ./
 ---> ca58e0ca87b9
Step 8/8 : CMD ["npm", "start"]
 ---> Running in cdcb3617af0c
Removing intermediate container cdcb3617af0c
 ---> d89b7bb5b6fa
Successfully built d89b7bb5b6fa
Successfully tagged ps-container:dev

$ docker image ls
REPOSITORY              TAG                 IMAGE ID            CREATED              SIZE
ps-container             dev                3894y8h893hd        About a minute ago   392MB
    

现在运行以下命令来创建并运行您的容器。

      $ docker run -it --rm \
-v ${PWD}:/app \
-v /app/node_modules \
-p 3001:3000 \
-e CHOKIDAR_USEPOLLING=true \
ps-container:dev
    

注意代码的作用：

它以交互模式启动容器。
-rm在容器退出后删除容器和卷。
v ${PWD}:/app将代码挂载到/app处的容器中。

结论

在本指南中，您学习了如何将 Docker 与 React 结合使用、构建镜像以及从该镜像创建 Docker 容器。请访问官方文档 https://docs.docker.com 了解更多信息。如果您想进一步了解，请随时在 Twitter 上与我联系，我的电子邮件地址是@DesmondNyamador。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

将 React.js 与 Docker 结合使用

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

# pull the base image FROM node:alpine # set the working direction WORKDIR /app # add `/app/node_modules/.bin` to $PATH ENV PATH /app/node_modules/.bin:$PATH # install app dependencies COPY package.json ./ COPY package-lock.json ./ RUN npm install # add app COPY . ./ # start app CMD ["npm", "start"]

Sending build context to Docker daemon 630.3kB Step 1/8 : FROM node:alpine ---> 89234s7298ds Step 2/8 : WORKDIR /app ---> Using cache ---> 8da38hd8a9848 Step 3/8 : ENV PATH /app/node_modules/.bin:$PATH ---> Using cache ---> e930973d8h383 Step 4/8 : COPY package.json ./ ---> Using cache ---> jnd3898398h8r Step 5/8 : COPY package-lock.json ./ ---> 390jf983h8hf8 Step 6/8 : RUN npm install ---> Running in 23uf2983f98 ... Step 7/8 : COPY . ./ ---> ca58e0ca87b9 Step 8/8 : CMD ["npm", "start"] ---> Running in cdcb3617af0c Removing intermediate container cdcb3617af0c ---> d89b7bb5b6fa Successfully built d89b7bb5b6fa Successfully tagged ps-container:dev $ docker image ls REPOSITORY TAG IMAGE ID CREATED SIZE ps-container dev 3894y8h893hd About a minute ago 392MB