【问题标题】:SyntaxError: Unexpected identifier while deploying React application on Docker containerSyntaxError:在 Docker 容器上部署 React 应用程序时出现意外标识符
【发布时间】:2021-01-18 00:42:31
【问题描述】:

我是 ReactJS 世界的新手,正在帮助一个团队将他们的 React 应用程序部署到 Docker 容器。我已经完成了以下任务。

  1. 在 EC2 中创建了 Ubuntu 机器并安装了 Docker 引擎。
  2. 将整个React 代码复制到其中一个文件夹中,添加DockerFileDocker-compose yml 文件。团队几乎没有其他应用程序可以一起部署,这就是我包含 docker-compose 文件的原因。但是,现在只需部署一个 React 应用程序。
  3. 在执行docker-compose up 之后,容器将被创建并立即退出。然后我检查了退出容器的日志(如下所示)。

/usr/src/app/src/index.js:1 从'react'导入反应; ^^^^^

SyntaxError:意外的标识符 在 Module._compile (internal/modules/cjs/loader.js:723:23) 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) 在 Module.load (internal/modules/cjs/loader.js:653:32) 在 tryModuleLoad (internal/modules/cjs/loader.js:593:12) 在 Function.Module._load (internal/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)

我研究了这个错误,看起来这是因为编译、缺少 webpack 或 React 应用程序中的某些东西。我不确定要在 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"

你觉得上面有什么问题吗? TIA。

注意:我已经看过这个链接SyntaxError: Unexpected identifier importing React (Javascript)

【问题讨论】:

    标签: node.js reactjs docker-compose dockerfile containers


    【解决方案1】:

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

    1. 问题在于 dockerfiledocker-compose 文件。我添加了具有不同内容的全新文件。

    2. React 应用正在部署到某个糟糕的端口。所以,我在package.json 文件中明确添加了 PORT 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"
    

    【讨论】:

      猜你喜欢
      • 2020-01-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-07-24
      • 1970-01-01
      • 1970-01-01
      • 2019-10-28
      • 2020-05-15
      相关资源
      最近更新 更多