javascript - Firebase 将 Sapper 应用程序部署为云功能失败
问题描述
问题
我正在构建 Sapper SSR 应用程序,该应用程序根据 Firebase 实时数据库所需的数据从 Firebase 存储中加载内容。我的应用部署在 Firebase 云函数上。但是我上次部署时遇到了这个错误,自从上次部署以来,我实现了从实时数据库和其他次要功能加载一些数据,所以我不知道是什么导致了这个错误。
部署命令:
/usr/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run deploy:functions --scripts-prepend-node-path=auto
> violette-website@0.0.1 deploy:functions /home/hejtmus/Documents/Websites/Violette/sapper/Violette/functions
> firebase deploy --only functions:ssr
=== Deploying to 'violette-77756'...
i deploying functions
i functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔ functions: required API cloudbuild.googleapis.com is enabled
✔ functions: required API cloudfunctions.googleapis.com is enabled
i functions: preparing functions directory for uploading...
i functions: packaged functions (4.41 MB) for uploading
✔ functions: functions folder uploaded successfully
i functions: current functions in project: ssr(us-central1)
i functions: uploading functions in project: ssr(us-central1)
i functions: updating Node.js 12 function ssr(us-central1)...
⚠ functions[ssr(us-central1)]: Deployment error.
Function failed on loading user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs
Functions deploy had errors with the following functions:
ssr
To try redeploying those functions, run:
firebase deploy --only "functions:ssr"
To continue deploying other features (such as database), run:
firebase deploy --except functions
Error: Functions did not deploy properly.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! violette-website@0.0.1 deploy:functions: `firebase deploy --only functions:ssr`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the violette-website@0.0.1 deploy:functions script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/hejtmus/.npm/_logs/2020-09-27T18_34_13_296Z-debug.log
Process finished with exit code 1
Firebase 日志:
错误:函数终止。建议的操作:检查日志以了解终止原因。函数无法初始化。
{"@type":"type.googleapis.com/google.cloud.audit.AuditLog","status":{"code":3,"message":"函数加载用户代码失败。错误消息:错误:请检查您的功能日志以查看错误原因:https ://cloud.google.com/functions/docs/monitoring/logging#viewing_logs"},"authenticationInfo":{"principalEmail":"filip.holcik.official@gmail .com"},"serviceName":"cloudfunctions.googleapis.com","methodName":"google.cloud.functions.v1.CloudFunctionsService.UpdateFunction","resourceName":"projects/violette-77756/locations/us-中央1/功能/ssr"}
我试过的
我试过了:
在开发模式下运行应用程序,完美运行
将应用程序构建为 js 功能,完美运行
通过服务应用程序
firebase serve
,完美运行firebase deploy
使用or部署应用程序firebase deploy --only functions
,它们都不起作用,抛出指定错误检查代码是否有错误和配置错误,一无所获
我尝试使用本文中的知识解决此问题,我按照本教程的形式一步一步地进行操作,但仍然遇到相同的错误:
https://blog.logrocket.com/build-an-ssr-web-app-with-firebase-functions-hosting-and-svelte-sapper/
我还尝试删除我添加的代码并部署应用程序而不从 firebase 实时数据库加载数据,但这没有帮助。
代码:
index.js(云函数):
const functions = require('firebase-functions');
const { sapperServer } = require('./__sapper__/build/server/server');
exports.ssr = functions.https.onRequest(sapperServer);
server.js:
import sirv from 'sirv';
import express from 'express';
import compression from 'compression';
import * as sapper from '@sapper/server';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
const sapperServer = express()
.use(
compression({ threshold: 0 }),
sirv(`static`, { dev }),
sapper.middleware()
)
if(dev){
sapperServer.listen(PORT, err => {
if (err) console.log('error', err);
});
}
export { sapperServer }
如果需要,我会提供更多信息。
解决方案
出了什么问题
问题是,我使用 firebase 作为浏览器,Svelte 是编译器,它在 Node.js 环境中运行,它必须由代码捆绑器捆绑(我使用汇总)。为了能够在节点中运行 firebase,只需在汇总配置中指定 mainFields。
resolve({
browser: true,
dedupe: ['svelte'],
mainFields: ['main']
}),
我仅在客户端使用 firebase,因此在我的情况下无需在服务器中指定 mainFields 参数。
完整汇总配置
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from '@rollup/plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import postcss from 'rollup-plugin-postcss';
import autoPreprocess from "svelte-preprocess";
import pluginJson from "@rollup/plugin-json";
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
const preprocessOptions = {
postcss: {
plugins: [
require('postcss-import'),
require('postcss-preset-env')({
stage: 0,
browsers: 'last 2 versions',
autoprefixer: { grid: true }
})
]
}
};
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
preprocess: autoPreprocess(preprocessOptions),
dev,
hydratable: true,
emitCss: true,
css: css => {
css.write('static/css/bundle.css');
}
}),
postcss({
extract: "static/css/imported.min.css",
sourceMap: true,
minimize: true,
}),
resolve({
browser: true,
dedupe: ['svelte'],
mainFields: ['main']
}),
commonjs(),
legacy && babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/@babel/**'],
presets: [
['@babel/preset-env', {
targets: '> 0.25%, not dead'
}]
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-transform-runtime', {
useESModules: true
}]
]
}),
!dev && terser({
module: true
})
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
preprocess: autoPreprocess(preprocessOptions),
generate: 'ssr',
dev,
css: css => {
css.write('static/css/bundle.css');
}
}),
postcss({
extract: "static/css/imported.min.css",
sourceMap: true,
minimize: true,
}),
resolve({
dedupe: ['svelte']
}),
commonjs(),
pluginJson(),
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
),
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
commonjs(),
!dev && terser()
],
onwarn,
}
};
推荐阅读
- php - Auth::user() 在 Laravel 6 中返回 null
- eclipse-plugin - Eclipse RCP 动态帮助自定义
- javascript - Typescript react -Object 可能为零
- java - 在 xsl 样式表中添加 If else 条件?
- scala - Scala在dataFrame中添加许多列
- javascript - Vuex 动作没有抛出 axios try/catch
- android - 滚动条在android项目中不起作用
- google-cloud-firestore - Firebase 用户管理和访问级别安全规则(array-contains-any 和 in 运算符)
- python - 使用 Python 中的 API 密钥访问 AWS API Gatway 端点
- c++ - 是否可以使用字符串在 C++ 中调用类函数/属性?