当我们进行项目时,我们通常喜欢部署它,因此,如果有人看到我们的个人资料,他们可以很快看到该项目。不必在计算机上运行,关键是,并非总是有可能以不那么昂贵的方式找到可以做到这一点的服务。毕竟,请留下Active的应用很昂贵,不久之后,您的应用程序将无法观看。
那时我想到了Vercel。
Vercel是Web应用程序的托管和部署平台,主要集中于前端。
动机
设法发送一个全栈项目进行开发。并设法仅以一项服务发送整个应用程序,在这种情况下为Vercel。在本文中,我们将重点介绍如何部署后端。
在使用下一个JS的前端应用程序中,有一个节点。谁负责服务器端渲染(SSR),并允许以下实现:路由,静态和动态的预渲染。我们将使用这个概念来实现我们的目标。
例如,在NextJS API目录中:
- 页面
- api
- hello.ts
- api
export default function handler(res) {
res.status(200).json({ name: 'John Doe' })
}
访问localhost/peg/api/hello将返回“约翰·杜”(John Doe),那么,如果我们可以将服务器发送而无需任何接口将服务器发送到Vercel,该怎么办?这是由于Serveless函数的概念。
正如预期的那样,有一些局限性,包括:服务器并不总是活动(仅在访问时,可能会慢一点),Native dependencies,reading from or writing to the filesystem
开始
创建一个vercel.json文件,并将其留在项目的根源中。当您构建应用程序时
{
"version": 2,
"builds": [
{
"src": "src/index.ts",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "src/index.ts"
}
],
}
“ src”:“ src/index.ts” - 它是连接到服务器的主文件所在的地方。
“ src”:“ /(.*)“ - 将使所有路线可用(示例:localhost:4000/用户?name ='john doe')
为了举例说明我们有一个简单的应用程序,该应用程序使用GraphQl:
注册和列出用户- 模块/
- 用户/
index.ts:
const uri = process.env.MONGODB_URI
const main = async () => {
await mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true })
};
const app = new Koa();
const router = new Router();
main()
.then(() => console.log('🎉 connected to database successfully'))
.catch(error => console.error(error));
const graphQLSettingsPerReq = async (_req, _res) => {
return{
graphiql: true,
schema,
pretty: true
}
}
const graphQlServer = graphqlHTTP(graphQLSettingsPerReq);
router.all('/graphql', graphQlServer);
app.use(cors({ credentials: true }));
app.use(bodyParser());
app.use(router.routes());
app.use(router.allowedMethods());
const server = http.createServer(app.callback());
server.listen(3000, () => {
console.log("server is running");
});
初始设置就足够了,您也可以使用 vercel cli
常见错误
-
如果您将ORM用作Prisma。部署时不要忘记在部署时放置“迁移”命令,因为此过程不是自动的。
-
如果您遇到了“无服务器函数崩溃”之类的错误。将 /_ logs添加到您的URL并跟踪错误。如前所述,这种方法存在一些局限性,此链接可能很有用
综上所述
以这种方式部署一个简单的应用程序可能是使其生存很长时间的好方法。进入您的施工资料的人将能够快速获得您的工作。如果您的应用程序扩展,是时候冒险进入云世界了。
部署链接:https://deploy-server-topaz.vercel.app/graphql
存储库:https://github.com/Thiago-Mota-Santos/deploy-server
跟随我作为Twitter:https://twitter.com/Thzinhdev