이 문서에서는 Scully를 소개하고 Angular 응용 프로그램을 Cloudflare 페이지에 배치하는 방법에 대해 설명합니다.이 문서는 Angular, Scully, Cloudflare 페이지에서 JAMstack 프로그램을 설정하는 데 관심이 있는 사용자를 대상으로 합니다.

 ❗ Pre-requisites ❗

- You should have some basic knowledge of Angular
- You should have a Cloudflare account
- You should have a Github account

Cloudflare 페이지란?

Cloudflare Pages는 JAMstack 프레임워크를 사용하는 사용자를 위한 솔루션입니다.Cloudflare Pages는 Github와 쉽게 통합할 수 있으며, 새로운 버전을 출시할 때, Cloudflare는 자동으로 네트워크에서 응용 프로그램을 구축하고 배치하기 시작합니다.
만약 당신이 JAMstack에 익숙하지 않다면, 이것은 대규모 웹 사이트를 개발하고 배치하는 유행 방식이다.JAMstacklink에 대한 자세한 내용은 이 리소스를 참조하십시오.
Cloudflare 페이지로 돌아가 앞에서 말한 바와 같이 이 플랫폼에서 원본 코드를 위탁 관리하면 GitHub 메모리 라이브러리와 통합됩니다.사이트를 구성하면 Cloudflare의 인터페이스에서 제출할 때마다 제출할 때마다 유일한 URL과 미리 보기 환경을 미리 볼 수 있습니다.
Pages 프로젝트에 다른 Cloudflare 사용자를 초대하여 협력할 수 있습니다.당신의 사이트가 미리보기 지점에서 보기에 괜찮을 때, 당신은 그것을 생산 지점으로 미룰 수 있다.
한 마디로 하면 Cloudflare Pages는 번거로움 없이 프로그램을 쉽게 배치할 수 있습니다.

Scully를 사용하여 Angular 응용 프로그램 설정하기

Angular 애플리케이션을 설정하기 전에 Scully에 대해 빠르게 살펴보겠습니다.
Scully는 JAMstack을 포옹하려는 각도 항목에 가장 좋은 정적 사이트 생성기입니다.이것은 응용 프로그램을 사용하고 모든 페이지/루트에 정적 index.html 을 만들 것입니다.모든 index.html 에는 이미 존재하는 내용이 있습니다. 이것은 응용 프로그램을 사용자에게 바로 보여 줍니다.또한, 이것은 당신의 응용 프로그램을 매우 친밀하게 할 것입니다.이외에도 당신의 수영 센터는 예전처럼 역할을 발휘할 것입니다.스컬리의 큰 발전은 루트와 내용을 조작할 수 있는 사용하기 쉽고 확장 가능한 플러그인 시스템이 있다는 것이다.
이 문서에서 클라우드 플러그인 페이지를 이해하기 위해 아주 간단한 프로그램을 설정할 것입니다.
시작하기 전에 Github에 가서 새로운 환매 프로토콜을 만듭니다. https://repo.new Github에 새 저장소를 만드는 간단한 방법입니다.
Repo를 로컬 시스템으로 복제하고 새로운 Angular 프로젝트를 계속 설정합니다.

npm install -g @angular/cli
ng new <YOUR-PROJECT-NAME> --routing

위의 명령을 실행하면 라우터 모듈이 있는 간단한 Angular 애플리케이션이 제공됩니다.Angular CLI가 완료되면 미리 채워진 프레젠테이션 Angular 애플리케이션이 있는 새로운 Angular 작업공간을 제공합니다.
Scully를 계속 추가하도록 하겠습니다. Scully 팀은 다음 명령만 실행하면 됩니다.

ng add @scullyio/init

-------- output should be something like below ---

Installing packages for tooling via npm.
Installed packages for tooling via npm.
    Install ng-lib
    ✅️ Added dependency
UPDATE src/app/app.module.ts (466 bytes)
UPDATE src/polyfills.ts (3019 bytes)
UPDATE package.json (1310 bytes)
- Installing packages (npm)...
√ Packages installed successfully.
    ✅️ Update package.json
    ✅️ Created scully configuration file in scully.demo-cloudflare-pages.confts
