node.js - Heroku 应用程序无法正常工作

Question

我正在尝试部署我的heroku 应用程序。当我访问该 URL 时，它只显示一个空白屏幕。在浏览器控制台中，它告诉我:

Uncaught SyntaxError: Unexpected token <             main.ac26b187.js:1 

我检查了heroku日志。我看到这个:

2018-04-19T11:14:00.000000+00:00 app[api]: Build started by user bijman@kth.se
2018-04-19T11:15:59.535210+00:00 app[api]: Release v17 created by user bijman@kth.se
2018-04-19T11:15:59.535210+00:00 app[api]: Deploy 61af7a73 by user bijman@kth.se
2018-04-19T11:14:00.000000+00:00 app[api]: Build succeeded
2018-04-19T11:16:01.505173+00:00 heroku[web.1]: State changed from crashed to starting
2018-04-19T11:16:15.810911+00:00 heroku[web.1]: Starting process with command `yarn start`
2018-04-19T11:16:18.879765+00:00 app[web.1]: yarn run v1.6.0
2018-04-19T11:16:18.948747+00:00 app[web.1]: warning package.json: No license field
2018-04-19T11:16:19.169851+00:00 app[web.1]: $ node index.js
2018-04-19T11:16:20.744933+00:00 app[web.1]: Listening on port 8323
2018-04-19T11:16:21.406512+00:00 heroku[web.1]: State changed from starting to up
2018-04-19T11:17:09.689972+00:00 heroku[router]: at=info method=GET path="/" host=sentify-kth.herokuapp.com request_id=6a2f6010-62a4-4e7a-a07e-d9c71ace8fbe fwd="81.227.66.93" dyno=web.1 connect=0ms service=136ms status=200 bytes=1029 protocol=https
2018-04-19T11:17:09.855575+00:00 heroku[router]: at=info method=GET path="/NiekBijman/Sentify/static/js/main.ac26b187.js" host=sentify-kth.herokuapp.com request_id=001fb771-cb31-4d06-a938-b79d40dad97a fwd="81.227.66.93" dyno=web.1 connect=0ms service=25ms status=200 bytes=1029 protocol=https
2018-04-19T11:17:09.849774+00:00 heroku[router]: at=info method=GET path="/NiekBijman/Sentify/static/css/main.b9e635e3.css" host=sentify-kth.herokuapp.com request_id=7f2ff9ee-01e0-4cbb-ac0c-e36190c8a027 fwd="81.227.66.93" dyno=web.1 connect=0ms service=26ms status=200 bytes=1029 protocol=https
2018-04-19T11:17:10.057003+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=sentify-kth.herokuapp.com request_id=e88cf8b8-c26e-4a22-8305-236f9191668c fwd="81.227.66.93" dyno=web.1 connect=0ms service=5ms status=200 bytes=1029 protocol=https
2018-04-19T11:17:13.818146+00:00 heroku[router]: at=info method=GET path="/NiekBijman/Sentify/static/css/main.b9e635e3.css" host=sentify-kth.herokuapp.com request_id=266bebd7-58df-4106-b383-ca14cd85cc1e fwd="81.227.66.93" dyno=web.1 connect=1ms service=6ms status=304 bytes=237 protocol=https

但老实说，它并没有告诉我太多信息。

当我开始摆弄 package.json 和 index.js 文件时(index.js 以前称为 server.js 但我重命名了它)，我开始收到此错误。因此，以下是这些文件:

package.json:

{
  "name": "sentify-server",
  "version": "1.0.1",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "client": "cd client && yarn start",
    "server": "nodemon index.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
    "heroku-postbuild": "cd client && yarn --production=false && yarn run build"
  },
  "dependencies": {
    "dotenv": "^5.0.1",
    "ejs": "^2.5.8",
    "express": "^4.16.3",
    "fetch-tweets": "^0.1.7",
    "firebase": "^4.12.1",
    "node-fetch": "^2.1.2",
    "request": "^2.85.0",
    "serve-favicon": "^2.5.0"
  },
  "devDependencies": {
    "concurrently": "^3.5.0"
  }
}

客户端/package.json:

{
  "name": "sentify",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/icons": "^1.0.0-beta.42",
    "express": "^4.16.3",
    "mapbox-gl": "^0.44.2",
    "material-ui": "^1.0.0-beta.41",
    "react": "^16.3.1",
    "react-d3-basic": "^1.6.11",
    "react-d3-core": "^1.3.9",
    "react-d3-shape": "^0.3.25",
    "react-dom": "^16.3.1",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1",
    "react-simple-pie-chart": "^0.5.0",
    "webpack": "^3.11.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

  "devDependencies": {},
  "description": "## Setup 1. First, make sure that you have **Node Package Manager** (npm) installed on your system. To check if you have Node.js installed, run this command in your terminal:`node -v` To confirm that you have npm installed you can run this command in your terminal:`npm -v`. To update your npm, type this into your terminal: `npm install npm@latest -g` 2. Go to the root of the Repository and run `npm install`. Let it    install all the dependencies. 3. Run `npm start` through the terminal. This will start the webserver and the application should pop up in your    browser ready for use. Alternatively you can open in through [http://localhost:3000]. Whenever you make changes in your code and save, the browser will update automatically, so you don't have to click refresh anymore. 4. **IMPORTANT** Our config.js file contains our API Keys which is why we put it in .gitignore.  @team, you can find the config.js file in the Slack channel.    4. Make sure to update the dependencies in the **package.json**. Updating all the dependencies is possble by `npm install <pkg> --save`. It will append the dependencies to your existing **package.json** file.",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/NiekBijman/Sentify.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/NiekBijman/Sentify/issues"
  },
  "homepage": "https://github.com/NiekBijman/Sentify#readme",
  "main": "./frontend/src/index.js",
  "proxy": "http://localhost:5000"
}

