웹사이트 상태 모니터 #dohackathon

내가 만든 것

do-status-monitor는 사용자가 웹 페이지 또는 API의 가용성을 볼 수 있는 간단한 상태 페이지입니다.

카테고리 제출: 비즈니스용으로 구축

앱 링크

https://do-status-monitor-ulp4u.ondigitalocean.app/

♥ DigitalOcean에게 💰가 이 문서를 얼마 동안 온라인 상태로 유지하도록 합니다.

스크린샷

설명

웹 페이지 또는 API가 작동하는지 확인하기 위해 cron 작업을 실행하는 동적 웹 앱입니다. 가용성 기록이 생성되지 않으므로 앱에 대한 데이터베이스와 같은 요구 사항이 크게 줄어듭니다.

소스 코드 링크

https://github.com/TorstenDittmann/do-status-monitor

허용 라이선스

MIT License

배경

내 앱인 OmniaWrite에서 작업하는 동안 사용자에게 서버 상태를 확인할 수 있는 기능을 제공하기 위해 유사한 서비스를 통합했습니다. 다른 개발자를 위해 이 프로세스를 단순화하기 위해 DigitalOcean에서 호스팅할 수 있는 do-status-monitor 앱을 만들었습니다.

또한 사용자 요구 사항에 맞게 요청을 구성할 수 있습니다. 예를 들어 모든 공급자가 제공하지는 않는 사용자 지정 HTTP 메서드 또는 헤더가 있습니다. 기본적으로 fetch 메서드에서 init 개체에 사용된 모든 항목을 전달할 수 있습니다.

내가 만든 방법

먼저 DigitalOcean express 샘플 리포지토리를 살펴보고 이상한 점이 있는지 확인했습니다. 맞춤 수정 없이 구문이 매우 정상적이라는 것을 알았습니다. 즉, DigitalOceans 앱 플랫폼에서 프로젝트를 빠르고 쉽게 시작할 수 있었습니다. npm 및 express를 종속 항목으로 추가하기 전에 node-cron로 Node.js 프로젝트를 초기화했습니다. 이 프로젝트는 내 이전 프로젝트와 비슷한 방식으로 내가 이미 가지고 있는 기술을 활용했지만 이번에는 DigitalOcean과 다른 개발자가 사용할 의도를 가지고 있었습니다.

확인할 서비스를 구성하기 위해 JSON 구문을 생각해 냈습니다.

{
  "title": "Your title",
  "description": "Example description.",
  "email": "[email protected]",
  "twitter": "https://twitter.com/DittmannTorsten",
  "facebook": "",
  "services": [
    {
      "name": "DigitalOcean.com",
      "description": "DigitalOcean Website",
      "url": "https://www.digitalocean.com/", // URL to check
      "cron": "*/5 * * * *", // every 5 min (cron schedule expression)
      "status": 200, // Expected valid http status code

      // Optional
      "settings": { // You can use every setting from `fetch()` in settings
        "method": "POST",
        "headers": {
          "X-Appwrite-Project": "XXXXXXXXX",
          "X-Appwrite-key": "XXXXXXXXXX"
        }
      }
    },
    {
      // add as many services as you like
    }
  ]
}

앱을 시작한 후 구성의 모든 서비스가 node-cron로 예약되고 엔드포인트가 확인됩니다. 구성에서 사용된 가져오기 요청을 사용자 지정할 수 있습니다. 즉, 사용자 지정 헤더를 추가하여 예를 들어 보호된 끝점을 확인할 수 있습니다.

그런 다음 CSS 프레임워크로 Bulma을, 템플릿 엔진으로 PUG을 추가했습니다. 미니멀한 페이지를 만들고 BulmaSwatch의 색 구성표를 채택했습니다.

변경 사항을 푸시한 후 내 리포지토리를 DigitalOcean의 앱 플랫폼과 연결했는데 이는 매우 간단한 프로세스였습니다.

내 사이트를 처음 방문하는 동안 로그에 오류가 없는 빈 페이지가 표시되었습니다. 빌드 로그에 따르면 Node v12.0.0이 사용되었고 로컬에서는 v14.8.0을 사용하고 있습니다. 대시보드에 이를 변경하는 옵션이 표시되지 않았기 때문에 자연스럽게 추가했습니다.

  "engines": {
    "node": "14.8.0"
  }

내 package.json , 내 코드를 다시 푸시하고 작동했습니다 🥳

결론

환경 변수를 활용하여 이 애플리케이션을 구성하고 싶었지만 구성(개체 배열)의 복잡성이 이러한 기능을 능가합니다.

그럼에도 불구하고 DigitalOcean의 앱 플랫폼은 무료로 웹에서 애플리케이션을 시작할 수 있는 좋은 방법입니다! 경쟁사에 비해 저에게 가장 큰 판매 포인트는 낮은 진입 가격입니다.

할 것

앞으로 다음 기능을 사용하여 이 프로젝트를 확장할 계획입니다.

서버가 다운되면 이메일 업데이트

알림이 포함된 PWA 지원

다양한 브랜드에 맞는 테마 옵션

추가 리소스/정보

https://www.digitalocean.com/community/tutorials/nodejs-express-basics

https://www.digitalocean.com/community/tutorials/nodejs-cron-jobs-by-examples

https://www.digitalocean.com/community/tutorials/js-fetch-api