Node.js SyntaxError:在Docker容器上部署React应用程序时出现意外标识符_Node.js_Reactjs_Docker Compose_Dockerfile_Containers

Node.js SyntaxError:在Docker容器上部署React应用程序时出现意外标识符

node.js reactjs docker-compose

Node.js SyntaxError:在Docker容器上部署React应用程序时出现意外标识符,node.js,reactjs,docker-compose,dockerfile,containers,Node.js,Reactjs,Docker Compose,Dockerfile,Containers,我是ReactJS world的新手，帮助一个团队将React应用程序部署到Docker容器中。我完成了以下任务在EC2中创建Ubuntu机器并安装Docker引擎将整个React代码复制到其中一个文件夹中，添加了DockerFile和Docker composeyml文件。团队中几乎没有其他应用程序可以一起部署，这就是为什么我将docker compose文件包括在内。但是，现在只需部署一个React应用程序完成后，docker compose up将创建容器并立即退出。然后我检查了退出

我是ReactJS world的新手，帮助一个团队将React应用程序部署到Docker容器中。我完成了以下任务

在EC2中创建Ubuntu机器并安装Docker引擎

将整个

React

代码复制到其中一个文件夹中，添加了

DockerFile

和

Docker compose

yml文件。团队中几乎没有其他应用程序可以一起部署，这就是为什么我将docker compose文件包括在内。但是，现在只需部署一个

React

应用程序

完成

后，docker compose up

将创建容器并立即退出。然后我检查了退出容器的日志（如下所示）

/usr/src/app/src/index.js:1从“React”导入React； ^^^^^

SyntaxError:意外的标识符 at模块编译（内部/modules/cjs/loader.js:723:23） at Object.Module._extensions..js（internal/modules/cjs/loader.js:789:10） at Module.load（内部/modules/cjs/loader.js:653:32）在tryModuleLoad（内部/modules/cjs/loader.js:593:12） at Function.Module._load（内部/modules/cjs/loader.js:585:3）位于Function.Module.runMain（internal/modules/cjs/loader.js:831:12）启动时（内部/bootstrap/node.js:283:19）在bootstrapNodeJSCore（internal/bootstrap/node.js:623:3）

我研究了这个错误，看起来这是因为编译、缺少网页包或React应用程序中的某些东西。我不知道该在哪里解决什么问题

下面是

package.json

文件，如果您能帮助解决问题，请参阅

{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@rjsf/core": "^2.3.0",
    "@sentry/browser": "^5.23.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "FormData": "^0.10.1",
    "append-query": "^2.1.0",
    "axios": "^0.19.2",
    "babel-loader": "8.1.0",
    "bootstrap": "^4.5.2",
    "es6-promise": "^4.2.8",
    "install": "^0.13.0",
    "lodash": "^4.17.20",
    "log": "^6.0.0",
    "mdbreact": "^4.27.0",
    "node-sass": "^4.14.1",
    "npm": "^6.14.8",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-bootstrap-tabs": "^2.0.0",
    "react-confirm-alert": "^2.6.2",
    "react-data-table-component": "^6.11.0",
    "react-dom": "^16.13.1",
    "react-fontawesome": "^1.7.1",
    "react-jsonschema-form": "^1.8.1",
    "react-popup": "^0.10.0",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-stepzilla": "^6.0.2",
    "react-stepzilla-redux": "0.0.3",
    "react-toastify": "^6.0.8",
    "react-tooltip": "^4.2.8",
    "reactstrap": "^8.5.1",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "styled-components": "5.1.0",
    "validate": "^5.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.11.5"
  }
}

以下是

DockerFile

FROM node:10
# FROM alpine:latest
WORKDIR /usr/src/app

# add node_modules/.bin:$path
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# Install app dependencies
COPY package*.json ./

RUN npm install


# Bundle app source
COPY . .

#
EXPOSE 80
CMD npm start

而且，

docker compose

文件如下所示

version: "3"

services:
  web:
    build: ./pdf_web_frontend
    command: "node src/index.js"
    ports:
      - "800:80"

你觉得上面有什么问题吗？蒂亚

注意：我已经看到了此链接

经过大量研究，我可以部署此react应用程序。以下是问题

问题在于

dockerfile

和

dockercompose

文件。我添加了具有不同内容的全新文件

React应用程序正在部署到某个糟糕的端口。因此，我在

package.json

文件中显式添加了8080端口。这不是一个干净的解决方案，但它起了作用

下面是新文件

package.json

{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@rjsf/core": "^2.3.0",
    "@sentry/browser": "^5.23.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "FormData": "^0.10.1",
    "append-query": "^2.1.0",
    "axios": "^0.19.2",
    "babel-loader": "8.1.0",
    "bootstrap": "^4.5.2",
    "es6-promise": "^4.2.8",
    "install": "^0.13.0",
    "lodash": "^4.17.20",
    "log": "^6.0.0",
    "mdbreact": "^4.27.0",
    "node-sass": "^4.14.1",
    "npm": "^6.14.8",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-bootstrap-tabs": "^2.0.0",
    "react-confirm-alert": "^2.6.2",
    "react-data-table-component": "^6.11.0",
    "react-dom": "^16.13.1",
    "react-fontawesome": "^1.7.1",
    "react-jsonschema-form": "^1.8.1",
    "react-popup": "^0.10.0",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-stepzilla": "^6.0.2",
    "react-stepzilla-redux": "0.0.3",
    "react-toastify": "^6.0.8",
    "react-tooltip": "^4.2.8",
    "reactstrap": "^8.5.1",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "styled-components": "5.1.0",
    "validate": "^5.1.0"
  },
  "scripts": {
    "start": "PORT=8080 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.11.5"
  }
}

Dockerfile

FROM node:alpine

WORKDIR /app

COPY package.json /app

RUN yarn install

COPY . /app

CMD ["yarn", "run", "start"]

docker-compose.yml

version: "3"

services:
  client:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:8080"

经过大量研究，我可以部署这个react应用程序。以下是问题