Запуск реакции и узла в одном порту с использованием Dockerfile

Question

Я пытаюсь запустить docker для моего примера проекта, где в контейнере мне нужен один порт для запуска, но сборка кода реакции будет служить index.html, у меня ниже структура папок.

В файле index.js я попытался добавить статический путь. Что я здесь не так делаю?Я прокомментировал это ..

Я много пробовал.

sampleapp
   client
     // using cra (create react app) files
     src
     public
     ...
   server
     index.js
   Dockerfile

// app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  state = {
    response: null
  }

  componentWillMount(){
    this.dataFetching()
  }

  dataFetching = async () => {
    const resjson = await fetch('/api/data');
    const res = await resjson.json();
    this.setState({
      response: res.data
    })
  }


  render() {
    return (
        this.state.response ? this.state.response : null
    );
  }
}

export default App;

// package.json --client

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:4000"
}

// index.js - сервер

const express = require('express');
const path = require('path');
const app = express();

// app.use(express.static(path.join(__dirname,  'build')));

// app.get('/*', function(req, res) {
//     res.sendFile(path.join(__dirname, '..', 'app', 'build', 'index.html'));
// });

app.get('/api/data', (req, res) => {
    res.send({data: "Success"})
})

app.listen(4000);

// Dockerfile - sampleapp

FROM node:10.15.1-alpine

COPY . /var/app

WORKDIR /var/app/client
RUN npm install --no-cache && npm run build && npm install -g serve


WORKDIR /var/app/server
RUN npm install --no-cache


EXPOSE 4000
EXPOSE 3000

Answer 1

Для Dockerfile вы можете изменить его на следующее:

FROM node:10.15.1-alpine

COPY . /var/app

WORKDIR /var/app/client
RUN npm install --no-cache && npm run build && npm install -g serve


WORKDIR /var/app/server
RUN npm install --no-cache

EXPOSE 4000 

CMD [ "npm", "start", "index.js" ]

Для index.js (сервер) вы можете изменить его на следующее:

const express = require('express');
const path = require('path');
const app = express();

app.get('/api/data', (req, res) => {
    res.send({data: "Success"})
})

app.use(express.static(path.join(__dirname,  '..', 'client', 'build')));

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, '..', 'client', 'build', 'index.html'));
});

app.listen(4000, '0.0.0.0');

1. React будет передаваться как статический файл через nodeJS.
2. index.js необходимо связать с 0.0.0.0, чтобы вы могли подключиться к нему извне контейнера.