【发布时间】：2022-02-08 15:53:21
【问题描述】：
我正在将我的 react 应用程序移动到 docker，我正在处理遗留项目，我们有多个 react 应用程序。我们在需要使用此文件的每个页面上的脚本标签中附加带有反应应用程序的脚本。对于 docker，我们想使用 Express 来提供我们的文件。 有没有办法运行多个监视命令？
这是我的 package.json 文件：
{
"name": "docker apps",
"version": "3.0.0",
"description": "apps",
"license": "ISC",
"author": "devs",
"main": "main.js",
"engines": {
"node": ">=14.7.0",
"npm": ">=6.14.13"
},
"scripts": {
"requirements-check": "node checkNodeVersion.js",
"react": "webpack --env.mode production --env.app react",
"react-watch": "webpack --env.mode development --env.app react --watch",
"serve": "nodemon server.js",
"serve:prod": "node server.js --port=80",
"build": "npm run react",
"start": "npm run react-watch",
"test": "jest",
"lint": "eslint .",
"dev-start": "concurrently \"npm run react-watch\" \"npm run serve\"",
"dev-build": "concurrently \"npm run build\" \"npm run serve:prod\"",
"lint-payment": "eslint payment/",
"lint-formLibrary": "eslint formLibrary/",
"lint-fileManager": "eslint fileManager/",
"lint-blockLibrary": "eslint LPBlockLibrary/",
"lint-contracts": "eslint contracts/",
"lint-payment:fix": "eslint --fix payment/",
"lint-formLibrary:fix": "eslint --fix formLibrary/",
"lint-fileManager:fix": "eslint --fix fileManager/",
"lint-blockLibrary:fix": "eslint --fix LPBlockLibrary/",
"lint-contracts:fix": "eslint --fix contracts/",
"lint:fix": "eslint --fix ."
},
"dependencies": {
"@mikecousins/react-pdf": "^5.5.1",
"@tkaramanski/fmcomponents": "^1.6.2",
"@types/testing-library__jest-dom": "^5.9.5",
"axios": "^0.21.1",
"bootstrap": "^4.1.3",
"classnames": "^2.2.6",
"cors": "^2.8.5",
"express": "^4.17.1",
"gulp-cli": "^2.2.0",
"gulp-install": "^1.1.0",
"handlebars-loader": "^1.7.1",
"jsdom": "^16.6.0",
"lodash": "^4.17.11",
"postcss": "^8.1.4",
"postcss-js": "^3.0.1",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-bs-notifier": "^5.0.0",
"react-datepicker": "^4.1.1",
"react-dnd": "^7.3.2",
"react-dnd-html5-backend": "^7.2.0",
"react-dom": "^16.9.0",
"react-dropzone": "^7.0.1",
"react-hook-form": "^4.9.6",
"react-hot-loader": "^4.12.18",
"react-infinite-scroll-component": "^4.2.0",
"react-jss": "^8.6.1",
"react-popper-tooltip": "^4.3.1",
"react-redux": "^7.1.3",
"react-router-dom": "^5.2.0",
"react-scrollbar": "^0.5.4",
"reactstrap": "^6.5.0",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"resolve-url-loader": "^3.1.2",
"semver": "^5.7.1",
"styled-components": "^5.3.0",
"typesafe-actions": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.13.14",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-optional-chaining": "^7.13.12",
"@babel/plugin-transform-runtime": "^7.13.10",
"@babel/preset-env": "^7.13.12",
"@babel/preset-react": "^7.13.13",
"@babel/preset-stage-0": "^7.8.3",
"@babel/preset-typescript": "^7.13.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.5",
"@tkaramanski/fmcomponents": "^1.5.1",
"@types/jest": "^26.0.22",
"@types/react": "^17.0.3",
"@types/react-datepicker": "^4.1.4",
"@types/react-dom": "^17.0.2",
"@types/react-lazyload": "^3.1.0",
"@types/react-redux": "^7.1.16",
"@types/react-router-dom": "^5.1.8",
"@types/styled-components": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"autoprefixer": "^9.8.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-macros": "^3.0.1",
"babel-plugin-styled-components": "^1.12.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^3.0.0",
"concurrently": "^5.2.0",
"copy-webpack-plugin": "^6.0.1",
"css-loader": "^3.6.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.4",
"eslint": "^7.10.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.21.3",
"eslint-plugin-react-hooks": "^4.2.0",
"extract-loader": "^5.1.0",
"file-loader": "^6.0.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-cli": "^2.2.0",
"gulp-concat": "^2.6.1",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"husky": "^4.3.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"mini-css-extract-plugin": "^0.9.0",
"moment": "^2.26.0",
"postcss-loader": "^3.0.0",
"prettier": "^2.4.1",
"pump": "^3.0.0",
"react-copy-to-clipboard": "^5.0.2",
"react-test-renderer": "^16.13.1",
"react-tippy": "^1.4.0",
"redux-mock-store": "^1.5.4",
"renamer": "^1.1.4",
"sass": "^1.35.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"ts-jest": "^26.5.4",
"ts-loader": "^8.1.0",
"typescript": "4.2.3",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-fix-style-only-entries": "^0.5.0",
"webpack-merge": "^4.2.2",
"wildcards-entry-webpack-plugin": "^2.1.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run requirements-check",
"pre-push": "npm run lint"
}
},
"jest": {
"setupTestFrameworkScriptFile": "./setupTests.js",
"setupFiles": [
"./payment/src/__mocks__/data.js"
],
"collectCoverageFrom": [
"payment/src/__tests__/*.{js,jsx}",
"LPBlockLibrary/src/__testes__/*{ts,tsx}"
],
"moduleNameMapper": {
"\\.(png|jpg|gif|ttf|eot|svg)$": "<rootDir>/config/jest/fileMock.js"
},
"transform": {
"\\.tsx?$": "ts-jest",
"\\.jsx?$": "babel-jest"
}
}
}
这是我的码头工人：
FROM node:14.17.0
WORKDIR /frontend-apps
ENV PATH /frontend-apps/node_modules/.bin:$PATH
COPY package.json \
package-lock.json \
.npmrc ./
RUN npm config set strict-ssl false
RUN npm install
RUN npm config set strict-ssl true
COPY . ./
EXPOSE 80
CMD [ "npm", "run", "dev-start"]
这是我的 docker-compose 文件。
version: '3.7'
services:
frontend-docker-app:
container_name: docker-front-apps
build:
context: .
dockerfile: Dockerfile.test
volumes:
- '.:/frontendApps'
- '/frontendApps/node_modules'
ports:
- 3000:3000
在 docker 文件中我尝试同时运行多个命令
"react-watch": "webpack --env.mode development --env.app react --watch",
"serve": "nodemon server.js",
"dev-start": "concurrently \"npm run react-watch\" \"npm run serve\"",
【问题讨论】：
-
您应该能够在普通的非容器节点开发环境中
npm run dev-start，即使您最终是通过 Docker 进行部署。
标签： node.js reactjs docker webpack