ヴェルセルって何？ノードサービスをデプロイするにはどうすればよいですか?-jsチュートリアル-php.cn

ヴェルセルって何？ノードサービスをデプロイするにはどうすればよいですか?

青灯夜游

リリース： 2022-07-11 20:38:00

転載

21812 人が閲覧しました

ヴェルセルとは何ですか?この記事では、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ワークフロー公式サイト（ Web ページの効果はクールです): https://vercel.com/workflow

Vercel をグローバルにダウンロードします (npm i vercel -g

) 、コマンドが何であるかわからない場合は、

-h

作者が制限しているコマンドだけを使用してください。私が知っているコマンドのリストは次のとおりですヴェルセルって何？ノードサービスをデプロイするにはどうすればよいですか?

vercel login

vercel dev
vercel dev --bug
vercel
vercel --prod

静的サービスのデプロイ

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

ログイン後にコピー

https://vercel-sample-ten.vercel.app/ のスクリーンショットで静的サービス

にアクセスできます。次の文も見られました。

Deployed toproduction.Run vercel --prod to overwrite Later ヴェルセルって何？ノードサービスをデプロイするにはどうすればよいですか? .If we want to update resource Later, use

vercel --prod

## 、必要なログインを除いて、3 つのコマンドを使用してローカルサービスを Vercel サーバーにデプロイします

vercel dev: 開発中にアプリケーションが実行されているかどうかを確認するために使用されます

vercel

vercel --prod
にログインできます。
デプロイメントステータスを表示する

部署 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

ヴェルセルって何？ノードサービスをデプロイするにはどうすればよいですか?

发现给我报错了，理由是 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 サイトの他の関連記事を参照してください。