如何停靠React应用程序
#javascript #网络开发人员 #react #docker

什么是Docker?

Docker是世界上最常用的平台之一。使用Docker,开发人员可以通过将应用程序源代码与操作系统和库(需要运行应用程序所需的操作系统)相结合来容忍其应用程序(后端或前端),以便可以在任何环境中运行容器化的图像文件。因此,开发人员不需要坚持单个云平台。如果任何平台支持Docker,则可以在需要时轻松更改平台。

先决条件

对于本指南,您需要一个React项目。最好对Docker图像和容器之类的事物有一个简单的理解。但是我们也会讨论这些。

另一件事是Docker桌面。这不是必须的。您不需要Docker桌面应用程序来运行Docker命令。但是最好。

什么是Docker图像?

简单地,Docker映像是包含应用程序的模板,以及在Docker上运行该应用程序所需的所有依赖项。图像是最重的内容。 Docker图像有多个层。

基本图像 - 这是我们使用Docker build Command

从头开始构建的图层

父型图像 - 父映像可以是Docker图像中的第一层。这是一个重复使用的图像,是所有其他层的基础。

图层 - 使用代码将其在容器中运行的代码添加到基本图像中。 Docker的默认状态是显示所有顶层图像,包括存储库,标签和文件大小。

容器层 - 码头图像不仅创建一个新容器,而且还创建了可写的或容器层。该层主机对运行容器进行了更改,并存储新编写和删除的文件,以及对现有文件的更改

docker清单 - 码头图像的这一部分是一个附加文件。它使用JSON格式来描述图像,使用图像标签和数字签名等信息。

什么是Docker容器?

一个容器是包装代码及其所有依赖项的标准软件单位,因此该应用程序从一个计算环境迅速可靠地运行到另一个计算环境。

Docker图像在Docker发动机上运行时成为容器。无论基础架构如何

现在我们对我们将要做什么有了一个想法。所以让我们开始。

脚步

步骤1-创建一个ReactJS项目

这对您来说应该是一件容易的事。要创建一个ReactJS项目,您只需要运行以下命令。
npx create-react-app react-docker-training

步骤2-创建一个.dockerignore文件
因此,下一步是创建一个.dockerignore文件。它与.gitignore文件有点相同。这样做的目的是告诉Docker构建Docker Image时避免使用这些文件。

创建文件有两种方法。最简单的方法是手动创建它并命名。

或者您可以使用以下命令来执行

touch .dockerignore

由于这是一个简单的项目,因此我们没有太多忽略。但是我们必须忽略的一件事是node_modules文件夹。因此,让我们将其添加到.dockerignore文件中。

步骤3-创建一个dockerfile
要从ReactJS项目中创建Docker映像,我们需要告诉Docker该怎么做。换句话说,我们需要给出构建说明。那就是我们要放在码头上的东西。

就像第一步一样,您可以手动创建文件,也可以使用以下命令

touch Dockerfile

现在添加构建指令。

您可以看到,这是一个多阶段的构建。在阶段1中,我们正在使用节点:17-alpine创建图像。在第2阶段,我们创建另一个图像。但是这次使用上一个图像和nginx。

nginx主要用于生产构建中。它减小了图像的大小。

步骤4-构建Docker Image
由于我们拥有所有文件,所以让我们继续创建图像。您可以通过两种方式执行此操作。如果您使用的是VS代码,则有Docker的扩展名。安装后,您只需右键单击Dockerfile并构建图像。

但这不是一个好方法。因此,在本文中,我将使用Docker命令来做到这一点。

打开VS代码的终端。并运行以下命令

docker build -t docker-react-image:1.0 .

docker-react-image是图像的名称。您可以给任何喜欢的名字。 1.0是图像的标签。

构建完成后,让我们运行

docker image ls

列出所有图像。您应该能够看到新创建的图像。

步骤5-使用图像
创建并运行一个容器 现在我们有了图像,让我们创建一个容器。以便我们可以访问该应用程序。

为此,您需要执行Docker Run命令。在终端中,执行命令如下。

Docker Run -D -P 4000:80 -name Docker-react-container docker-react-image:1.0

让我们谈论这个命令。

  • -d表示在背景和打印容器ID中运行容器。
  • -p用于端口映射。端口映射用于访问Docker容器内运行的服务。我们打开一个主机端口,使我们可以访问Docker容器内的相应开放端口。上面的命令启动了HTTPD容器,并将主机的端口4000映射到该容器内部的端口80。默认情况下,HTTPD服务器在端口80上听。因此,现在,我们可以使用主机计算机上的端口4000访问该应用程序
  • - 名称用于容器名称。在这里,您可以使用您喜欢的任何名称。
  • 最后,我们之前创建的图像的名称。请记住,在Docker Run命令中,最终参数必须是图像名称。 因此,在准备就绪时继续运行命令。创建容器后,您应该获得ID。

Step 6 - Running the application
现在,我们创建了一个图像,也是使用图像的容器。因此,我们应该能够看到我们的应用程序运行。让我们去Local主机:4000并检查。

宾果游戏。在这里,我们的React应用程序在Docker容器上运行。

Final result