CREATE scully.demo-cloudflare-pages.config.ts (196 bytes)
UPDATE package.json (1384 bytes)
CREATE scully/tsconfig.json (450 bytes)
CREATE scully/plugins/plugin.ts (305 bytes)

Scully와 Angular를 사용할 준비가 되어 있습니다. 이를 위해서는 Angular 프로젝트를 구축해야 합니다.이 작업은 다음 명령을 실행하여 수행할 수 있습니다.

ng build --prod

현재 Angular 프로젝트는 이미 완공되어 사고리가 그 일을 완성할 수 있게 되었다.다음 명령을 사용하여 Scully를 실행합니다.

npx scully

우리 해냈어!우리는 당신의 Angular 프로그램을 미리 렌더링된 정적 사이트로 만들었습니다. 이제 Github repo로 변경 사항을 전송할 수 있습니다.

Cloudflare 페이지의 저장소 설정

Cloudflare 페이지로 연결하거나 새로 만든 프로그램이 준비되어 있습니다.

Cloudflare 계정으로 이동

오른쪽에서 페이지

를 클릭

3. "프로젝트 만들기"를 클릭

4. Github 계정 연결

5. Github에 연결되면 저장소를 선택할 수 있습니다.우리의 예시에서 나는 demo-cloudflare-pages6. 항목을 선택한 후 설정 시작 을 클릭합니다.
7. Build Settings로 스크롤하여 다음 그림과 같은 설정을 입력합니다.

8.배치를 클릭
9.Cloudflare에서 응용 프로그램을 구축하기 시작할 것입니다. 이것은 실패할 것입니다. 이것은 의도적인 것입니다. 걱정하지 마십시오. 다음 장에서 복구할 것입니다.

Cloudflare 페이지를 사용하여 배포

우리는 거의 우리의 응용 프로그램을 배치할 준비가 되어 있다. 이전 부분에서 우리는 모든 것을 배치하여 배치를 준비했다.그러나 Cloudflare 페이지를 사용하기 전에 조정이 필요합니다.그래서 이 변경 사항을 진행합시다!

소포를 열어보세요.json 파일, 다음 코드 세그먼트 추가scripts:

    "buildStaticApp": "ng build --prod && npx scully --scanRoutes"

2.scully 프로필을 엽니다. 우리의 예에서scully.demo-cloudflare-pages.config.ts3. 구성에 다음 코드 세그먼트를 추가합니다.

puppeteerLaunchOptions: {
    args: [
      '--disable-gpu',
      '--renderer',
      '--no-sandbox',
      '--no-service-autorun',
      '--no-experiments',
      '--no-default-browser-check',
      '--disable-dev-shm-usage',
      '--disable-setuid-sandbox',
      '--no-first-run',
      '--no-zygote',
      '--single-process',
      '--disable-extensions',
    ],
  }

Cloudflare가 VM이나 Docker에서 실행될 때 이러한 변경 사항이 필요합니다. "진정한"chromium 가속을 실현할 수 없습니다.이러한 방법으로 VM 또는 Docker에서 실행할 수 있도록 Puppeter의 누드 최소값을 활성화했습니다.
4. 변경 사항을 Github repo로 전송
5. Cloudflare는 자동으로 변경 사항을 가져와서 Cloudflare 프로젝트로 돌아갑니다. 프로그램이 구축되고 있는 것을 볼 수 있습니다.

6. 만일 모든 것이 순조롭다면, 우리는 이미 우리의 응용을 성공적으로 배치했다!!

요약

본 논문에서, 우리는Scully의 도움으로 Angular 응용 프로그램을 JAMstack 응용 프로그램으로 만들고, 이를 클라우드flare 페이지와 함께 배치합니다.다음은 Cloudflare 페이지와 Scully를 사용할 때 발견한 유용한 자원들입니다.환매 협의의 예here를 찾을 수 있다.
질문이 있으시면 제 트위터 프로필을 통해 DM을 보내주세요.

리소스

Repository

Scully

Cloudflare Pages