使用docker部署node和react應(yīng)用

Docker 使開發(fā)人員能夠?qū)⑺袘?yīng)用程序打包到容器中。這些容器可以在任何安裝了 Docker 的機(jī)器上運(yùn)行，并且應(yīng)用程序?qū)⑹窍嗤?。這是在多個(gè)系統(tǒng)上運(yùn)行代碼庫克隆的好方法，并且我們可以確保它們都是相同的。

在本文中，我們將學(xué)習(xí)如何在 Docker 容器內(nèi)創(chuàng)建和運(yùn)行 NodeJS Express 后端和 React 前端應(yīng)用。

在 Docker 中運(yùn)行 NodeJS

開始之前，請確保計(jì)算機(jī)上已安裝并運(yùn)行 Docker。

現(xiàn)在使用命令行導(dǎo)航到桌面等目錄，然后運(yùn)行以下命令。

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 ..

我們設(shè)置了一個(gè)名為 api 的后端并創(chuàng)建了一些 Docker 文件?，F(xiàn)在在代碼編輯器中打開項(xiàng)目并將以下代碼添加到相應(yīng)的文件中。

將其放入docker-compose.yml文件中。要非常注意 yaml 格式，否則在嘗試運(yùn)行它時(shí)會(huì)出現(xiàn) Docker 錯(cuò)誤。

version: '3.8'
services:api:build: ./apicontainer_name: api_backendports:- '4000:4000'volumes:- ./api:/app- ./app/node_modules

而我們的node應(yīng)用非常簡單，就只有一個(gè)文件

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}`)
);

現(xiàn)在將此行添加到.dockerignore文件中

node_modules

把下面的代碼添加到Dockerfile文件中

FROM node:16-alpineWORKDIR /appCOPY package.json .RUN npm installCOPY . .EXPOSE 4000CMD ["node", "app.js"]

最后將此運(yùn)行腳本命令添加到package.json文件中。

"scripts": {"start": "node app.js"},

使用 Nodemon 讓服務(wù)器在發(fā)生更改時(shí)自動(dòng)重新啟動(dòng)（可選）

如果我們希望每次更改后端文件時(shí)都重新啟動(dòng)服務(wù)器，那么我們可以將其配置為使用 Nodemon。

我們所要做的就是更新api文件夾內(nèi)的Dockerfile和package.json文件。

更新Dockerfile。我們現(xiàn)在在啟動(dòng)時(shí)安裝 Nodemon 并使用dev作為運(yùn)行命令。

FROM node:16-alpineRUN npm install -g nodemonWORKDIR /appCOPY package.json .RUN npm installCOPY . .EXPOSE 4000CMD ["npm", "run", "dev"]

package.json現(xiàn)在使用 Nodemon 的運(yùn)行腳本更新文件。

"scripts": {"start": "node app.js","dev": "nodemon -L app.js"},

我們剛剛創(chuàng)建了一個(gè)在端口 4000 上運(yùn)行的基本 Express 應(yīng)用程序。該端口也映射到 docker 中的 4000，這讓我們可以在 Docker 容器中運(yùn)行它。

啟動(dòng)服務(wù)器

要像平常一樣使用 Node 在 Docker 容器外部運(yùn)行服務(wù)器，只需在命令行中運(yùn)行以下代碼即可。我們需要確保位于 api 文件夾內(nèi)。如果我們訪問http://localhost:4000，我們應(yīng)該會(huì)在瀏覽器窗口中看到主路由。

npm run start

讓 Express 應(yīng)用程序在 Docker 內(nèi)運(yùn)行需要不同的命令。首先，我們需要位于docker-compose.yml文件所在的根文件夾中?，F(xiàn)在運(yùn)行下面的命令，它應(yīng)該在 Docker 容器內(nèi)運(yùn)行。

docker-compose up

不要忘記首先停止運(yùn)行節(jié)點(diǎn)服務(wù)器，因?yàn)槲覀冎荒茏屢慌_(tái)服務(wù)器在端口 4000 上運(yùn)行。

可以使用以下命令停止服務(wù)器，也可以轉(zhuǎn)到 Docker 應(yīng)用程序并停止容器運(yùn)行。

docker-compose down

在 Docker 中運(yùn)行 React 前端

現(xiàn)在讓我們創(chuàng)建一個(gè) React 項(xiàng)目。使用命令行進(jìn)入 my-app-docker 的根文件夾。運(yùn)行以下命令來設(shè)置項(xiàng)目。

npx create-react-app client
cd client
touch .dockerignore Dockerfile

現(xiàn)在將以下代碼添加到相應(yīng)的文件中。

將此行添加到.dockerignore文件中。

node_modules

將此代碼放入Dockerfile文件中。

FROM node:17-alpineWORKDIR /appCOPY package.json .RUN npm installCOPY . .EXPOSE 3000CMD ["npm", "start"]

最后使用以下代碼更新根文件夾中的docker-compose.yml。我們在底部添加了一個(gè)客戶端部分，其中包含用于在 Docker 容器內(nèi)運(yùn)行 React 的設(shè)置。

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

啟動(dòng)服務(wù)器

要像平常一樣使用 Node 在 Docker 容器外部運(yùn)行服務(wù)器，只需在命令行中運(yùn)行以下代碼即可。

npm run start

確保我們位于客戶端文件夾內(nèi)。如果我們訪問http://localhost:3000，我們應(yīng)該會(huì)在瀏覽器窗口中看到主路由。

讓 React 應(yīng)用程序在 Docker 內(nèi)運(yùn)行需要不同的命令。首先，我們需要位于docker-compose.yml文件所在的根文件夾中?，F(xiàn)在運(yùn)行下面的命令，它應(yīng)該在 Docker 容器內(nèi)運(yùn)行。

docker-compose up

不要忘記首先停止運(yùn)行 React 應(yīng)用程序服務(wù)器，因?yàn)槲覀冎荒茏屢慌_(tái)服務(wù)器在端口 3000 上運(yùn)行。

如果我們訪問http://localhost:3000，我們應(yīng)該會(huì)在瀏覽器窗口中看到主路由。

我們可以使用以下命令停止服務(wù)器，也可以轉(zhuǎn)到 Docker 應(yīng)用程序并停止容器運(yùn)行。

docker-compose down

通過此設(shè)置，我們可以在 Docker 內(nèi)同時(shí)運(yùn)行 NodeJS 后端和 React 前端項(xiàng)目。如果遇到任何錯(cuò)誤，則可能需要打開 Docker 桌面應(yīng)用程序并刪除與該項(xiàng)目相關(guān)的任何鏡像。然后我們可以嘗試docker-compose up再次運(yùn)行該命令。