node.js - Το Rollup δεν παράγει build στο docker-compose


Δημιουργώ μια εφαρμογή React και προσπαθώ να τη λειτουργήσω μέσω μιας συνταγής docker-compose. Το έχω να λειτουργεί με

docker container run -p 3000:3000 --name node --rm -v "$PWD:/app" --init --workdir /app --entrypoint npm -it node:latest start

και αποφάσισα να το μετατρέψω σε συνταγή αφού θα προσθέσω περισσότερες υπηρεσίες στο μέλλον. Ωστόσο, δεν μπορώ να κάνω το rollup να δημιουργήσει ένα πακέτο. Εδώ είναι το package.json μου και

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "rollup -c rollup.config.ts --configPlugin typescript -w"
  },
  "devDependencies": {
    "@babel/preset-react": "7.16.7",
    "@rollup/plugin-babel": "5.3.0",
    "@rollup/plugin-commonjs": "21.0.1",
    "@rollup/plugin-node-resolve": "13.1.3",
    "@rollup/plugin-replace": "3.0.1",
    "@rollup/plugin-typescript": "8.3.0",
    "@types/node": "17.0.13",
    "@types/react": "17.0.38",
    "@types/react-dom": "17.0.11",
    "rollup": "2.66.1",
    "rollup-plugin-livereload": "2.0.5",
    "rollup-plugin-serve": "1.1.0",
    "typescript": "4.5.5"
  },
  "dependencies": {
    "@emotion/react": "11.7.1",
    "@emotion/styled": "11.6.0",
    "@mui/material": "5.3.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

docker-compose.yml

version: '3'

services:
  frontend:
    image: node:latest
    working_dir: /app
    user: 'node'
    ports: 
      - '3000:3000'
    volumes:
      - .:/app
    entrypoint: "npm run start"

rollup.config.ts

import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import livereload from 'rollup-plugin-livereload';
import serve from 'rollup-plugin-serve';
import typescript from '@rollup/plugin-typescript';
import path from 'path';

export default {
    input: path.join(__dirname, 'src', 'index.tsx'),
    output: {
        file: path.join(__dirname, 'dist', 'bundle.js'),
        format: "iife",
        sourcemap: true
    },
    watch: {
        clearScreen: false
    },
    plugins: [
        typescript(),
        nodeResolve({ extensions: ['.js'] }),
        replace({ 
            preventAssignment: true,
            'process.env.NODE_ENV': JSON.stringify('development')
        }),
        babel({ presets: ['@babel/preset-react']}),
        commonjs(),
        serve({
            open: true,
            verbose: true,
            contentBase: ['', 'src'],
            host: '0.0.0.0',
            port: 3001
        }),
        livereload({ watch: 'dist' })
    ]
}

Η εκτέλεση του docker-compose up εμφανίζει τα εξής στην stdout. Δεν καταλαβαίνω γιατί κολλάει εκεί. Έχω δοκιμάσει να εκτελέσω το npm start μέσα στο κοντέινερ και δουλεύει κανονικά και δημιουργεί ένα bundle, αλλά η εκτέλεση μέσω του docker-compose αποτυγχάνει.

WARNING: The Docker Engine you're using is running in swarm mode.

Compose does not use swarm mode to deploy services to multiple nodes in a swarm. All containers will be scheduled on the current node.

To deploy your application across the swarm, use `docker stack deploy`.

Creating network "app_1" with the default driver
Creating app_1 ... done
Attaching to app_1
frontend_1  | 
frontend_1  | > [email  start
frontend_1  | > rollup -c rollup.config.ts --configPlugin typescript -w
frontend_1  | 
frontend_1  | loaded rollup.config.ts with warnings
frontend_1  | (!) Plugin typescript: @rollup/plugin-typescript TS7016: Could not find a declaration file for module 'rollup-plugin-serve'. '/app/node_modules/rollup-plugin-serve/dist/index.cjs.js' implicitly has an 'any' type.
frontend_1  |   Try `npm i --save-dev @types/rollup-plugin-serve` if it exists or add a new declaration (.d.ts) file containing `declare module 'rollup-plugin-serve';`
frontend_1  | rollup.config.ts: (6:19)
frontend_1  | 
frontend_1  | 6 import serve from 'rollup-plugin-serve';
frontend_1  |                     ~~~~~~~~~~~~~~~~~~~~~
frontend_1  | 
frontend_1  | rollup v2.66.1
frontend_1  | bundles /app/src/index.tsx → dist/bundle.js...
frontend_1  | babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers
frontend_1  | [BABEL] Note: The code generator has deoptimised the styling of /app/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB.

Απάντηση #1

Είχα ένα παρόμοιο πρόβλημα, αλλά δεν μπορώ να υποσχεθώ ότι είναι ακριβώς το ίδιο.

Μετά από περισσότερη από μια ώρα απελπισμένης αποσφαλμάτωσης, συνειδητοποίησα ότι στην περίπτωσή μου το κρίσιμο σημείο ήταν η κατανομή του τερματικού. Το έκανα να λειτουργεί προσθέτοντας:

services:
  frontend:
    tty: true

Απάντηση #2

Αλλάξτε το σημείο εισόδου docker-compose σας σε

services:
  frontend:
    # ...
    entrypoint: bash -c "npm run start"

ή entrypoint: ["npm", "run", "start"]