awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-05 16:26:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add docs for Cloudflare Pages integration

Browse Source
This commit is contained in:
Tuan Dang
2023-06-21 13:05:35 +07:00
parent 6300f86cc4
commit a18a86770e
14 changed files with 127 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/images/integrations-cloudflare-auth.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 451 KiB

docs/images/integrations-cloudflare-create.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 812 KiB

docs/images/integrations-cloudflare-credentials-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 KiB

docs/images/integrations-cloudflare-credentials-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

docs/images/integrations-cloudflare-credentials-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 294 KiB

docs/images/integrations-cloudflare-credentials-4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 371 KiB

docs/images/integrations-cloudflare.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 610 KiB

docs/integrations/cloud/checkly.mdx
+1 -1
View File
@@ -31,7 +31,7 @@ Press on the Checkly tile and input your Checkly API Key to grant Infisical acce
## Start integration ## Start integration
Select which Infisical environment secrets you want to sync to Checkly press create integration to start syncing secrets. Select which Infisical environment secrets you want to sync to Checkly and press create integration to start syncing secrets.
![integrations checkly](../../images/integrations-checkly-create.png) ![integrations checkly](../../images/integrations-checkly-create.png)
![integrations checkly](../../images/integrations-checkly.png) ![integrations checkly](../../images/integrations-checkly.png)
docs/integrations/cloud/cloudflare-pages.mdx
+44
View File
@@ -0,0 +1,44 @@
---
title: "Cloudflare Pages"
description: "How to sync secrets from Infisical to Cloudflare Pages"
---
Prerequisites:
- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
## Navigate to your project's integrations tab
![integrations](../../images/integrations.png)
## Authorize Infisical for Cloudflare Pages
Obtain a Cloudflare [API token](https://dash.cloudflare.com/profile/api-tokens) and [Account ID](https://developers.cloudflare.com/fundamentals/get-started/basic-tasks/find-account-and-zone-ids/):
1. Create a new [API token](https://dash.cloudflare.com/profile/api-tokens) in My Profile > API Tokens
![integrations cloudflare credentials 1](../../images/integrations-cloudflare-credentials-1.png)
![integrations cloudflare credentials 2](../../images/integrations-cloudflare-credentials-2.png)
![integrations cloudflare credentials 3](../../images/integrations-cloudflare-credentials-3.png)
2. Copy your [Account ID](https://developers.cloudflare.com/fundamentals/get-started/basic-tasks/find-account-and-zone-ids/) from Account > Workers & Pages > Overview
![integrations cloudflare credentials 4](../../images/integrations-cloudflare-credentials-4.png)
Press on the Cloudflare Pages tile and input your Cloudflare API token and account ID to grant Infisical access to your Cloudflare Pages.
![integrations cloudflare authorization](../../images/integrations-cloudflare-auth.png)
<Info>
If this is your project's first cloud integration, then you'll have to grant
Infisical access to your project's environment variables. Although this step
breaks E2EE, it's necessary for Infisical to sync the environment variables to
the cloud platform.
</Info>
## Start integration
Select which Infisical environment secrets you want to sync to Cloudflare and press create integration to start syncing secrets.
![integrations cloudflare](../../images/integrations-cloudflare-create.png)
![integrations cloudflare](../../images/integrations-cloudflare.png)
docs/integrations/overview.mdx
+41 -40
View File
@@ -7,43 +7,44 @@ Integrations allow environment variables to be synced from Infisical into your l
Missing an integration? [Throw in a request](https://github.com/Infisical/infisical/issues). Missing an integration? [Throw in a request](https://github.com/Infisical/infisical/issues).
| Integration | Type | Status | | Integration | Type | Status |
| -------------------------------------------------------------- | --------- | ----------- | | -------------------------------------------------------------- | ---------------------- | ----------- |
| [Docker](/integrations/platforms/docker) | Platform | Available | | [Docker](/integrations/platforms/docker) | Platform | Available |
| [Docker-Compose](/integrations/platforms/docker-compose) | Platform | Available | | [Docker-Compose](/integrations/platforms/docker-compose) | Platform | Available |
| [Kubernetes](/integrations/platforms/kubernetes) | Platform | Available | | [Kubernetes](/integrations/platforms/kubernetes) | Platform | Available |
| [Terraform](/integrations/frameworks/terraform) | Infrastructure as code | Available | | [Terraform](/integrations/frameworks/terraform) | Infrastructure as code | Available |
| [PM2](/integrations/platforms/pm2) | Platform | Available | | [PM2](/integrations/platforms/pm2) | Platform | Available |
| [Heroku](/integrations/cloud/heroku) | Cloud | Available | | [Heroku](/integrations/cloud/heroku) | Cloud | Available |
| [Vercel](/integrations/cloud/vercel) | Cloud | Available | | [Vercel](/integrations/cloud/vercel) | Cloud | Available |
| [Netlify](/integrations/cloud/netlify) | Cloud | Available | | [Netlify](/integrations/cloud/netlify) | Cloud | Available |
| [Render](/integrations/cloud/render) | Cloud | Available | | [Render](/integrations/cloud/render) | Cloud | Available |
| [Railway](/integrations/cloud/railway) | Cloud | Available | | [Railway](/integrations/cloud/railway) | Cloud | Available |
| [Fly.io](/integrations/cloud/flyio) | Cloud | Available | | [Fly.io](/integrations/cloud/flyio) | Cloud | Available |
| [Supabase](/integrations/cloud/supabase) | Cloud | Available | | [Supabase](/integrations/cloud/supabase) | Cloud | Available |
| [Checkly](/integrations/cloud/checkly) | Cloud | Available | | [Cloudflare Pages](/integrations/cloud/cloudflare-pages) | Cloud | Available |
| [HashiCorp Vault](/integrations/cloud/hashicorp-vault) | Cloud | Available | | [Checkly](/integrations/cloud/checkly) | Cloud | Available |
| [AWS Parameter Store](/integrations/cloud/aws-parameter-store) | Cloud | Available | | [HashiCorp Vault](/integrations/cloud/hashicorp-vault) | Cloud | Available |
| [AWS Secret Manager](/integrations/cloud/aws-secret-manager) | Cloud | Available | | [AWS Parameter Store](/integrations/cloud/aws-parameter-store) | Cloud | Available |
| [Azure Key Vault](/integrations/cloud/azure-key-vault) | Cloud | Available | | [AWS Secret Manager](/integrations/cloud/aws-secret-manager) | Cloud | Available |
| [GitHub Actions](/integrations/cicd/githubactions) | CI/CD | Available | | [Azure Key Vault](/integrations/cloud/azure-key-vault) | Cloud | Available |
| [GitLab](/integrations/cicd/gitlab) | CI/CD | Available | | [GitHub Actions](/integrations/cicd/githubactions) | CI/CD | Available |
| [CircleCI](/integrations/cicd/circleci) | CI/CD | Available | | [GitLab](/integrations/cicd/gitlab) | CI/CD | Available |
| [Travis CI](/integrations/cicd/travisci) | CI/CD | Available | | [CircleCI](/integrations/cicd/circleci) | CI/CD | Available |
| [React](/integrations/frameworks/react) | Framework | Available | | [Travis CI](/integrations/cicd/travisci) | CI/CD | Available |
| [Vue](/integrations/frameworks/vue) | Framework | Available | | [React](/integrations/frameworks/react) | Framework | Available |
| [Express](/integrations/frameworks/express) | Framework | Available | | [Vue](/integrations/frameworks/vue) | Framework | Available |
| [Next.js](/integrations/frameworks/nextjs) | Framework | Available | | [Express](/integrations/frameworks/express) | Framework | Available |
| [NestJS](/integrations/frameworks/nestjs) | Framework | Available | | [Next.js](/integrations/frameworks/nextjs) | Framework | Available |
| [SvelteKit](/integrations/frameworks/sveltekit) | Framework | Available | | [NestJS](/integrations/frameworks/nestjs) | Framework | Available |
| [Nuxt](/integrations/frameworks/nuxt) | Framework | Available | | [SvelteKit](/integrations/frameworks/sveltekit) | Framework | Available |
| [Gatsby](/integrations/frameworks/gatsby) | Framework | Available | | [Nuxt](/integrations/frameworks/nuxt) | Framework | Available |
| [Remix](/integrations/frameworks/remix) | Framework | Available | | [Gatsby](/integrations/frameworks/gatsby) | Framework | Available |
| [Vite](/integrations/frameworks/vite) | Framework | Available | | [Remix](/integrations/frameworks/remix) | Framework | Available |
| [Fiber](/integrations/frameworks/fiber) | Framework | Available | | [Vite](/integrations/frameworks/vite) | Framework | Available |
| [Django](/integrations/frameworks/django) | Framework | Available | | [Fiber](/integrations/frameworks/fiber) | Framework | Available |
| [Flask](/integrations/frameworks/flask) | Framework | Available | | [Django](/integrations/frameworks/django) | Framework | Available |
| [Laravel](/integrations/frameworks/laravel) | Framework | Available | | [Flask](/integrations/frameworks/flask) | Framework | Available |
| [Ruby on Rails](/integrations/frameworks/rails) | Framework | Available | | [Laravel](/integrations/frameworks/laravel) | Framework | Available |
| GCP Secret Manager | Cloud | Coming soon | | [Ruby on Rails](/integrations/frameworks/rails) | Framework | Available |
| Jenkins | CI/CD | Coming soon | | GCP Secret Manager | Cloud | Coming soon |
| Jenkins | CI/CD | Coming soon |
docs/mint.json
+1
View File
@@ -196,6 +196,7 @@
"integrations/cloud/railway", "integrations/cloud/railway",
"integrations/cloud/flyio", "integrations/cloud/flyio",
"integrations/cloud/supabase", "integrations/cloud/supabase",
"integrations/cloud/cloudflare-pages",
"integrations/cloud/checkly", "integrations/cloud/checkly",
"integrations/cloud/hashicorp-vault", "integrations/cloud/hashicorp-vault",
"integrations/cloud/azure-key-vault", "integrations/cloud/azure-key-vault",
frontend/src/pages/integrations/[id].tsx
+3 -2
View File
@@ -220,7 +220,7 @@ export default function Integrations() {
case "hashicorp-vault": case "hashicorp-vault":
link = `${window.location.origin}/integrations/hashicorp-vault/authorize`; link = `${window.location.origin}/integrations/hashicorp-vault/authorize`;
break; break;
case 'cloudflare-pages': case "cloudflare-pages":
link = `${window.location.origin}/integrations/cloudflare-pages/authorize`; link = `${window.location.origin}/integrations/cloudflare-pages/authorize`;
break; break;
default: default:
@@ -287,8 +287,9 @@ export default function Integrations() {
case "hashicorp-vault": case "hashicorp-vault":
link = `${window.location.origin}/integrations/hashicorp-vault/create?integrationAuthId=${integrationAuth._id}`; link = `${window.location.origin}/integrations/hashicorp-vault/create?integrationAuthId=${integrationAuth._id}`;
break; break;
case 'cloudflare-pages': case "cloudflare-pages":
link = `${window.location.origin}/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth._id}`; link = `${window.location.origin}/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth._id}`;
break;
default: default:
break; break;
} }
frontend/src/pages/integrations/cloudflare-pages/authorize.tsx
+17 -16
View File
@@ -1,39 +1,40 @@
import { useState } from "react"; import { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Card, CardTitle, FormControl, Input, Button } from "../../../components/v2";
import saveIntegrationAccessToken from "~/pages/api/integrations/saveIntegrationAccessToken"; import { Button,Card, CardTitle, FormControl, Input } from "../../../components/v2";
import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
export default function CloudflarePagesIntegrationPage() { export default function CloudflarePagesIntegrationPage() {
const router = useRouter(); const router = useRouter();
const [accessKey, setAccessKey] = useState(''); const [accessKey, setAccessKey] = useState("");
const [accessKeyErrorText, setAccessKeyErrorText] = useState(''); const [accessKeyErrorText, setAccessKeyErrorText] = useState("");
const [accountId, setAccountId] = useState(''); const [accountId, setAccountId] = useState("");
const [accountIdErrorText, setAccountIdErrorText] = useState(''); const [accountIdErrorText, setAccountIdErrorText] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const handleButtonClick = async () => { const handleButtonClick = async () => {
try { try {
setAccessKeyErrorText(''); setAccessKeyErrorText("");
setAccountIdErrorText(''); setAccountIdErrorText("");
if (accessKey.length === 0 || accountId.length === 0) { if (accessKey.length === 0 || accountId.length === 0) {
if (accessKey.length === 0) setAccessKeyErrorText('API token cannot be blank!'); if (accessKey.length === 0) setAccessKeyErrorText("API token cannot be blank!");
if (accountId.length === 0) setAccountIdErrorText('Account ID cannot be blank!'); if (accountId.length === 0) setAccountIdErrorText("Account ID cannot be blank!");
return; return;
} }
setIsLoading(true); setIsLoading(true);
const integrationAuth = await saveIntegrationAccessToken({ const integrationAuth = await saveIntegrationAccessToken({
workspaceId: localStorage.getItem('projectData.id'), workspaceId: localStorage.getItem("projectData.id"),
integration: 'cloudflare-pages', integration: "cloudflare-pages",
accessId: accountId, accessId: accountId,
accessToken: accessKey, accessToken: accessKey,
url: null, url: null,
namespace: null namespace: null
}); });
setAccessKey(''); setAccessKey("");
setAccountId(''); setAccountId("");
setIsLoading(false); setIsLoading(false);
router.push(`/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth._id}`); router.push(`/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth._id}`);
@@ -49,7 +50,7 @@ export default function CloudflarePagesIntegrationPage() {
<FormControl <FormControl
label="Cloudflare Pages API token" label="Cloudflare Pages API token"
errorText={accessKeyErrorText} errorText={accessKeyErrorText}
isError={accessKeyErrorText !== '' ?? false} isError={accessKeyErrorText !== "" ?? false}
className="mx-6" className="mx-6"
> >
<Input <Input
@@ -61,7 +62,7 @@ export default function CloudflarePagesIntegrationPage() {
<FormControl <FormControl
label="Cloudflare Pages Account ID" label="Cloudflare Pages Account ID"
errorText={accountIdErrorText} errorText={accountIdErrorText}
isError={accountIdErrorText !== '' ?? false} isError={accountIdErrorText !== "" ?? false}
className="mx-6" className="mx-6"
> >
<Input <Input
frontend/src/pages/integrations/cloudflare-pages/create.tsx
+19 -18
View File
@@ -1,30 +1,31 @@
import { useState, useEffect } from "react"; import { useEffect,useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useGetWorkspaceById } from "~/hooks/api";
import queryString from "query-string"; import queryString from "query-string";
import { useGetIntegrationAuthApps, useGetIntegrationAuthById } from "~/hooks/api/integrationAuth";
import createIntegration from "~/pages/api/integrations/createIntegration"; import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "../../../components/v2";
import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "~/components/v2"; import { useGetWorkspaceById } from "../../../hooks/api";
import { useGetIntegrationAuthApps, useGetIntegrationAuthById } from "../../../hooks/api/integrationAuth";
import createIntegration from "../../api/integrations/createIntegration";
const cloudflareEnvironments = [ const cloudflareEnvironments = [
{ name: 'Production', slug: 'production' }, { name: "Production", slug: "production" },
{ name: 'Preview', slug: 'preview' } { name: "Preview", slug: "preview" }
]; ];
export default function CloudflarePagesIntegrationPage() { export default function CloudflarePagesIntegrationPage() {
const router = useRouter(); const router = useRouter();
const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]); const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? ''); const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? ''); const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
const { data: integrationAuthApps } = useGetIntegrationAuthApps({ const { data: integrationAuthApps } = useGetIntegrationAuthApps({
integrationAuthId: (integrationAuthId as string) ?? '' integrationAuthId: (integrationAuthId as string) ?? ""
}); });
const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState(''); const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
const [targetApp, setTargetApp] = useState(''); const [targetApp, setTargetApp] = useState("");
const [targetAppId, setTargetAppId] = useState(''); const [targetAppId, setTargetAppId] = useState("");
const [targetEnvironment, setTargetEnvironment] = useState(''); const [targetEnvironment, setTargetEnvironment] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@@ -41,7 +42,7 @@ export default function CloudflarePagesIntegrationPage() {
setTargetAppId(String(integrationAuthApps[0].appId)); setTargetAppId(String(integrationAuthApps[0].appId));
setTargetEnvironment(cloudflareEnvironments[0].slug); setTargetEnvironment(cloudflareEnvironments[0].slug);
} else { } else {
setTargetApp('none'); setTargetApp("none");
setTargetEnvironment(cloudflareEnvironments[0].slug); setTargetEnvironment(cloudflareEnvironments[0].slug);
} }
} }
@@ -66,12 +67,12 @@ export default function CloudflarePagesIntegrationPage() {
owner: null, owner: null,
path: null, path: null,
region: null, region: null,
secretPath: '/', secretPath: "/",
}); });
setIsLoading(false); setIsLoading(false);
router.push(`/integrations/${localStorage.getItem('projectData.id')}`); router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
} catch(err) { } catch(err) {
console.error(err); console.error(err);
} }