index.js:

const express = require('express');
const fetch = require('node-fetch');
const FetchTweets = require('fetch-tweets');
const request = require('request');
var path = require("path");

const TW_URL = "http://1.1/search/tweets.json"  // Twitter search URL
const SEN_URL =  "http://www.sentiment140.com/api/bulkClassifyJson" // URL of sentiment analysis

var TW_KEYS = {
  consumer_key: process.env.TW_KEY,
  consumer_secret: process.env.TW_SECRET
}

const app = express();
const fetchTweets = new FetchTweets(TW_KEYS);

const port = process.env.PORT || 5000;

// Priority serve any static files.
app.use(express.static(path.join(__dirname, 'client/build')));

if (process.env.NODE_ENV === "production"){
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
  });
}

// For getting tweets like /api/twitter?q=hello&geocode=234523 etc.
app.get('/api/twitter', async (req, res) => {
    console.log("Getting tweets")
    const options = {
      q : req.query.q,
      lang: "en",
      result_type: "popular",
      count: 100,
    }
    try{
      await fetchTweets.byTopic(options, function(results){
        console.log("sending results")
        res.send(results)
      })
    }catch (error){
      console.log(error)
    }
})

app.get('/api/sentiment', async (req, res) => {
  const options = {
    q : req.query.q,
    lang : "en",
    count : 100,
  }
  try{
    fetchTweets.byTopic(options, async function(results){
      const tweets = {"data": results.map(function(tweet){
        return {"text": tweet.body, "query": options.q}
      })}
      var body = JSON.stringify(tweets)

      // get sentiments
      const sentiments = await fetch(SEN_URL, {method: "POST", body: body})
      const json = await sentiments.json()
      const data = json.data

      // calculate percentages
      const response = {positive: undefined, neutral: undefined, negative: undefined}
      var numPos = 0
      var numNeu = 0
      var numNeg = 0
      data.forEach(function(tweet){
        switch(tweet.polarity){
          case 4:
            numPos += 1
            break
          case 2:
            numNeu += 1
            break
          case 0:
            numNeg += 1
            break
        }
      })
      const tot = numPos + numNeu + numNeg
      response.positive = numPos/tot
      response.neutral = numNeu/tot
      response.negative = numNeg/tot
      // send response
      res.send(response)
    })
  }catch (error){
    console.log(error)
  }
})

app.listen(port, () => console.log(`Listening on port ${port}`))

是什么导致了这个错误？ PS:如果您需要任何其他信息，请告诉我。我对此很陌生，所以不确定您到底需要什么。

编辑:将

中的 * 更改为 / 后

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

并将该路由放在文件底部(但在 .listen 之前)，我得到了这些错误:

Refused to apply style from 'https://sentify-kth.herokuapp.com/NiekBijman/Sentify/static/css/main.b9e635e3.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
sentify-kth.herokuapp.com/:1 GET https://sentify-kth.herokuapp.com/NiekBijman/Sentify/static/js/main.ac26b187.js net::ERR_ABORTED
sentify-kth.herokuapp.com/:1 Refused to apply style from 'https://sentify-kth.herokuapp.com/NiekBijman/Sentify/static/css/main.b9e635e3.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
sentify-kth.herokuapp.com/:1 Refused to execute script from 'https://sentify-kth.herokuapp.com/NiekBijman/Sentify/static/js/main.ac26b187.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
favicon.ico:1 GET https://sentify-kth.herokuapp.com/favicon.ico 404 (Not Found)

Answer 1

通过检查您的 git 存储库，我假设我们在 chat 中讨论了更改为你工作过，所以我会将它们放在这里，以防其他人遇到同样的问题。

<小时/>

在您的 index.js 文件中，您将每个请求转发到 index.html。

if (process.env.NODE_ENV === "production"){
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
  });
}

通过使用*，每次浏览器向服务器发出请求时，服务器都会响应并发送回html文件。您应该将其更改为 '/'，以便仅当用户访问应用程序的索引时才发回文件

...
app.get('/', (req, res) => {
...

您可以在 create-react-app docs 中阅读更多内容

您需要更改的另一件事是将客户端的 package.json 中的 homepage 属性更改为 homepage: '.' ，使用react使用该属性来确定文件的路径，并且由于您的客户端不在应用程序的根目录中，因此 react 可能无法正确找到文件。

查看文档 here了解更多信息。