에서 관련 게시물 읽기


Cloudflare은 콘텐츠 전송 네트워크 서비스, DDoS 완화, 인터넷 보안 및 분산 도메인 이름 서버 서비스를 제공하는 미국의 웹 인프라 및 웹사이트 보안 회사입니다.

Cloudflare은 React SPA 배포를 위한 무료 호스트 서비스를 제공합니다. 다음은 간단한 단계로 이를 수행하는 방법입니다!

Cloudflare에 React 앱 배포

온라인 데모here

Github 레포 here

반응 앱 만들기

npx create-react-app project-name
cd project-name

yarn
yarn start

Cloudflare 계정 만들기

방문 https://cloudflare.com/

거기에 계정을 만드세요

API 토큰 받기

시작하려면 Cloudflare Dashboard에 로그인하고 사용자 프로필 -> API 토큰으로 이동하거나 here을 클릭하세요. API 토큰 홈 화면에서 토큰 만들기를 선택합니다.

Cloudflare CLI 설치

npm i @cloudflare/wrangler -g

CLI를 사용하여 Cloudflare에 로그인

wrangler login

Cloudflare 로그인 페이지로 리디렉션됩니다. 거기에 계정을 입력하십시오.

1단계:


2단계:


3단계:


4단계:


아래 명령을 실행하고 위에서 얻은 api-key를 입력하십시오.

 wrangler config --api-key

아래 명령을 실행하여 계정 ID를 얻으십시오.

wrangler whoami

아래와 같이 출력이 표시됩니다.

+--------------------------+----------------------------------+
| Account Name             | Account ID                       |
+--------------------------+----------------------------------+
| [email protected]'s Account | abcdefgc13e701c1b4410ad96e3fefe8 |
+--------------------------+----------------------------------+

Cloudflare 프로젝트 초기화

아래 명령을 실행하여 Cloudflare 프로젝트를 초기화하세요.

참고: React App이 생성된 폴더로 cd해야 합니다. 아래와 같이 지침을 따르십시오.

cd project-name
wrangler init

wrangler.toml이 생성됩니다. "bucket"설정을 편집하고 "./build"로 변경합니다.

# ... other wrangler config

account_id = "somestringofyouraccoundid"    # ↫ Edit this value
...
[site]
bucket = "./build"                          # ↫ Edit this value
entry-point = "workers-site"

로컬에서 반응 앱 빌드

cd project-name
yarn build

이렇게 하면 반응 앱이 패키징되고 이제 출력이 빌드 하위 폴더에 있습니다.

아래 명령을 실행하여 로컬 개발 환경을 시작합니다.

wrangler dev

그러면 로컬로 배포된 앱을 볼 수 있습니다.

Cloudflare에서 배포를 미리 보려면 아래 명령을 시도하십시오.

wrangler preview

Cloudflare에 반응 앱 배포

wrangler publish

아래 오류가 발생하는 경우:

Error: Something went wrong! Status: 403 Forbidden, Details {
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10034,
      "message": "workers.api.error.email_verification_required"
    }
  ],
  "messages": []
}

https://Cloudflare.com에서 이메일을 확인해야 하기 때문일 수 있습니다.



다음 명령을 다시 실행하십시오.

wrangler publish
 Built successfully, built project size is 13 KiB.
 Using namespace for Workers Site "__cloudflare-workers_sites_assets"
 Success
 Uploading site files
 Successfully published your script to
 https://cloudflare.xyz-cloudflare.workers.dev
 Deleting stale files...

브라우저 창을 열고 다음 URL을 입력합니다. https://cloudflare.xyz-cloudflare.workers.dev/


이제 앱이 Cloudflare에 배포되었습니다! 행복한 코딩, 행복한 배포!