Implante aplicativo angular para páginas de cloudflare

Este guia o leva à criação de um novo aplicativo angular e implantando -o em páginas Cloudflare usando ações automatizadas do GitHub. O que você criará Nome do App Angular: Angular-cloudflare-Demo-App CloudFlare Project: Repositório Angular-CloudFlare-Demo-App Github: URL vivo de Live-Demo-App de App @: Node Angular Node. Verifique a versão da instalação ng Digite Modo de tela cheia Modo de tela cheia 1.2 Crie um novo aplicativo angular # Crie um novo aplicativo angular ng novo angular-cloudflare-deem-app # Você será solicitado com opções: #? Qual formato de folha de estilo você gostaria de usar? CSS [
# ? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
# ? Do you want to create a ‘zoneless’ application without zone.js? No
# ? Which AI tools do you want to configure with Angular best practices? None

# Navigate to project directory
cd angular-cloudflare-demo-app

Enter fullscreen mode

Exit fullscreen mode

1.3 Test Your App Locally

# Start development server
ng serve

# Open browser to
# You should see the Angular welcome page

Enter fullscreen mode

Exit fullscreen mode

Step 2: Setup Cloudflare Account & API Token

2.1 Create Cloudflare Account

Go to cloudflare.com and sign up
Verify your email address

2.2 Create API Token

Navigate to Dashboard → My Profile → API Tokens

Click Create Token → Create Custom Token

Configure the token:

Token Name: Angular App Deploy
Permissions:
– Account – Cloudflare Pages:Edit

Account Resources: Include – Your Account

Enter fullscreen mode

Exit fullscreen mode

Click Continue to Summary → Create Token

Copy and save the token (you won’t see it again!)

2.3 Get Account ID

Go to Cloudflare Dashboard
In the right sidebar, copy your Account ID

Step 3: Create Cloudflare Pages Project

To set up a Cloudflare Pages project for your Angular app using Wrangler CLI, follow these steps. Wrangler is the official Cloudflare CLI tool that lets you create, manage, and deploy Pages projects quickly.

# Install Wrangler globally
npm install -g wrangler

# Authenticate with Cloudflare
wrangler login

# Create your Pages project
wrangler pages project create angular-cloudflare-demo-app

Enter fullscreen mode

Exit fullscreen mode

During setup, Wrangler will ask for the production branch name. Enter main when prompted.

Step 4: Initialize Git and Setup Repository

4.1 Initialize Git Repository

The Angular CLI automatically initializes a Git repository when you create a new project.You can confirm this by running:

git status

Enter fullscreen mode

Exit fullscreen mode

If the repository is not initialized, you can set it up manually:

git init
git add .
git commit -m “Initial commit”

Enter fullscreen mode

Exit fullscreen mode

4.2 Create GitHub Repository

Go to github.com and create a new repository
Name it: angular-cloudflare-demo-app (same as your Angular app)
Don’t initialize with README (we already have files)
Copy the repository URL

4.3 Connect Local Repository to GitHub

# Add remote origin (replace with your GitHub username)
git remote add origin

# Push to GitHub
git branch -M main
git push -u origin main

Enter fullscreen mode

Exit fullscreen mode

Step 5: Setup GitHub Secrets

Go to your GitHub repository
Navigate to Settings → Secrets and Variables → Actions

Click New repository secret and add:

Name: CLOUDFLARE_API_TOKEN, Value: Your API token
Name: CLOUDFLARE_ACCOUNT_ID, Value: Your Account ID

Step 6: Create GitHub Action Workflow

6.1 Create Deployment Workflow

Create .github/workflows/deploy-cloudflare.yml with the following content:

name: Deploy Angular Cloudflare Demo to Cloudflare Pages

on:
workflow_dispatch:
push:
branches: [main]
PULL_REQUEST: ramificações: [main]

Trabalhos: Implantação: Runs -On: ubuntu -mais -mais Nome: implantar o aplicativo de demonstração angular CloudFlare Etapas: – Nome: Checkout Repository Usos: Ações/checkout@V4 – Nome: Setup Node.js Usos: Ações/Setup -Node@V4 com: Node -Version: ’22’ Cache: ‘NPM’ – Nome de dependentes@V4 com Run Run: Run Run Run: ’22’ Cache: ‘NPM’ – NOME Páginas de implantação para CloudFlare Usos: Cloudflare/Wrangler-Ação@V3 com: Apitoken: $ {{Secrets.cloudflare_api_token}} AccountId: $ {{Secrets.cloudfLare_account_id}} comando: Pages Dist/Angular-CloudfLare-Memo-REMO-MEMO- Modo de tela cheia Modo de tela cheia Modo 6.2 Compromete e empurre o fluxo de trabalho # Adicione o arquivo de fluxo de trabalho Assista ao fluxo de trabalho “Importar o fluxo de trabalho do CloudFlare para as páginas de Cloudflare”, execute o painel CloudFlare Dashboard → Trabalhadores e páginas → Código do cloudflare-democorre para o status de implantação 7.2 Acesse seu aplicativo ao vivo, uma vez implantado, o seu App

Fonte