React,NodeJS,FaunaDB,Vercel로 구축된 트위터 게시물 스케줄러(제2부분) 배치

8260 단어 nodefaunareactvercel

소개하다.


우리의 첫 번째 글에서 우리는 React, Node를 사용하여 트위터를 호출했다.그리고이 장에서 우리는 그것을 Vercel에 배치할 것이다.
왜 비셀이야?
Vercel은 구성이 전혀 없는 프런트엔드 애플리케이션을 배포하고 수백만 페이지까지 동적으로 확장할 수 있는 최적의 장소입니다.또한 추가 구성 없이 백엔드를 서버 기능이 없는 것으로 배치할 수 있습니다.서버 없음 함수는 HTTP 요청을 받고 응답하는 백엔드 언어로 작성된 코드 세그먼트입니다.

공구.


시작하기 전에 다음을 확인하십시오.
  • 애플리케이션의 Vercel 계정을 구축합니다.너는 그것을 만들 수 있다 here.
  • Github 계정 하나가 저희 버전으로 제어됩니다.너는 그것을 만들 수 있다 here.
  • 저희 크론 작업이 있는 크론허브 계정입니다.너는 그것을 만들 수 있다 here.
  • 배치 구조


    다음은 Twitter의 고급 배포 아키텍처입니다.
  • 우리는 git --push 명령을 사용하여 프로그램을 Github로 전송합니다.
  • 그리고 Github는 자동으로 우리의 코드를 Vercel로 전송합니다.
  • Vercel은 그것을 건조하고 그것을 살아남았다.
  • 이러한 아키텍처를 생성하고 생명력을 유지하려면 다음이 필요합니다.
  • 어플리케이션을 위한 Github 저장소를 만듭니다.
  • 저희 코드 라이브러리에 약간의 변경을 해서 적합합니다Vercel serverless functions.
  • Github 저장소를 Vercel에 연결하여 Github 자동화→ 위셀 배치.
  • 우리 시작합시다!

    Twittler를 Github로 밀어넣기


    응용 프로그램을 Github로 전송하려면 먼저 Github 저장소를 만들어야 합니다.그것은 우리 프로젝트의 모든 파일과 모든 파일의 수정 역사를 포함할 것이다.라이브러리를 작성하려면 다음 절차를 따르십시오.

  • "Create a new repository"페이지로 이동합니다.

  • 저장소 이름 추가("Twitter"사용)
  • 저장소 만들기 버튼을 클릭합니다.
  • 우리는 이미 저장소를 만들었다!이제 기존의 코드 라이브러리를 그 위로 밀어 봅시다.이 작업을 수행하려면 다음 절차를 따르십시오.
  • 터미널/명령줄을 사용하여 프로젝트 파일을 저장하는 폴더에 들어갑니다: cd your_path_to_the_application,enter키를 누르십시오.
  • git remote add origin [[email protected]](mailto:[email protected]):YOUR_GITHUB_USERNAME/REPO_NAME.git를 입력하고 Enter 키를 누릅니다.
  • git branch -M main를 입력하고 Enter 키를 누릅니다.
  • git add .를 입력하고 Enter 키를 누릅니다.
  • git commit -m "first commit"를 입력하고 Enter 키를 누릅니다.
  • , 마지막으로 git push -u origin main를 입력하고 enter 키를 누릅니다.그것은 우리의 응용 프로그램을 Github로 전송할 것이다.
  • 어플리케이션을 푸시할 때 문제가 발생할 경우 this 설명서 또는 Github 공식 권장 사항을 사용하십시오.

    Github에 프로그램이 있는지 확인하려면 https://github.com/YOUR_GITHUB_NAME/twittler 로 돌아가서 로컬 파일을 보았는지 확인하십시오.

    Vercel에서 어플리케이션 사용 가능


    Verceldoesn’t support cron jobs이기 때문에 저희는 Cronhub를 사용하여 트위터 게시 작업을 처리할 것입니다. 이것은 server/index.js 파일에 있습니다.
    Cronhub을 사용하면 버셀의 서버 기능이 없는 순환 작업을 만들고 트위터에 트윗을 올릴 수 있습니다.기본적으로, 우리는 크론 작업이 분당 호출되는 API 루트를 만들 것이다.
    이것이 바로 우리의 응용 프로그램 구조가 이로 인해 바뀔 방식이다.
    보낸 사람:

    다음을 수행합니다.

    우리를 바꾸는 것server/indiex.js부터 시작합시다.

    급행열차로 왔어요.js에서 Vercel까지 서버 기능 없음


    서버 기능이 없고 추가 설정이 필요 없는 것을 만들고 배치하려면 프로젝트 루트 디렉터리 /api 디렉터리에 트위터 게시 기능을 포함하는 파일을 설치해야 합니다. 이 파일은 내보내기 함수에 봉인되어 있습니다.이 작업을 수행하려면 다음 절차를 따르십시오.
  • Twitter 프로젝트의 루트 폴더로 이동합니다.
  • 폴더를 만듭니다.
  • 거기에 api 파일을 놓으세요.

  • 이 코드까지.
    const faunadb = require('faunadb')
    const {TwitterApi} = require('twitter-api-v2')
    const twitterClient = new TwitterApi(process.env.TWITTER_BEARER_TOKEN)
    
    const q = faunadb.query
    const faunaClient = new faunadb.Client({
      secret: process.env.REACT_APP_FAUNADB_SECRET,
    })
    
    module.exports = async (req, res) => {
      if (req.method === 'POST') {
        try {
          const now = new Date()
          now.setSeconds(0)
          now.setMilliseconds(0)
    
          // get all tweets from Now - 1 minute to Now
          const {data} = await faunaClient.query(
    
            q.Map(
              q.Paginate(q.Match(q.Index('tweetsByDate'), now.getTime())),
              q.Lambda(['date', 'ref'], q.Get(q.Var('ref')))
            )
          )
    
          // post all tweets from date range on twitter
          data.forEach(async ({data: {tweet}}) => {
              await twitterClient.v1.tweet(tweet)
          })
    
          res.status(200).json({success: true})
        } catch (err) {
          res.status(500).json({statusCode: 500, message: err.message})
        }
      } else {
        res.setHeader('Allow', 'POST')
        res.status(405).end('Method Not Allowed')
      }
    }
    
    
  • cron.js 디렉터리에 cron.js 파일을 만들면 API 호출https://ourapp.com/api/cron을 제공합니다. 이 호출은 트위터에 트윗을 올립니다.

    Vercel에 배포


    Vercel에 애플리케이션을 배치하기 전에 최신 변경 사항을 Github 저장소로 푸시합니다.terminal을 열고 프로젝트의 루트 폴더로 이동하여 다음을 실행합니다.
    
    git add .
    
    git commit -m “vercel setup”
    
    git push -u origin main
    
    
    이제 Vercel에 애플리케이션을 배치합니다.
  • 새 Vercel 항목page으로 이동합니다.

  • 저장소를 선택하고 가져오기 버튼을 클릭합니다.


  • 프로젝트 이름과 모든 환경 변수를 프로젝트 루트 폴더의 /api 파일에서 .env.local 탭에 추가하여 다음과 같이 프로젝트를 구성합니다.

  • 배포 버튼을 클릭합니다.
  • 다행입니다. 저희 프로그램은 실시간입니다.
    우리가 해야 할 마지막 일은cron 작업을 만드는 것입니다. 매 분마다 호출됩니다.

    Cron 작업을 Cronhub로 이동


    cron 작업을 Cronhub로 이동하려면 다음 절차를 따르십시오.

  • 스케줄러 탭으로 이동한 다음 + 새 스케줄러 버튼을 클릭합니다.


  • cron 작업을 만들려면 다음과 같이 하십시오.

    Vercel 도메인 설정에서 대상 HTTP URL을 찾을 수 있습니다.

  • 저장 버튼을 클릭합니다.
  • 우리는 이미 우리의cron 일을 창조했다!
    스케줄러 탭을 사용하여 다음을 확인할 수 있습니다.

    이 작업은 분당 Environment Variables 포스터 요청을 하는 것이다.yourdomain.com/api/cron에 있는handler 함수는Fauna에서 모든 트윗을 가져와 트위터에 올립니다.

    결론


    축하합니다!우리는 트위터 스케줄러 프로그램을 만들고 배치했다.
    마지막 예제here를 통해 저장소를 찾을 수 있습니다.
    Write with Fauna Program와 관련된 서면 서류.

    좋은 웹페이지 즐겨찾기