网站的总体方案与功能设计,外包网站建设价格,珠海品牌网站制作,wordpress 图片 本地使用docker部署node和react应用
Docker 使开发人员能够将所有应用程序打包到容器中。这些容器可以在任何安装了 Docker 的机器上运行#xff0c;并且应用程序将是相同的。这是在多个系统上运行代码库克隆的好方法#xff0c;并且我们可以确保它们都是相同的。
在本文中并且应用程序将是相同的。这是在多个系统上运行代码库克隆的好方法并且我们可以确保它们都是相同的。
在本文中我们将学习如何在 Docker 容器内创建和运行 NodeJS Express 后端和 React 前端应用。
在 Docker 中运行 NodeJS
开始之前请确保计算机上已安装并运行 Docker。
现在使用命令行导航到桌面等目录然后运行以下命令。
mkdir my-app-docker
cd my-app-docker
touch docker-compose.yml
mkdir api
cd api
npm init -y
npm i express
touch app.js Dockerfile .dockerignore
cd ..我们设置了一个名为 api 的后端并创建了一些 Docker 文件。现在在代码编辑器中打开项目并将以下代码添加到相应的文件中。
将其放入docker-compose.yml文件中。要非常注意 yaml 格式否则在尝试运行它时会出现 Docker 错误。
version: 3.8
services:api:build: ./apicontainer_name: api_backendports:- 4000:4000volumes:- ./api:/app- ./app/node_modules而我们的node应用非常简单就只有一个文件
const express require(express);const app express();const port process.env.PORT || 4000;app.get(/, (req, res) {res.send(Home Route);
});app.listen(port, () console.log(Server running on port ${port}, http://localhost:${port})
);现在将此行添加到.dockerignore文件中
node_modules把下面的代码添加到Dockerfile文件中
FROM node:16-alpineWORKDIR /appCOPY package.json .RUN npm installCOPY . .EXPOSE 4000CMD [node, app.js]最后将此运行脚本命令添加到package.json文件中。
scripts: {start: node app.js},使用 Nodemon 让服务器在发生更改时自动重新启动可选
如果我们希望每次更改后端文件时都重新启动服务器那么我们可以将其配置为使用 Nodemon。
我们所要做的就是更新api文件夹内的Dockerfile和package.json文件。
更新Dockerfile。我们现在在启动时安装 Nodemon 并使用dev作为运行命令。
FROM node:16-alpineRUN npm install -g nodemonWORKDIR /appCOPY package.json .RUN npm installCOPY . .EXPOSE 4000CMD [npm, run, dev]package.json现在使用 Nodemon 的运行脚本更新文件。
scripts: {start: node app.js,dev: nodemon -L app.js},我们刚刚创建了一个在端口 4000 上运行的基本 Express 应用程序。该端口也映射到 docker 中的 4000这让我们可以在 Docker 容器中运行它。
启动服务器
要像平常一样使用 Node 在 Docker 容器外部运行服务器只需在命令行中运行以下代码即可。我们需要确保位于 api 文件夹内。如果我们访问http://localhost:4000我们应该会在浏览器窗口中看到主路由。
npm run start让 Express 应用程序在 Docker 内运行需要不同的命令。首先我们需要位于docker-compose.yml文件所在的根文件夹中。现在运行下面的命令它应该在 Docker 容器内运行。
docker-compose up不要忘记首先停止运行节点服务器因为我们只能让一台服务器在端口 4000 上运行。
可以使用以下命令停止服务器也可以转到 Docker 应用程序并停止容器运行。
docker-compose down在 Docker 中运行 React 前端
现在让我们创建一个 React 项目。使用命令行进入 my-app-docker 的根文件夹。运行以下命令来设置项目。
npx create-react-app client
cd client
touch .dockerignore Dockerfile现在将以下代码添加到相应的文件中。
将此行添加到.dockerignore文件中。
node_modules将此代码放入Dockerfile文件中。
FROM node:17-alpineWORKDIR /appCOPY package.json .RUN npm installCOPY . .EXPOSE 3000CMD [npm, start]最后使用以下代码更新根文件夹中的docker-compose.yml。我们在底部添加了一个客户端部分其中包含用于在 Docker 容器内运行 React 的设置。
version: 3.8
services:api:build: ./apicontainer_name: api_backendports:- 4000:4000volumes:- ./api:/app- ./app/node_modulesclient:build: ./clientcontainer_name: client_frontendports:- 3000:3000volumes:- ./client:/app- ./app/node_modulesstdin_open: truetty: true启动服务器
要像平常一样使用 Node 在 Docker 容器外部运行服务器只需在命令行中运行以下代码即可。
npm run start确保我们位于客户端文件夹内。如果我们访问http://localhost:3000我们应该会在浏览器窗口中看到主路由。
让 React 应用程序在 Docker 内运行需要不同的命令。首先我们需要位于docker-compose.yml文件所在的根文件夹中。现在运行下面的命令它应该在 Docker 容器内运行。
docker-compose up不要忘记首先停止运行 React 应用程序服务器因为我们只能让一台服务器在端口 3000 上运行。
如果我们访问http://localhost:3000我们应该会在浏览器窗口中看到主路由。
我们可以使用以下命令停止服务器也可以转到 Docker 应用程序并停止容器运行。
docker-compose down通过此设置我们可以在 Docker 内同时运行 NodeJS 后端和 React 前端项目。如果遇到任何错误则可能需要打开 Docker 桌面应用程序并删除与该项目相关的任何镜像。然后我们可以尝试docker-compose up再次运行该命令。
