网站推广方案策划书2000erp系统可以自学吗
使用docker部署node和react应用
Docker 使开发人员能够将所有应用程序打包到容器中。这些容器可以在任何安装了 Docker 的机器上运行,并且应用程序将是相同的。这是在多个系统上运行代码库克隆的好方法,并且我们可以确保它们都是相同的。
在本文中,我们将学习如何在 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:4000'volumes:- ./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:4000'volumes:- ./api:/app- ./app/node_modulesclient:build: ./clientcontainer_name: client_frontendports:- '3000:3000'volumes:- ./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再次运行该命令。
