Apakah itu Vercel? Artikel ini akan memperkenalkan anda kepada Vercel dan memperkenalkan cara menggunakan perkhidmatan Node dalam Vercel. Saya harap ia akan membantu anda.
Semasa saya menulis Temu Bual Orang Kerap: Caching HTTP, saya menulis dua demo tentang caching yang kuat dan caching yang dirundingkan, tetapi caching mestilah pada sisi pelayan. Untuk melakukannya, anda hanya boleh menampal kod dan tidak mengalaminya pada halaman web (walaupun saya menyiarkan gif)
Semua contoh demo pengarang diletakkan pada halaman github, yang dicirikan dengan menggunakan sumber statik tanpa pelayan Tetapi ia tidak mempunyai keupayaan untuk menggunakan aplikasi sebelah pelayan
Baru-baru ini, apabila saya belajar tentang CI/CD, saya terfikir tentang Vercel dan tertanya-tanya sama ada saya boleh mengehoskan pelayan- aplikasi sampingan pada vercel?
Apakah itu Vercel
Vercel ialah platform pengehosan tapak web luar biasa yang memudahkan pembangun menggunakan tapak web mereka dengan pantas. Ia mempunyai nod CND di seluruh dunia, jadi ia lebih stabil dan lebih pantas untuk diakses daripada halaman github rasmi Github
Koala bercakap tentang sumber terbuka Saya pernah memperkenalkannya: Vercel Vercel dan Next.js: Logik perniagaan di sebalik pasukan all-star sumber terbuka
Versi teks: Vercel dan Next.js: Logik perniagaan di sebalik pasukan all-star sumber terbuka
https: //juejin.cn/post/7057333396359348255
Ringkasnya, ia boleh memudahkan penggunaan aplikasi ke pelayan, dan ia percuma tanpa membeli pelayan
Tapak web rasmi
Baris arahan biasa
Muat turun Vercel ke global (npm i vercel -g). Jika anda tidak tahu arahan apa, cuma -h
Pengarang mempunyai pengetahuan terhad mengenainya:
-
vercel login: Log masuk ke akaun Vercel -
vercel dev: Mulakan perkhidmatan secara setempat
-
vercel dev --bug: Mulakan perkhidmatan secara setempat dan cetak log -
vercel: Gunakan sumber tempatan ke Vercel
-
vercel --prod: Kemas kini halaman web setempat
vercel boleh digantikan dengan vc, iaitu singkatan daripada Vercel
Gunakan perkhidmatan statik
Kami kini mempunyai pemahaman tentang vercel Seperti yang dinyatakan dalam artikel sebelum ini, Vercel boleh memudahkan perkhidmatan penggunaan pembangun, jadi cara dipermudahkan boleh ke?
Di sini kami menggunakan perkhidmatan statik mudah dari awal
Pasang Vercel secara setempat
npm i vercel -g
Salin selepas log masuk
Log masuk ke Vercel
vercel login
Salin selepas log masuk
Selepas memilih kaedah sambungan, pop timbul akan muncul di tapak web
Yo yo, kawan. siapa nama awak?
Buat fail HTML, kami akan memuat naiknya ke pelayan Vercel kemudian
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vercel Demo</title>
</head>
<body>
<h1>Vercel Demo</h1>
</body>
</html>Salin selepas log masuk
Uji secara setempat, masukkan baris arahan
vercel dev
Salin selepas log masuk
Oleh kerana ini adalah pelaksanaan pertama kami, tiada .vercel dalam direktori akar, jadi anda perlu mengisi beberapa maklumat yang diperlukan Pada masa ini, pelayan tempatan dan Vercel anda akan terikat
Perkhidmatan Deployment
vercel
Salin selepas log masuk
Salin selepas log masuk
Perkhidmatan statik kami
boleh diakses dalam tangkapan skrin di https://vercel-sample-ten.vercel.app / Kami juga melihat ayat ini Deployed to production. Run vercel --prod to overwrite later Pada masa hadapan, kami perlu mengemas kini sumber Gunakan vercel --prod untuk
Nah, kecuali untuk log masuk yang diperlukan, kami hanya menggunakan tiga arahan untuk menggunakan setempat Pergi ke pelayan Vercel
vercel dev: Digunakan semasa pembangunan untuk menyemak sama ada aplikasi boleh dijalankan vercel: Perkhidmatan penyebaran vercel --prod: Kemas Kini Aplikasi (sumber)
boleh log masuk ke Ujung belakang Vercel untuk melihat status penggunaan
部署 Node 服务
回归主题，最终我们想部署的是 Nodejs 服务，是后端服务，而非前端静态资源服务，这是关键
同样建立新项目
mkdir vercel-koa2
cd vercel-koa2
npm init -y
npm i koa -S
touch index.js
Salin selepas log masuk
编写 index.js 中的内容
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
ctx.body = 'Hello Vercel';
});
app.listen(3008, () => {
console.log('3008项目启动')
});Salin selepas log masuk
PS： 3000端口默认会被 Vercel 使用，所以 Koa 服务要换个端口
使用命令vercel dev
发现给我报错了，理由是 package.json 的 scripts 中没有 build 快捷符，修改之
...
"scripts": {
"build": "node index.js",
},
...Salin selepas log masuk
再次使用 vercel dev，node 服务跑起来了
于是乎我们部署它
vercel
Salin selepas log masuk
Salin selepas log masuk
搞半天没部署上去，后台查看也是无果，呜呼悲哉
google后，发现原来还有一个 vercel.json，可以用 vercel.json 配置和覆盖 vercel 默认行为
下载 @vercel/node 包
npm i @vercel/node -S
Salin selepas log masuk
填写配置：
{
"version": 2,
"builds": [
{
"src": "index.js",
"use": "@vercel/node"
}
]
}Salin selepas log masuk
执行 vercel 部署服务
访问地址：https://vercel-koa2-t511069160.vercel.app
至此，就完成了 Koa 服务的部署
与部署静态资源多了两个步骤
下载 @vercel/node 和配置 vercel.json
延伸思考
Vercel 当然不止笔者所说的这一功能，它还可以自定义域名、serverless、全球支持的 CDN等等
可以毫不夸张地说，用 Vercel 来代替繁琐的云服务器，配合 Github Action 做 CI/CD，就
个人开发者或小团队而言，这或许就是神器
后续笔者也会尝试用 Vercel 部署一些小应用，实践出真理
附上项目地址：https://github.com/johanazhu/vercel-demo
原文地址：https://juejin.cn/post/7094911994226016292
作者：山头人汉波
更多node相关知识，请访问：nodejs 教程！
Atas ialah kandungan terperinci Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
