javascript - 如何将带有 Node 后端的 Svelte 前端部署到 Heroku?
问题描述
我在 svelte 中创建了一个小型测试应用程序,并希望将其实时推送到 Heroku。我一直无法弄清楚如何为 Heroku 提供服务。我不熟悉自己测试和尝试这些东西。我已经尝试配置 package.json 但没有成功。
当我部署到 Heroku 时,它会成功部署,但会在控制台中显示。
包.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");
});
解决方案
几周前我们也面临同样的问题:
我使用 express-csp-header 包来添加标题(不是一个非常理想的解决方案,但在哭了 6-7 小时后我为什么选择了 svelete)
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,
},
})
);
}
express csp header的链接: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
推荐阅读
- networking - 我无法在我的 arduino 网络中实现 Atmega328 计时器
- c# - 该程序已退出 UWP 应用程序,代码为 -1073741701 (0xc000007b)
- vba - 在 VBA 中是否有一种接收 WM_HOTKEY 消息的好方法或任何其他方式来模拟 Excel 的 Application.OnKey
- ansible - 仅当主机属于清单文件中的特定组时才在剧本中运行特定任务的 Ansible 条件
- angular - 用于多个输入字段的 Angular Material 日期选择器
- c++ - 如何在 C++ 中创建节点?
- windows - 与 ACL 执行命令一起使用的 Windows_Run_command_syntax
- c# - 有没有办法检查任何现有对象是否包含特定的字符串参数?
- jquery - Rails 6 + Webpacker 延迟加载
- r - 使用 Anaconda 安装 R Studio