Express.js 앱을 만들고 Vercel에 배포하는 방법은 무엇입니까?

9447 단어 beginnerstutorialjavascriptwebdev
Vercel은 프런트엔드 애플리케이션과 정적 사이트를 호스팅하는 플랫폼이지만 서버리스 기능을 사용하여 익스프레스 앱을 호스팅할 수도 있습니다.

이 자습서에서는 처음부터 express 앱을 만들고 vercel에 배포하는 방법을 살펴봅니다.

전제 조건



Node.js should be installed on your system.



익스프레스 앱 만들기


  • npm init -y를 실행하여 기본 구성으로 package.json 파일을 만듭니다.
  • git init를 실행하여 git 저장소를 초기화합니다.
  • .gitignore 파일을 만들고 그 안에 node_modules/를 씁니다.
  • npm 또는 yarn 을 사용하여 익스프레스 패키지를 설치합니다.

    • npm i express


  • 루트 폴더에 index.js 파일을 만듭니다.
  • index.js 파일 안에 다음을 추가하여 익스프레스 앱을 만듭니다.

    • const express = require('express');
const app = express();

app.listen(process.env.PORT || 3000);


  • public 폴더를 만들고 그 안에 index.html 파일을 만듭니다.

    • <!--index.html-->
<!DOCTYPE html>
<html lang="en">
<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>Express.js on Vercel</title>
</head>
<body>
    <h1>Express App Responded</h1>
</body>
</html>


    이제 누군가가 우리 앱에 GET 요청을 보낼 때 응답으로 이 파일을 보내야 합니다.

    그렇게 하려면 static 파일이 public 폴더 안에 있다고 익스프레스 앱에 알려야 합니다. index.js 파일에 다음을 추가하여 이를 수행할 수 있습니다.

    app.use(express.static('public'))


    Note that the above line is a middleware, so add this line above all your request handlers.


  • 이제 GET 요청 처리기를 만들고 html 파일을 응답으로 보냅니다.

    • //index.js
app.get('/', (req, res) => {
  res.sendFile('index.html', {root: path.join(__dirname, 'public')});
})

    res.sendFile()의 두 번째 인수는 파일이 있는 위치absolute path를 지정합니다.
  • app를 내보내어 serverless 함수로 실행합니다.

    • // index.js
module.exports = app


  • 응용 프로그램을 로컬에서 실행하려면 start 파일에 package.json 스크립트를 추가하십시오.

    • "start": "node index.js"


  • npm start 명령을 사용하여 응용 프로그램을 실행합니다. 응용 프로그램은 http://localhost:3000에 있어야 합니다.
  • 다음과 유사한 출력이 표시되어야 합니다.


  • 방금 Express 앱을 만들었습니다 🎉

    • Vercel에 배포


  • 응용 프로그램의 루트 폴더에 vercel.json 파일을 만듭니다. 이것은 Vercel의 configuration file입니다.
    • vercel.json 파일에 다음을 추가합니다.

    {
  "builds": [
      {
          "src": "index.js",
          "use": "@vercel/node"
      }
  ],
  "routes": [
      {
        "src": "/(.*)",
        "dest": "index.js"
      }
  ]
}


    이제 앱을 Vercel에 배포할 준비가 되었습니다!
  • GitHub에서 git 리포지토리를 생성하고 여기에 코드를 추가합니다.
  • Vercel에 new project을 만들고 방금 만든 git 저장소를 가져옵니다.


  • 응용 프로그램을 배포합니다. 그게 다야. 이제 귀하의 애플리케이션이 라이브 상태여야 합니다!



    • 다음은 응용 프로그램의 live demo입니다.

    express-to-vercel github 저장소에서 소스 코드를 찾을 수 있습니다!

    종료합니다.

    This post was originally published on Syntackle

    React 앱에서 Firebase 사용
    [python] Slack의 API로 여러 사람에게 멘션

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage