Добавление простого приложения React form в существующий образ Nodejs docker

#node.js #reactjs #docker #docker-compose #dockerfile

#node.js #reactjs #docker #docker-compose #dockerfile

Вопрос:

Я создал Dockerfile, при запуске с помощью docker-compose в браузере отображается «Привет, мир». Теперь я хочу иметь возможность отображать простую форму реакции с некоторыми полями для ввода текста и кнопкой отправки. Есть ли примеры каких-либо простых проектов, которые я могу просто использовать. Как я буду обновлять свои файлы, которые я показал ниже

Это файлы, которые я использую в cam:

Package.json —

  {
  "name": "nodejs-hello",
  "version": "1.0.0",
  "description": "des",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" amp;amp; 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 Compose —

 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

То, что у меня есть сейчас, похоже на пример в этой ссылке.

Теперь я просто хочу иметь возможность отображать форму react в браузере.

Ответ №1:

Просто создайте свое приложение React, а затем добавьте эту строку, чтобы скопировать файлы src в контейнер:

 COPY . .
 

Кроме того, измените CMD (если вы используете CRA) на это:

 CMD [ "npm", "start" ]
 

Комментарии:

1. Спасибо, вы знаете пример формы реакции, которой я мог бы следовать?

2. Это долгий разговор, я рекомендую начать с базовой HTML-формы и некоторого руководства по react.. Я также был бы признателен 1, если бы это помогло, спасибо..

3. Я следую этому видео youtube.com/watch?v=qH4pJISKeoI .. должен ли я скопировать все из общедоступных папок и папок src в видео в свой контейнер, а затем выполнить установку npm и CMD [ «npm», «start» ]?