찾다

집  >  기사  >  웹 프론트엔드  >  베르셀은 무엇인가요? 노드 서비스를 배포하는 방법은 무엇입니까?

베르셀은 무엇인가요? 노드 서비스를 배포하는 방법은 무엇입니까?

青灯夜游
青灯夜游앞으로
2022-05-07 21:34:2221818검색

베르셀이란 무엇인가요? 이 글에서는 Vercel에 대해 소개하고 Vercel에서 Node 서비스를 배포하는 방법을 소개하겠습니다. 도움이 되길 바랍니다!

베르셀은 무엇인가요? 노드 서비스를 배포하는 방법은 무엇입니까?

글을 쓰기 전에 인터뷰 빈번: HTTP Caching에 Strong Caching과 Negotiation Caching에 대한 데모를 두 개 썼는데, 캐싱이 서버 측에서 이루어져야 하기 때문에 코드만 붙여넣을 수 있고 체험할 수 없습니다. 웹 페이지에 ( gif를 올렸지만 )

저자의 데모 예제는 모두 github 페이지에 올려져 있습니다. 서버 없이도 정적 리소스 배포는 가능하지만, 서버 배포 기능은 없는 것이 특징입니다. -side apps

저자는 최근 CI/CD에 대해 배우고 있는데 지식 포인트에 관해서는 Vercel을 생각하고 vercel에서 서버 측 응용 프로그램을 실행할 수 있는지 궁금했습니다.

Vercel이란 무엇입니까

Vercel은 개발자가 웹 사이트를 신속하게 배포할 수 있도록 지원하는 즉시 사용 가능한 웹 사이트 호스팅 플랫폼입니다. 전 세계에 CND 노드를 보유하고 있어 Github의 공식 github 페이지보다 더 안정적이고 빠르게 액세스할 수 있습니다

Koala가 오픈 소스에 대해 이야기합니다 제가 한 번 소개한 적이 있습니다: Vercel 및 Next.js: Behind the Open Source All- Star Team 비즈니스 로직

텍스트 버전: Vercel 및 Next.js: 오픈 소스 올스타 팀의 비즈니스 로직

https://juejin.cn/post/7057333396359348255

간단히 말하면 단순화할 수 있습니다. 애플리케이션 배포 서버에 가면 무료이며 서버를 구입할 필요가 없습니다

공식 웹사이트

  • Vercel 공식 웹사이트: https://vercel.com/

  • Vercel 워크플로 공식 웹사이트( 웹페이지 효과가 멋지네요): https://vercel .com/workflow

Common command line

Vercel을 전역적으로 다운로드하세요(npm i vercel -g). 모르신다면 무슨 명령이 있나요, 그냥 -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>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
    • 베르셀은 무엇인가요? 노드 서비스를 배포하는 방법은 무엇입니까?

작성자 내 이해가 제한되어 있으므로 내가 아는 명령 목록은 다음과 같습니다.

    vercel login: 로그인 Vercel 계정으로

    vercel dev: 로컬에서 서비스 시작베르셀은 무엇인가요? 노드 서비스를 배포하는 방법은 무엇입니까?

    vercel dev --bug: 로컬에서 서비스 시작 및 로그 인쇄🎜🎜vercel code>: Vercel🎜🎜에 로컬 리소스 배포<code>vercel --prod: 로컬 웹 페이지 업데이트 🎜🎜🎜🎜vercel은 Vercel🎜🎜의 약자인 vc로 대체 가능

    🎜정적 서비스 배포🎜🎜🎜이전 기사에서 언급했듯이 이제 vercel에 대해 이해했습니다. Vercel은 개발자의 서비스 배포를 단순화할 수 있지만 어느 정도까지 단순화할 수 있습니까? 🎜🎜여기서 처음부터 간단한 정적 서비스를 배포합니다.🎜🎜Vercel을 로컬에 설치🎜
    mkdir vercel-koa2
cd vercel-koa2
npm init -y
npm i koa -S
touch index.js
    🎜Vercel에 로그인🎜
    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;)
});
    🎜베르셀은 무엇인가요? 노드 서비스를 배포하는 방법은 무엇입니까?🎜🎜연결 방법을 선택하면 홈페이지에 팝업이 뜹니다🎜🎜베르셀은 무엇인가요? 노드 서비스를 배포하는 방법은 무엇입니까?🎜🎜요요, 친구. 이름이 뭐에요? 🎜🎜HTML 파일을 생성하세요. 나중에 Vercel 서버에 업로드하겠습니다🎜
    ...
"scripts": {
    "build": "node index.js",
},
...
    🎜로컬에서 테스트하고 명령줄을 입력하세요🎜
    vercel
    🎜베르셀은 무엇인가요? 노드 서비스를 배포하는 방법은 무엇입니까?🎜🎜첫 번째 실행이므로 루트 디렉터리에 .vercel이 없습니다. , 따라서 몇 가지 필수 정보를 입력해야 합니다. 이때 로컬 및 Vercel 서버가 바인딩됩니다🎜🎜Deployment service🎜
    npm i @vercel/node -S
    🎜베르셀은 무엇인가요? 노드 서비스를 배포하는 방법은 무엇입니까?🎜🎜https://vercel-sample-ten.vercel.app/🎜🎜에서 정적 서비스에 액세스할 수 있습니다. 스크린샷에는 Deployed to Production. Run vercel --prod to overwrite later라는 문장도 있습니다. 나중에 리소스를 업데이트하려면 vercel --prod를 사용하세요. 🎜🎜좋아, 필요한 로그인을 제외하고 세 가지 명령을 사용하여 Vercel 서버에 로컬 서비스를 배포합니다.🎜
      🎜vercel dev: 개발 중에 애플리케이션이 잘 실행되는지 확인하기 위해 사용됩니다. 🎜🎜vercel: 배포 서비스🎜🎜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(&#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명：
    이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
    이전 기사：Angular 프로젝트를 시작하는 방법은 무엇입니까? nginx를 이용한 온라인 프로세스에 대해 이야기해 봅시다!다음 기사：Angular 프로젝트를 시작하는 방법은 무엇입니까? nginx를 이용한 온라인 프로세스에 대해 이야기해 봅시다!

    관련 기사

    더보기