將一個簡單的 React 表單應用程序添加到現有的 Nodejs docker 圖像

Question

我創建了一個 Dockerfile，當與 docker-compose 一起運行時，瀏覽器中會顯示“Hello world”。 現在我希望能夠顯示一個簡單的反應表單，其中包含一些用於輸入文本的字段和一個提交按鈕。 是否有我可以使用的任何簡單項目的示例。 我將如何更新我在下面顯示的文件

這些是我使用的文件：

Package.json -

 {
  "name": "nodejs-hello",
  "version": "1.0.0",
  "description": "des",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hh",
  "license": "ISC",
  "keywords": [
    "h"
  ],
  "dependencies": {
    "express": "^4.17.1"
  }
}

index.js -

    //now it load express module with `require` directive
var express = require('express')
var app = express()
const PORT = 8080;
//Define request response in root URL (/) and response with text Hello World!
app.get('/', function (req, res) {
  res.send('Hello World')
})
//Launch listening server on port 8080 and consoles the log.
app.listen(PORT, function () {
  console.log('app listening on port ' + PORT)
})

Dockerfile -

FROM node:latest

WORKDIR /app

COPY package.json index.js ./

RUN npm install

EXPOSE 8080

CMD node index.js

Docker 組成 -

version: "3"

services:
  web:
    image: my-image:1.0
    build: .
    ports:
      - '8080:8080'

https://medium.com/faun/a-simple-docker-setup-for-simple-hello-world-nodejs-application-bcf79bb608a0

我現在擁有的類似於該鏈接中的示例。

現在我只想能夠在瀏覽器中顯示一個反應表單。

Answer 1

只需創建您的 React 應用程序，然后添加此行以將 src 文件復制到容器中：

COPY . .

此外，將CMD （如果您使用的是 CRA）更改為：

CMD [ "npm", "start" ]