Qu'est-ce que Vercel ? Comment déployer le service Node ?
Qu’est-ce que Vercel ? Cet article vous présentera Vercel et vous expliquera comment déployer les services Node dans Vercel. J'espère qu'il vous sera utile !
Avant d'écrire Interview Frequent: HTTP Caching, j'ai écrit deux démos sur la mise en cache forte et la mise en cache négociée, mais la mise en cache doit être effectuée côté serveur, je ne peux donc que coller le code et je ne peux pas en faire l'expérience sur la page web (Bien que j'ai posté un gif)
Tous les exemples de démonstration de l'auteur sont placés sur la page github. Sa particularité est qu'il peut déployer des ressources statiques sans serveur, mais il n'a pas la possibilité de déployer un serveur. -applications côté
Récemment, l'auteur s'initie au CI/CD Concernant les points de connaissances, j'ai pensé à Vercel et je me suis demandé si je pouvais exécuter des applications côté serveur sur vercel ?
Qu'est-ce que Vercel
Vercel est une plateforme d'hébergement de sites Web prête à l'emploi qui permet aux développeurs de déployer rapidement leurs sites Web. Il a des nœuds CND partout dans le monde, il est donc plus stable et plus rapide d'accès que les pages github officielles de Github
Koala parle d'open source Je l'ai présenté une fois : Vercel et Next.js : derrière l'Open Source All- Star Team La logique métier
Version texte : Vercel et Next.js : La logique métier derrière l'équipe d'étoiles open source
https://juejin.cn/post/7057333396359348255
En termes simples, cela peut simplifier le déploiement des applications Accédez au serveur, et c'est gratuit, pas besoin d'acheter un serveur
Site officiel
Site officiel de Vercel : https://vercel.com/
Site officiel du workflow de Vercel (page web l'effet est cool) : https://vercel .com/workflow
Ligne de commande commune
Téléchargez Vercel globalement (npm i vercel -g), si vous ne savez pas quoi il y a une commande, juste -h npm i vercel -g），不知道有什么命令就-h
笔者对其了解有限，这里罗列下笔者知道的命令
-
vercel login：登录 Vercel 账号 -
vercel dev：本地开启服务 -
vercel dev --bug：本地开启服务并打印日志 -
vercel：部署本地资源到 Vercel 上 -
vercel --prod：更新本地网页
vercel 可以用 vc 来代替，vc 是 Vercel 的缩写
部署静态服务
我们现在已经对 vercel 有所了解，前文中说到 Vercel 能简化开发者部署服务，那它能简化到什么程度呢？
这里我们从零部署一个简易静态服务
本地安装 Vercel
npm i vercel -g
登录 Vercel
vercel login
选择好连接的方式后，会在网站弹出
哟哟，man。what's your name？
创建一个HTML文件，后续我们要将其上传至 Vercel 服务器上
<!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 id="Vercel-nbsp-Demo">Vercel Demo</h1>
</body>
</html>本地测试一番，输入命令行
vercel dev
因为我们这是第一次执行，根目录下没有.vercel，所以要填写一些必要信息，这时你的本地和 Vercel 服务器就绑定好了
部署服务
vercel
在 https://vercel-sample-ten.vercel.app/ 中能访问到我们的静态服务
在截图中我们也看到了这句话Deployed to production. Run vercel --prod to overwrite later，后续我们要更新资源，用 vercel --prod 即可
好了，除去必要的登录，我们就用了三个命令就把本地服务部署到 Vercel 服务器上
vercel dev：开发时使用，查看应用是否跑得起来vercel：部署服务vercel --prod
L'auteur Ma compréhension est limitée, voici donc une liste des commandes que je connais vercel login : Connectez-vous à le compte Vercel
vercel dev : Démarrez le service localement
vercel dev --bug : Démarrez le service localement et imprimez les logs🎜🎜vercel</code > : Déployer des ressources locales sur Vercel🎜🎜<code>vercel --prod : Mettre à jour la page Web locale 🎜🎜🎜🎜vercel peut être remplacé par vc, qui est l'abréviation de Vercel🎜🎜🎜Déployer des services statiques🎜🎜🎜Nous comprenons maintenant Vercel, comme mentionné dans l'article précédent. Vercel peut simplifier le déploiement de services par les développeurs, mais dans quelle mesure peut-il le simplifier ? 🎜🎜Ici, nous déployons un service statique simple à partir de zéro🎜🎜Installez Vercel localement🎜mkdir vercel-koa2
cd vercel-koa2
npm init -y
npm i koa -S
touch index.js
Copier après la connexionCopier après la connexion🎜Connectez-vous à Vercel🎜const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
ctx.body = 'Hello Vercel';
});
app.listen(3008, () => {
console.log('3008项目启动')
});Copier après la connexionCopier après la connexion🎜
🎜🎜Après avoir sélectionné la méthode de connexion, une popup apparaîtra sur le site Web🎜🎜
🎜🎜Yo yo, mec. quel est ton nom? 🎜🎜Créez un fichier HTML, nous le téléchargerons sur le serveur Vercel plus tard🎜...
"scripts": {
"build": "node index.js",
},
...Copier après la connexionCopier après la connexion🎜Testez-le localement, entrez la ligne de commande🎜vercel
Copier après la connexionCopier après la connexionCopier après la connexion🎜
🎜🎜Comme il s'agit de notre première exécution, il n'y a pas de .vercel dans le répertoire racine , vous devez donc remplir certaines informations nécessaires. À ce moment, vos serveurs locaux et Vercel seront liés🎜🎜Service de déploiement🎜npm i @vercel/node -S
Copier après la connexionCopier après la connexion🎜
🎜🎜Vous pouvez accéder à notre service statique sur https://vercel-sample-ten.vercel.app/🎜🎜 Nous voyons également cette phrase dans la capture d'écran : Déployé en production. Exécutez vercel --prod pour écraser plus tard. Si nous souhaitons mettre à jour les ressources plus tard, utilisez vercel --prod. 🎜🎜D'accord, à l'exception de la connexion nécessaire, nous utilisons trois commandes pour déployer le service local sur le serveur Vercel🎜🎜vercel dev : Utilisé lors du développement pour vérifier si l'application fonctionne bien. Levez-vous 🎜🎜vercel : Service de déploiement🎜🎜vercel --prod : Mise à jour de l'application (ressource)🎜🎜🎜Vous pouvez vous connecter au backend Vercel🎜 pour afficher l'état du déploiement🎜 🎜🎜🎜部署 Node 服务
回归主题，最终我们想部署的是 Nodejs 服务，是后端服务，而非前端静态资源服务，这是关键
同样建立新项目
mkdir vercel-koa2
cd vercel-koa2
npm init -y
npm i koa -S
touch index.js
Copier après la connexionCopier après la connexion编写 index.js 中的内容
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
ctx.body = 'Hello Vercel';
});
app.listen(3008, () => {
console.log('3008项目启动')
});Copier après la connexionCopier après la connexionPS： 3000端口默认会被 Vercel 使用，所以 Koa 服务要换个端口
使用命令vercel dev
发现给我报错了，理由是 package.json 的 scripts 中没有 build 快捷符，修改之
...
"scripts": {
"build": "node index.js",
},
...Copier après la connexionCopier après la connexion再次使用 vercel dev，node 服务跑起来了
于是乎我们部署它
vercel
Copier après la connexionCopier après la connexionCopier après la connexion
搞半天没部署上去，后台查看也是无果，呜呼悲哉
google后，发现原来还有一个 vercel.json，可以用 vercel.json 配置和覆盖 vercel 默认行为
下载 @vercel/node 包
npm i @vercel/node -S
Copier après la connexionCopier après la connexion填写配置：
{
"version": 2,
"builds": [
{
"src": "index.js",
"use": "@vercel/node"
}
]
}Copier après la connexion执行 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 教程！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
mkdir vercel-koa2 cd vercel-koa2 npm init -y npm i koa -S touch index.js
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
ctx.body = 'Hello Vercel';
});
app.listen(3008, () => {
console.log('3008项目启动')
});...
"scripts": {
"build": "node index.js",
},
...vercel
npm i @vercel/node -S
vercel dev : Utilisé lors du développement pour vérifier si l'application fonctionne bien. Levez-vous 🎜🎜vercel : Service de déploiement🎜🎜vercel --prod : Mise à jour de l'application (ressource)🎜🎜🎜Vous pouvez vous connecter au backend Vercel🎜 pour afficher l'état du déploiement🎜 🎜🎜🎜部署 Node 服务
回归主题，最终我们想部署的是 Nodejs 服务，是后端服务，而非前端静态资源服务，这是关键
同样建立新项目
mkdir vercel-koa2 cd vercel-koa2 npm init -y npm i koa -S touch index.js
编写 index.js 中的内容
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
ctx.body = 'Hello Vercel';
});
app.listen(3008, () => {
console.log('3008项目启动')
});PS： 3000端口默认会被 Vercel 使用，所以 Koa 服务要换个端口
使用命令vercel dev
发现给我报错了，理由是 package.json 的 scripts 中没有 build 快捷符，修改之
...
"scripts": {
"build": "node index.js",
},
...再次使用 vercel dev，node 服务跑起来了
于是乎我们部署它
vercel
搞半天没部署上去，后台查看也是无果，呜呼悲哉
google后，发现原来还有一个 vercel.json，可以用 vercel.json 配置和覆盖 vercel 默认行为
下载 @vercel/node 包
npm i @vercel/node -S
填写配置：
{
"version": 2,
"builds": [
{
"src": "index.js",
"use": "@vercel/node"
}
]
}执行 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 教程！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Nodejs est-il un framework backend ?
Apr 21, 2024 am 05:09 AM
Node.js peut être utilisé comme framework backend car il offre des fonctionnalités telles que des performances élevées, l'évolutivité, la prise en charge multiplateforme, un écosystème riche et une facilité de développement.
Comment connecter Nodejs à la base de données MySQL
Apr 21, 2024 am 06:13 AM
Pour vous connecter à une base de données MySQL, vous devez suivre ces étapes : Installez le pilote mysql2. Utilisez mysql2.createConnection() pour créer un objet de connexion contenant l'adresse de l'hôte, le port, le nom d'utilisateur, le mot de passe et le nom de la base de données. Utilisez connection.query() pour effectuer des requêtes. Enfin, utilisez connection.end() pour mettre fin à la connexion.
Quelles sont les variables globales dans nodejs
Apr 21, 2024 am 04:54 AM
Les variables globales suivantes existent dans Node.js : Objet global : global Module principal : processus, console, nécessiter Variables d'environnement d'exécution : __dirname, __filename, __line, __column Constantes : undefined, null, NaN, Infinity, -Infinity
Y a-t-il une grande différence entre nodejs et java ?
Apr 21, 2024 am 06:12 AM
Les principales différences entre Node.js et Java résident dans la conception et les fonctionnalités : Piloté par les événements ou piloté par les threads : Node.js est piloté par les événements et Java est piloté par les threads. Monothread ou multithread : Node.js utilise une boucle d'événements monothread et Java utilise une architecture multithread. Environnement d'exécution : Node.js s'exécute sur le moteur JavaScript V8, tandis que Java s'exécute sur la JVM. Syntaxe : Node.js utilise la syntaxe JavaScript, tandis que Java utilise la syntaxe Java. Objectif : Node.js convient aux tâches gourmandes en E/S, tandis que Java convient aux applications de grande entreprise.
Quelle est la différence entre les fichiers npm et npm.cmd dans le répertoire d'installation de nodejs ?
Apr 21, 2024 am 05:18 AM
Il existe deux fichiers liés à npm dans le répertoire d'installation de Node.js : npm et npm.cmd. Les différences sont les suivantes : différentes extensions : npm est un fichier exécutable et npm.cmd est un raccourci de fenêtre de commande. Utilisateurs Windows : npm.cmd peut être utilisé à partir de l'invite de commande, npm ne peut être exécuté qu'à partir de la ligne de commande. Compatibilité : npm.cmd est spécifique aux systèmes Windows, npm est disponible multiplateforme. Recommandations d'utilisation : les utilisateurs Windows utilisent npm.cmd, les autres systèmes d'exploitation utilisent npm.
Nodejs est-il un langage de développement back-end ?
Apr 21, 2024 am 05:09 AM
Oui, Node.js est un langage de développement backend. Il est utilisé pour le développement back-end, notamment la gestion de la logique métier côté serveur, la gestion des connexions à la base de données et la fourniture d'API.
Enseignement du nœud PI: Qu'est-ce qu'un nœud PI? Comment installer et configurer le nœud PI?
Mar 05, 2025 pm 05:57 PM
Explication détaillée et guide d'installation pour les nœuds de pignon Cet article introduira l'écosystème de pignon en détail - nœuds PI, un rôle clé dans l'écosystème de pignon et fournir des étapes complètes pour l'installation et la configuration. Après le lancement du réseau de test de la blockchain pèse, les nœuds PI sont devenus une partie importante de nombreux pionniers participant activement aux tests, se préparant à la prochaine version du réseau principal. Si vous ne connaissez pas encore Pinetwork, veuillez vous référer à ce qu'est Picoin? Quel est le prix de l'inscription? PI Utilisation, exploitation minière et sécurité. Qu'est-ce que Pinetwork? Le projet Pinetwork a commencé en 2019 et possède sa pièce exclusive de crypto-monnaie PI. Le projet vise à en créer un que tout le monde peut participer
Comment déployer le projet nodejs sur le serveur
Apr 21, 2024 am 04:40 AM
Étapes de déploiement de serveur pour un projet Node.js : Préparez l'environnement de déploiement : obtenez l'accès au serveur, installez Node.js, configurez un référentiel Git. Créez l'application : utilisez npm run build pour générer du code et des dépendances déployables. Téléchargez le code sur le serveur : via Git ou File Transfer Protocol. Installer les dépendances : connectez-vous en SSH au serveur et installez les dépendances de l'application à l'aide de npm install. Démarrez l'application : utilisez une commande telle que node index.js pour démarrer l'application ou utilisez un gestionnaire de processus tel que pm2. Configurer un proxy inverse (facultatif) : utilisez un proxy inverse tel que Nginx ou Apache pour acheminer le trafic vers votre application
