如何將帶有 Node 后端的 Svelte 前端部署到 Heroku？

Question

我在 svelte 中創建了一個小型測試應用程序，並希望將其實時推送到 Heroku。 我一直無法弄清楚如何為 Heroku 提供服務。 我是自己測試和嘗試這些東西的新手。 我試過配置 package.json 但沒有成功。

當我部署到 Heroku 時，它部署成功，但在控制台中顯示了這一點。

Github 倉庫在這里

包.json

{
  "name": "svelte-app",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "build": "node app.js && npm run build:css && rollup -c",
    "build:css": "cd public && touch global.css && cd ../ && tailwind build src/style.css -o public/global.css",
    "dev": "rollup -c -w",
    "start": "sirv public"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^6.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "axios": "^0.20.0",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.5",
    "cookie-session": "^1.4.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "mongoose": "^5.10.5",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
    "sirv-cli": "^1.0.0",
    "tailwindcss": "^1.8.10"
  }
}

應用程序.js

const dotenv = require("dotenv");
dotenv.config();
const mongoose = require("mongoose");
const express = require("express");
const cors = require("cors");
const passport = require("passport");
const cookieParser = require("cookie-parser");
const bcrypt = require("bcryptjs");
const session = require("express-session");
const bodyParser = require("body-parser");
const app = express();
const path = require("path");
const { URI } = process.env;
const User = require("./user");

//middleware
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: true,
  })
);
app.use(
  cors({
    origin: "http://localhost:5000", // <-- location of the react app were connecting to
    credentials: true,
  })
);
app.use(
  session({
    secret: "secretcode", // <-- here we are defining the cookie name to be stored in the users browser
    resave: true,
    saveUninitialized: true,
  })
);
app.use(cookieParser("secretcode"));
app.use(passport.initialize());
app.use(passport.session());
require("./passportConfig")(passport); // defining passport and passing in the passport library

//db
mongoose.connect(URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
});
mongoose.connection.on("connected", () => {
  console.log("Mongoose Database is Connected");
});

app.post("/login", (req, res, next) => {
  //check to see if user exists
  passport.authenticate("local", (err, user, info) => {
    console.log(user);
    if (err) throw err;
    if (!user) res.json({ message: "User does not exist" });
    else {
      req.logIn(user, (err) => {
        if (err) throw err;
        res.json({ message: "User exists" });
      });
    }
  })(req, res, next);
});
app.post("/create", async (req, res) => {
  //check to see if user exists
  const { username, password } = req.body;

  try {
    const data = await User.findOne({ username });
    if (!data) {
      const hashedPassword = await bcrypt.hash(password, 10);

      const newUser = new User({
        username,
        password: hashedPassword,
      });
      await newUser.save();
      res.json({ message: "Client created" });
    } else {
      res.json({ message: "Client already exists" });
    }
  } catch (err) {
    res.json({ message: err });
  }
});
app.get("/user", (req, res) => {
  console.log("getting user...");
  res.json({ message: req.user }); // The req.user stores the entire user that has been authenticated inside of it.
});
app.get("/logout", (req, res, next) => {
  req.logOut();
  res.json({ message: "User logged out" });
});
app.use(express.static("public"));
app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "public", "index.html"));
});
app.listen(5001, () => {
  console.log("App's running on port 5001");
});

Answer 1

幾周前我們也面臨同樣的問題：

我使用 express-csp-header 包添加標題（不是一個非常理想的解決方案，但在為我選擇 svelete 的原因哭了 6-7 小時后工作）

   this.app.use(
      expressCspHeader({
        directives: {
          "default-src": [SELF, INLINE],
          "script-src": [
            SELF,
            INLINE,
            "*",
          ],
          "style-src": [
            SELF,
            INLINE,
            "*",
          ],
          "img-src": ["data:", "*", SELF, INLINE],
          "worker-src": [NONE],
          "frame-src": ["*"],
          "font-src": ["*"],
          "connect-src": ["*"],
          "block-all-mixed-content": false,
        },
      })
    );
  }

鏈接表達 csp 頭： https : //www.npmjs.com/package/express-csp-header

進而，

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

只需通過從 nodeJs 提供服務來路由到 svelete

Answer 2

這應該可以解決您的問題。

app.use('/build', express.static('public/build'))

問題是您的 svelte 應用程序位於公共文件夾中，但您在“/”上提供 index.html 並且它表示在收到 /build/ 上的請求時不知道該怎么做。