【问题标题】:Add a simple React form application to an existing Nodejs docker image将一个简单的 React 表单应用程序添加到现有的 Nodejs docker 映像中
【发布时间】:2021-03-03 15:31:27
【问题描述】:

我创建了一个 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

我现在拥有的与该链接中的示例类似。

现在我只想能够在浏览器中显示一个反应表单。

【问题讨论】:

    标签: node.js reactjs docker docker-compose dockerfile


    【解决方案1】:

    只需创建您的 React 应用程序,然后添加此行以将 src 文件复制到容器中:

    COPY . .
    

    另外,将CMD(如果您使用 CRA)更改为:

    CMD [ "npm", "start" ]
    

    【讨论】:

    • 谢谢,你知道我可以遵循的示例反应形式吗?
    • 这是一个冗长的对话,我建议从一个基本的 html 表单和一些反应教程开始。如果有帮助,我也很感激 +1,谢谢..
    • 我正在关注此视频youtube.com/watch?v=qH4pJISKeoI .. 我是否必须将视频中 public 和 src 文件夹中的所有内容复制到我的容器中,然后运行 ​​npm install 和 CMD [ "npm" , "开始" ] ?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-14
    • 1970-01-01
    • 1970-01-01
    • 2010-11-06
    • 2011-10-30
    • 2013-12-30
    • 1970-01-01
    相关资源
    最近更新 更多