如何在 Node扫码H5和React盘口搭建应用飞鸟中使用新圣Docker(上)
【TG＿duoteJG】多特工作室杰哥duotee.com版权所有，禁止转载
新圣Docker使开发人员能够将GT江湖中所有应用程序搭建到盘口容器中。这些盘口容器可以在任何安装了新圣Docker的飞鸟机器上运行，并且应用程序飞鸟是相同的。这是在多个搭建系统上运行江湖公众号代码库克隆的好方法，您可以确定它们都将是相同征途的。
使用 新圣Docker 时 CI/CD 工作流程和 DevOps 测试环境明显更好，Docker 本质上是一组可以共享的软件工具。Kubernetes 是另一种用于操作多个 Docker 容器但规模更大的工具。
在本教程中，我们将学习如何在 Docker 容器中创建大富豪和运行 NodeJS Express旗舰28 后端和 React 前端。
在 Docker 中运行 NodeJS Express 后端
在开始之前，请确保您已在计算机上安装并运行 Docker。
现在使用命令行导航到类似桌面的目录，然后运行以下命令。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">mkdir </span>my-app-docker <span style="color:var(--syntax-text-color)">cd </span>my-app-docker <span style="color:var(--syntax-text-color)">touch </span>docker-compose.yml <span style="color:var(--syntax-text-color)">mkdir </span>api <span style="color:var(--syntax-text-color)">cd </span>api npm init <span style="color:var(--syntax-error-color)">-y</span> npm i express <span style="color:var(--syntax-text-color)">touch </span>app.js Dockerfile .dockerignore <span style="color:var(--syntax-text-color)">cd</span> .. </code></span></span>
我们设置了一个名为 api 的后端并创建了一些 Docker 文件。现在在代码编辑器中打开项目并将下面的代码添加到相应的文件中。
把这个放在
docker-compose.yml文件里。请注意 yaml 格式，否则在尝试运行时会出现 Docker 错误。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">version</span>: <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">3.8'</span> <span style="color:var(--syntax-name-color)">services</span>: <span style="color:var(--syntax-name-color)">api</span>: <span style="color:var(--syntax-name-color)">build</span>: <span style="color:var(--syntax-string-color)">./api</span> <span style="color:var(--syntax-name-color)">container_name</span>: <span style="color:var(--syntax-string-color)">api_backend</span> <span style="color:var(--syntax-name-color)">ports</span>: - <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">4000:4000'</span> <span style="color:var(--syntax-name-color)">volumes</span>: - <span style="color:var(--syntax-string-color)">./api:/app</span> - <span style="color:var(--syntax-string-color)">./app/node_modules</span> </code></span></span>
添加这是
app.js文件。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">express</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">require</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">express</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">app</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">express</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">port</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">process</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">env</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">PORT</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-literal-color)">4000</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">/</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">send</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Home Route</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">listen</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">port</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Server running on port </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">port</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">, http://localhost:</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">port</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">)</span>
<span style="color:var(--syntax-text-color)">);</span>
</code></span></span>
现在将此行添加到
.dockerignore文件中。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>node_modules </code></span></span>
接下来将此代码添加到
Dockerfile文件中。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>FROM node:16-alpine WORKDIR /app COPY package.json <span style="color:var(--syntax-text-color)">.</span> RUN npm <span style="color:var(--syntax-text-color)">install </span>COPY <span style="color:var(--syntax-text-color)">.</span> <span style="color:var(--syntax-text-color)">.</span> EXPOSE 4000 CMD <span style="color:var(--syntax-error-color)">[</span><span style="color:var(--syntax-string-color)">"node"</span>, <span style="color:var(--syntax-string-color)">"app.js"</span><span style="color:var(--syntax-error-color)">]</span> </code></span></span>
最后将此运行脚本添加到
package.json文件中。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">"scripts"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">"start"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"node app.js"</span>
<span style="color:var(--syntax-text-color)">}</span>,
</code></span></span>
（可选）使用 Nodemon 让服务器在发生更改时自动重启
如果您希望每次更改后端文件时都重新启动服务器，则可以将其配置为使用 Nodemon。
您所要做的就是更新
api
Dockerfile文件夹中的and
package.json文件。
使用下面的代码更新
Dockerfile代码。我们现在开始安装 Nodemon 并使用
dev作为运行命令。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>FROM node:16-alpine RUN npm <span style="color:var(--syntax-text-color)">install</span> <span style="color:var(--syntax-error-color)">-g</span> nodemon WORKDIR /app COPY package.json <span style="color:var(--syntax-text-color)">.</span> RUN npm <span style="color:var(--syntax-text-color)">install </span>COPY <span style="color:var(--syntax-text-color)">.</span> <span style="color:var(--syntax-text-color)">.</span> EXPOSE 4000 CMD <span style="color:var(--syntax-error-color)">[</span><span style="color:var(--syntax-string-color)">"npm"</span>, <span style="color:var(--syntax-string-color)">"run"</span>, <span style="color:var(--syntax-string-color)">"dev"</span><span style="color:var(--syntax-error-color)">]</span> </code></span></span>
现在
package.json用这个 Nodemon 的运行脚本更新文件。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">"scripts"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">"start"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"node app.js"</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">"dev"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"nodemon -L app.js"</span>
<span style="color:var(--syntax-text-color)">}</span>,
</code></span></span>
我们刚刚创建了一个在端口 4000 上运行的基本 NodeJS Express 应用程序。该端口也映射到 docker 中的 4000，这让我们可以在 Docker 容器中运行它。
启动服务器
要像往常一样使用 Node 在 Docker 容器之外运行服务器，只需在命令行中运行以下代码。您需要确保您位于 api 文件夹中。如果您访问 ，您应该会在浏览器窗口中看到主路由。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npm run start </code></span></span>
让 NodeJS Express 应用程序在 Docker 内部运行需要不同的命令。首先，您需要位于文件所在的根文件夹中
docker-compose.yml。现在运行下面的命令，它应该在 Docker 容器内运行。
不要忘记先停止节点服务器的运行，因为您只能在端口 4000 上运行一个服务器。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>docker-compose up </code></span></span>
如果您访问 ，您应该会在浏览器窗口中看到主路由。
您可以使用以下命令停止服务器，也可以转到 Docker 应用程序并停止容器运行。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>docker-compose down </code></span></span>
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70018727/viewspace-2901853/ ，如需转载，请注明出处，否则将追究法律责任。
下一篇：
没有了~
请登录后发表评论
登录
全部评论
