cari

Rumah >hujung hadapan web >tutorial js >Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

青灯夜游
青灯夜游ke hadapan
2022-05-07 21:34:2221853semak imbas

Apakah itu Vercel? Artikel ini akan memperkenalkan anda kepada Vercel dan memperkenalkan cara menggunakan perkhidmatan Node dalam Vercel. Saya harap ia akan membantu anda.

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

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

  • Tapak web rasmi Vercel: https://vercel.com/

  • Tapak web rasmi aliran kerja Vercel (kesan halaman web adalah hebat): https://vercel.com/workflow

Baris arahan biasa

Muat turun Vercel ke global (npm i vercel -g). Jika anda tidak tahu arahan apa, cuma -h

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

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

Log masuk ke Vercel

vercel login

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

Selepas memilih kaedah sambungan, pop timbul akan muncul di tapak web

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

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>

Uji secara setempat, masukkan baris arahan 

vercel dev

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

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

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

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

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

部署 Node 服务

回归主题，最终我们想部署的是 Nodejs 服务，是后端服务，而非前端静态资源服务，这是关键

同样建立新项目

mkdir vercel-koa2
cd vercel-koa2
npm init -y
npm i koa -S
touch index.js

编写 index.js 中的内容

const Koa = require(&#39;koa&#39;);
const app = new Koa();

app.use(async ctx => {
    ctx.body = &#39;Hello Vercel&#39;;
});

app.listen(3008, () => {
    console.log(&#39;3008项目启动&#39;)
});

PS： 3000端口默认会被 Vercel 使用，所以 Koa 服务要换个端口

使用命令vercel dev

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

发现给我报错了，理由是 package.json 的 scripts 中没有 build 快捷符，修改之

...
"scripts": {
    "build": "node index.js",
},
...

再次使用 vercel dev，node 服务跑起来了

于是乎我们部署它

vercel

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

搞半天没部署上去，后台查看也是无果，呜呼悲哉

google后，发现原来还有一个 vercel.json，可以用 vercel.json 配置和覆盖 vercel 默认行为

下载 @vercel/node 包

npm i @vercel/node -S

填写配置：

{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ]
}

执行 vercel 部署服务

Apakah Vercel? Bagaimana untuk menggunakan perkhidmatan Node?

访问地址：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!

Kenyataan：
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk melancarkan projek Angular? Mari bercakap tentang proses dalam talian dengan nginx!Artikel seterusnya：Bagaimana untuk melancarkan projek Angular? Mari bercakap tentang proses dalam talian dengan nginx!

Artikel berkaitan

Lihat lagi