Проблема обслуживания статических файлов с экспресс - PullRequest
Новая
       8

Проблема обслуживания статических файлов с экспресс

0 голосов
/ 14 ноября 2018

Я прочитал несколько статей о том, как обслуживать статические файлы из create-Reaction-app с помощью Express. Я попробовал все сейчас. Может ли кто-нибудь помочь мне?

Вот так выглядит моя структура

My project structure

Когда я внедряю это в Heroku, я получаю следующую ошибку: main.ac4887ed.js:1 Uncaught SyntaxError: Unexpected token <

Почему это происходит? Я уже несколько часов пытаюсь .. Может, чего-то не хватает?

Это код, который у меня есть в моем server.js файле: 

if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("../build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "../build", "index.html"));
});

Мой файл index.html в общей папке: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, 
     shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/quiz.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>QuizGame</title>
 </head>
  <body>
    <div id="root"></div>
  </body>
</html>

И вывод из журналов Heroku выглядит так, когда я пытаюсь зайти на страницу:

Heroku output logs

Я делаю что-то не так?

Это index.html из моей папки сборки: 

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/quiz.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><title>QuizGame</title></head><body><div id="root"></div><script type="text/javascript" src="/static/js/main.ac4887ed.js"></script></body></html>

Это мой файл package.json для отображения зависимостей, требуются ли какие-либо зависимости для его работы? 

"dependencies": {
"axios": "^0.17.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"connect-mongo": "^2.0.1",
"express": "^4.16.2",
"express-session": "^1.15.6",
"immutable": "^3.8.2",
"jsonwebtoken": "^8.3.0",
"lodash": "^4.17.4",
"moment": "^2.19.2",
"mongoose": "^5.0.2",
"morgan": "^1.9.0",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"passport.socketio": "^3.7.0",
"react": "^16.1.1",
"react-bootstrap": "^0.32.4",
"react-countdown-now": "^1.3.0",
"react-dom": "^16.1.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.7",
"react-scripts": "1.0.17",
"redux": "^4.0.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"ws": "^6.1.0"
},

Ответы [ 3 ]

0 голосов
/ 15 ноября 2018

Я понял это:

В моем server.js файле я изменил 

if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("../build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "../build", "index.html"));
});

до 

if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use('/', express.static("build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "build", "index.html"));
  }); 
}

Спасибо за помощь!

0 голосов
/ 17 января 2019 
const express = require("express");
const app = express();
var path = require("path");
var jsonServer = require("json-server");
app.use(express.static("files"));
app.post("/mm", (req, res) => {
    res.sendFile(express.static(path.join(__dirname, "/files/hey.`enter code here`html")));
});
app.use("/api", jsonServer.router("./db.json"));
app.listen(9924, () => {
    console.log("hello");
});
0 голосов
/ 15 ноября 2018

У меня есть развернутое приложение с create-реагировать-приложение.Вот некоторые различия между моей и вашей настройками, которые вы можете проверить: 

    if ( process.env.MODE !== 'development')
        app.use( express.static( `${__dirname}/../build` ) );

    if ( process.env.MODE !== 'development') {
        app.get('*', (req, res)=>{
            res.sendFile(path.join(__dirname, '../build/index.html')); 
        });
    }
  • Я использую абсолютный путь как для статического пути, так и для конечной точки получения
  • Эти блокиОтдельно я помещаю статическое промежуточное ПО перед всем другим промежуточным ПО, а конечную точку get * в самом низу файла сервера.Только app.listen () ниже этого.
  • Вы также заметите, что я использую path.join вместо path.resolve и добавляю один единственный аргумент к __dirname

Убедитесь, что вы делаете npm run build и перезапускаете сервер, когда это будет сделано.

...