Cloudflare Workers Sites에서 정적 사이트를 만드는 방법

안녕하세요! 제 이름은 Dima이고 Wrike SysOps 팀의 기술 책임자입니다. 이 기사에서는 웹사이트를 사용자에게 최대한 가깝게 만들고 한 달에 10달러를 들여 5분 안에 배포를 자동화하는 방법을 설명하겠습니다. 이 기사는 우리 팀 내에서 해결하는 문제와는 거의 관련이 없습니다. 이것은 오히려 나에게 새로운 기술을 알게 된 나의 개인적인 경험과 인상입니다. 다양한 경험을 가진 사람들에게 지침이 유용할 수 있도록 단계를 최대한 자세히 설명하려고 노력했습니다. 나는 당신이 즐길 수 있기를 바랍니다. 가다!

따라서 아마도 귀하는 이미 웹사이트를 호스팅하는 간단하고 저렴한 방법을 찾았을 것입니다. 아마도 여기에 설명된 대로 무료일 수도 있습니다. 훌륭한 기사.

하지만 갑자기 여전히 지루하고 멋진 신기술 세계를 접하고 싶나요? 배포 자동화를 고려 중이고 사이트 속도를 최대한 높이고 싶다고 가정해 보겠습니다. 이 기사에서 우리는 휴고, 그러나 이는 선택 사항입니다.

자동화를 위해 Gitlab CI/CD를 사용하지만 가속화는 어떻습니까? 다음을 사용하여 Cloudflare에 직접 사이트를 배포해 보겠습니다. 작업자 사이트.

시작하는 데 필요한 것:

• Gitlab(자체 또는 흐림)

• 계정 Cloudflare에서

• 설치됨 nodejs/npm

1부: Hugo 설치

이미 Hugo가 설치되어 있거나 다른 정적 사이트 생성기를 선호하는 경우(또는 전혀 사용하지 않는 경우) 이 부분을 건너뛸 수 있습니다.

1. 다음에서 휴고를 다운로드하세요. https://github.com/gohugoio/hugo/releases

2. 우리는 다음에 정의된 것 중 하나에 따라 Hugo 실행 파일을 배치합니다. PATH 방법

3. 새 사이트 만들기: hugo new site blog.example.com

4. 현재 디렉터리를 새로 생성된 디렉터리로 변경합니다. cd blog.example.com

5. 디자인 테마를 선택하세요(https://github.com/budparr/gohugo-theme-ananke/releases 또는 무엇이든)

6. 첫 번째 게시물을 만들어 보겠습니다. hugo new posts/my-amazing-post.md

7. 생성된 파일에 콘텐츠를 추가합니다. 콘텐츠/게시물/my-amazing-post.md.
   모든 작업이 완료되면 초안 값을 다음으로 변경합니다. 그릇된

8. 정적 파일 생성: hugo -D

이제 정적 사이트는 디렉토리 내부에 있습니다. ./공공의 첫 번째 수동 배포를 위한 준비가 완료되었습니다.

2부: Cloudflare 설정

이제 Cloudflare의 초기 설정을 살펴보겠습니다. 사이트에 대한 도메인이 이미 있다고 가정해 보겠습니다. 예를 들어보자 blog.example.com.

1단계: DNS 항목 생성

먼저 도메인을 선택한 다음 메뉴 항목을 선택하세요. DNS. 우리는 블로그 A-레코드를 생성하고 이에 대한 가상 IP를 표시합니다(이것은 공식 추천, 하지만 조금 더 예쁘게 만들 수도 있었습니다).

2단계: Cloudflare 토큰

1. 내 프로필 (My Profile) -> API 토큰 탭-> 토큰 생성 -> 커스텀 토큰 생성

여기에서는 토큰을 계정 및 영역으로 제한해야 하지만 그림에 나열된 권한에 대한 편집 옵션은 그대로 둡니다.

미래를 위해 토큰을 저장하세요. 세 번째 부분에서 필요합니다.

3단계: accountid 및 zoneid 가져오기

도메인 → 살펴보기 → [오른쪽 사이드바]

이건 내꺼이니 함부로 사용하지 마세요 :)

토큰 옆에 저장하세요. 세 번째 부분에서도 필요합니다.

4단계: 작업자 활성화

도메인 → 노동자 → 작업자 관리

고유한 이름을 선택하고 Workers → Unlimited(현재 월 $5) 요금을 부과합니다. 원하는 경우 나중에 무료 버전으로 업그레이드할 수 있습니다.

3부: 첫 번째 배포(수동 배포)

실제로 무슨 일이 일어나고 있는지 알아보기 위해 첫 번째 수동 배포를 수행했습니다. 이 모든 것이 더 간단하게 수행될 수 있지만:

1. 랭글러 설치: npm i @cloudflare/wrangler -g

2. 블로그 디렉토리로 이동해 보겠습니다. cd blog.example.com

3. 랭글러 실행: wrangler init — site hugo-worker

4. 랭글러 구성을 만듭니다(요청 시 토큰 입력). wrangler config

이제 새로 생성된 파일을 변경해 보겠습니다. wrangler.toml (여기에 가능한 설정의 전체 목록):

1. 지정 accountid 및 zoneid

2. 우리는 변화한다 길 *와 같은 것blog.example.com/*

3. 지정 그릇된 에 노동자개발

4. 버킷을 ./public으로 변경 (또는 정적 사이트의 위치)

5. 경로에 도메인이 두 개 이상 있으면 작업 스크립트에서 경로를 수정해야 합니다. 노동자 사이트/index.js (기능 참조 핸들이벤트)

좋습니다. 이제 팀을 사용하여 사이트를 배포할 시간입니다. wrangler publish.

4부: 배포 자동화

이 가이드는 Gitlab용으로 작성되었지만 일반적으로 자동화된 배포의 본질과 용이성을 포착합니다.

1단계: 프로젝트 생성 및 구성

1. 새 GitLab 프로젝트를 생성하고 사이트 업로드: 디렉터리 블로그.example.com 모든 내용이 포함된 파일은 프로젝트 루트 디렉터리에 있어야 합니다.

2. 우리는 설정했다 변하기 쉬운 CFAPITOKEN 여기 : 설정 → CI / CD → 변수

2단계: .gitlab-ci.yml 파일 생성 및 첫 번째 배포 실행

파일 만들기 .gitlab-ci.yml 루트에 다음 내용이 포함됩니다.

stages:
  - build
  - deploy

build:
  image: monachus/hugo
  stage: build
  variables:
    GIT_SUBMODULE_STRATEGY: recursive
  script:
    - cd blog.example.com/
    - hugo
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #


deploy:
  image: timbru31/ruby-node:2.3
  stage: deploy
  script:
    - wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - cd blog.example.com/
    - ../dist/wrangler publish
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #

첫 번째 배포를 수동으로 시작합니다(CI/CD → 파이프 라인 → 파이프라인 실행) 또는 마스터 브랜치에 커밋합니다. 짜잔!

결론

글쎄, 제가 그것을 약간 절제했을 수도 있고, 전체 과정이 XNUMX분 남짓 걸렸습니다. 하지만 이제 자동 배포 기능과 작업자로 수행할 수 있는 다른 작업에 대한 몇 가지 새로운 아이디어를 갖춘 빠른 ​​사이트가 생겼습니다.

 Cloudflare 근로자    휴고    GitLab Ci

출처 : habr.com