ホームページ > 記事 > ウェブフロントエンド > ヴェルセルって何？ノードサービスをデプロイするにはどうすればよいですか?
ヴェルセルって何？ノードサービスをデプロイするにはどうすればよいですか?
- 青灯夜游転載
- 2022-05-07 21:34:2221719ブラウズ
ヴェルセルとは何ですか?この記事では、Vercel について学び、Vercel で Node サービスをデプロイする方法を紹介します。お役に立てば幸いです。
「インタビューの頻度: HTTP キャッシュ 」を書いていたとき、強力なキャッシュとネゴシエートされたキャッシュに関する 2 つのデモを書いたことがあるのですが、キャッシュはこれを行うには、コードを貼り付けるだけで、Web ページ上でそれを体験することはできません (GIF を投稿しましたが)
作者のデモサンプルはすべて github ページに配置されています。静的リソースはサーバーなしでデプロイできますが、サーバー側アプリケーションをデプロイする機能はありません
最近、CI/CD のナレッジ ポイントについて学習していたときに、Vercel のことを思い出し、それができるのではないかと考えました。サーバーサイドアプリケーションをvercelに置きますか？
Vercel とは
Vercel は、開発者が Web サイトを迅速に展開できるようにする、すぐに使える Web サイト ホスティング プラットフォームです。世界中に CND ノードがあるため、Github の公式 github ページよりも安定して高速にアクセスできます
Koala がオープンソースについて語る 以前紹介しました: Vercel Vercelおよび Next.js: オープンソースのオールスター チームの背後にあるビジネス ロジック
##テキスト バージョン: Vercel と Next.js: オープンソースのオールスター チームの背後にあるビジネス ロジックhttps: //juejin.cn/post/7057333396359348255簡単に言えば、サーバーへのアプリケーションのデプロイメントを簡素化でき、サーバーを購入することなく無料で利用できます
公式サイト
- #Vercel公式サイト：https://vercel.com/
- Vercelワークフロー公式サイト（ Web ページの効果はクールです): https://vercel.com/workflow
- 共通コマンド ライン
Vercel をグローバルにダウンロードします (npm i vercel -g
) 、コマンドが何であるかわからない場合は、-h
作者が制限しているコマンドだけを使用してください。私が知っているコマンドのリストは次のとおりです
- : Vercel アカウントにログインします
-
vercel dev : サービスをローカルで開始します -
vercel dev --bug: サービスをローカルで開始してログを出力します -
vercel: ローカル リソースを Vercel にデプロイします -
vercel --prod: ローカル Web ページを更新します
静的サービスのデプロイ
Vercel が登場しました ご存知のとおり、Vercel を使用すると開発者によるサービスのデプロイメントが簡素化できると前述しましたが、その目的は何ですか?どこまで簡略化できるのか？ ここでは、単純な静的サービスを最初からデプロイします
Vercel をローカルにインストールします
npm i vercel -g
Vercel にログインします
vercel login
# #Select 接続方法が確立されると、
yoyo, man が Web サイトにポップアップ表示されます。あなたの名前は何ですか？
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>Vercel Demo</h1>
</body>
</html>ローカルでテストします。コマンド ラインを入力します。vercel dev#これは最初の実行なので、ルート ディレクトリに
.vercel
がないため、必要な情報を入力する必要があります。この時点で、ローカル サーバーと Vercel サーバーはバインドされます
vercel
Deployed toproduction.Run vercel --prod to overwrite Later
vercel dev: 開発中にアプリケーションが実行されているかどうかを確認するために使用されます
- : デプロイメントサービス
-
vercel --prod: 更新アプリケーション (リソース) -
にログインできます。Vercel バックエンド - デプロイメント ステータスを表示する
部署 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 教程！
以上がヴェルセルって何？ノードサービスをデプロイするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。