>웹 프론트엔드 >JS 튜토리얼 >주간 GitHub 프로젝트: NewsNow - 실시간 트렌드 뉴스를 우아하게 읽기

주간 GitHub 프로젝트: NewsNow - 실시간 트렌드 뉴스를 우아하게 읽기

Barbara Streisand
Barbara Streisand원래의
2024-10-27 06:13:30480검색

*주간 GitHub 프로젝트: NewsNow - 실시간 트렌드를 우아하게 읽는 *

프로젝트 소개

이번 주에는 실시간 트렌드 뉴스를 우아하게 읽을 수 있는 뉴스 집계 플랫폼 뉴스나우를 소개합니다. NewsNow는 여러 데이터 소스에서 실시간 뉴스를 신속하게 집계하여 사용자가 최신 동향 정보에 쉽게 액세스할 수 있도록 돕는 원활한 읽기 환경을 제공합니다. 이 프로젝트는 GitHub OAuth 로그인을 지원하며 Cloudflare D1 데이터베이스를 사용하여 데이터를 관리하고 저장합니다.

이 가이드에서는 Cloudflare Pages에 이 오픈 소스 프로젝트를 배포하는 단계별 프로세스를 안내해 드리겠습니다. GitHub OAuth 로그인을 설정하고, Cloudflare D1 데이터베이스를 구성하고, 프로젝트를 성공적으로 배포하는 방법을 배우게 됩니다.

배포 가이드

1. 준비

1.1 필수 계정

  • GitHub 계정: 프로젝트 코드를 포크하고 관리합니다.
  • Cloudflare 계정: 프로젝트를 배포하고 호스팅합니다.

1.2 GitHub OAuth 애플리케이션 설정

GitHub 로그인을 활성화하려면 GitHub에서 OAuth 애플리케이션을 만들어야 합니다.

  1. GitHub에 로그인하고 개발자 설정으로 이동하세요.
  2. OAuth 앱을 선택하고 새 OAuth 앱을 클릭합니다.
  3. 신청 세부정보를 입력하세요.
    • 애플리케이션 이름: NewsNow(또는 원하는 이름)
    • 홈페이지 URL: 지금은 포크된 GitHub 저장소의 URL을 사용하세요(예: https://github.com/your-username/newsnow). 나중에 배포된 URL로 변경할 수 있습니다.
    • 인증 콜백 URL: https://your-cloudflare-pages-url/api/auth/callback 형식을 사용하고 배포 후 your-cloudflare-pages-url을 Cloudflare Pages URL로 바꾸세요.
  4. 등록 후 클라이언트 ID클라이언트 비밀번호를 저장하세요.

Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending News

2. GitHub 프로젝트 포크

  1. GitHub의 원래 프로젝트 페이지인 NewsNow Project로 이동하세요.
  2. 프로젝트를 GitHub 계정으로 포크하려면 오른쪽 상단의 포크 버튼을 클릭하세요.

Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending News

3. Cloudflare 페이지 배포

3.1 GitHub 연결

  1. Cloudflare 계정에 로그인하세요.
  2. Cloudflare 대시보드 왼쪽 메뉴에서 "작업자 및 페이지"로 이동합니다.
  3. "프로젝트 만들기"를 클릭하고 “Git에 연결”을 선택합니다.
  4. Cloudflare가 GitHub 계정에 액세스하도록 승인하고 포크한 newsnow 저장소를 선택하세요.

3.2 Cloudflare 페이지 프로젝트 구성

  1. newsnow 저장소를 선택하고 빌드 설정 페이지로 이동하세요.
  2. 빌드 매개변수 설정:
    • 프레임워크 사전 설정: 없음을 선택하세요.
    • 빌드 명령: pnpm install && pnpm build를 입력하세요.
    • 출력 디렉터리 빌드: dist를 입력하세요.

3.3 환경 변수 구성

  1. 빌드 설정 페이지에서 "환경 변수(고급)"를 클릭하세요.
  2. 다음 환경 변수를 추가합니다.
    • G_CLIENT_ID: GitHub OAuth 애플리케이션의 클라이언트 ID.
    • G_CLIENT_SECRET: GitHub OAuth 애플리케이션의 클라이언트 비밀번호.
    • JWT_SECRET: G_CLIENT_SECRET과 동일한 값을 사용하는 것을 권장합니다.
    • INIT_TABLE: 데이터베이스를 초기화하기 위해 첫 번째 배포의 경우 true로 설정합니다.

4. Cloudflare D1 데이터베이스 생성

4.1 데이터베이스 생성

  1. Cloudflare 대시보드에서 "작업자 및 페이지" ->로 이동합니다. "D1 SQL 데이터베이스".
  2. “데이터베이스 생성”을 클릭하고 이름(예: newsnow_db)을 입력합니다.
  3. 데이터베이스 ID데이터베이스 이름을 적어둡니다.

4.2 wrangler.toml 파일 구성

  1. GitHub 저장소에서 프로젝트 루트 디렉터리에 wrangler.toml 파일을 생성하거나 편집하세요.
  2. wrangler.toml 파일에 다음 구성을 추가합니다.
   name = "newsnow-project"  # Your project name
   type = "javascript"

   [[d1_databases]]
   binding = "NEWSNOW_DB"
   database_name = "your_database_name"  # Replace with your created database name
   database_id = "your_database_id"      # Replace with your created database ID
  1. 변경 사항을 GitHub에 커밋합니다.

4.3 프로젝트 재배포

  1. Cloudflare Pages 프로젝트 페이지로 돌아갑니다.
  2. 프로젝트를 재배포하려면 “배포” 버튼을 클릭하세요.

5. 배포 확인

5.1 프로젝트 접속

  1. 배포가 완료될 때까지 기다립니다.
  2. Cloudflare Pages에서 제공한 URL을 방문하여 페이지가 올바르게 로드되는지 확인하세요.

Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending News

5.2 데이터베이스 초기화 설정 조정

  1. 프로젝트가 성공적으로 배포되고 데이터가 올바르게 로드되면 Cloudflare Pages 프로젝트 설정으로 돌아가세요.
  2. 향후 배포 시 데이터베이스가 다시 초기화되지 않도록 INIT_TABLE 환경 변수를 true에서 false로 변경합니다.

5.3 GitHub OAuth 로그인 테스트

  1. GitHub 계정으로 로그인해 보세요.
  2. 로그인에 실패하면 GitHub OAuth 설정의 인증 콜백 URL이 Cloudflare Pages URL과 일치하는지 확인하세요.

6. 선택적 구성 및 확장

6.1 맞춤 도메인

  • 자신만의 도메인이 있다면 Cloudflare Pages에서 사용자 지정 도메인을 설정할 수 있습니다.

6.2 데이터 소스 확장

  • 필요에 따라 공유/메타데이터, 공유/소스, 서버/소스 디렉터리를 편집하여 새 데이터 소스를 수정하거나 추가하세요.

6.3 디버깅 및 로그

  • Cloudflare에서 제공하는 디버깅 및 로그 도구를 사용하여 프로젝트 성능을 모니터링하세요.

위 내용은 주간 GitHub 프로젝트: NewsNow - 실시간 트렌드 뉴스를 우아하게 읽기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.