awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 11:44:31 +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

BIN
docs/images/integrations-cloudflare-auth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 451 KiB

BIN
docs/images/integrations-cloudflare-create.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 812 KiB

BIN
docs/images/integrations-cloudflare-credentials-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 KiB

BIN
docs/images/integrations-cloudflare-credentials-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
docs/images/integrations-cloudflare-credentials-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 294 KiB

BIN
docs/images/integrations-cloudflare-credentials-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 371 KiB

BIN
docs/images/integrations-cloudflare.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 610 KiB

4
docs/integrations/cloud/checkly.mdx
View File

@@ -31,7 +31,7 @@ Press on the Checkly tile and input your Checkly API Key to grant Infisical acce
## 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.png)
![integrations checkly](../../images/integrations-checkly.png)

44
docs/integrations/cloud/cloudflare-pages.mdx Normal file
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)

81
docs/integrations/overview.mdx
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).
| Integration | Type | Status |
| -------------------------------------------------------------- | --------- | ----------- |
| [Docker](/integrations/platforms/docker) | Platform | Available |
| [Docker-Compose](/integrations/platforms/docker-compose) | Platform | Available |
| [Kubernetes](/integrations/platforms/kubernetes) | Platform | Available |
| [Terraform](/integrations/frameworks/terraform) | Infrastructure as code | Available |
| [PM2](/integrations/platforms/pm2) | Platform | Available |
| [Heroku](/integrations/cloud/heroku) | Cloud | Available |
| [Vercel](/integrations/cloud/vercel) | Cloud | Available |
| [Netlify](/integrations/cloud/netlify) | Cloud | Available |
| [Render](/integrations/cloud/render) | Cloud | Available |
| [Railway](/integrations/cloud/railway) | Cloud | Available |
| [Fly.io](/integrations/cloud/flyio) | Cloud | Available |
| [Supabase](/integrations/cloud/supabase) | Cloud | Available |
| [Checkly](/integrations/cloud/checkly) | Cloud | Available |
| [HashiCorp Vault](/integrations/cloud/hashicorp-vault) | Cloud | Available |
| [AWS Parameter Store](/integrations/cloud/aws-parameter-store) | Cloud | Available |
| [AWS Secret Manager](/integrations/cloud/aws-secret-manager) | Cloud | Available |
| [Azure Key Vault](/integrations/cloud/azure-key-vault) | Cloud | Available |
| [GitHub Actions](/integrations/cicd/githubactions) | CI/CD | Available |
| [GitLab](/integrations/cicd/gitlab) | CI/CD | Available |
| [CircleCI](/integrations/cicd/circleci) | CI/CD | Available |
| [Travis CI](/integrations/cicd/travisci) | CI/CD | Available |
| [React](/integrations/frameworks/react) | Framework | Available |
| [Vue](/integrations/frameworks/vue) | Framework | Available |
| [Express](/integrations/frameworks/express) | Framework | Available |
| [Next.js](/integrations/frameworks/nextjs) | Framework | Available |
| [NestJS](/integrations/frameworks/nestjs) | Framework | Available |
| [SvelteKit](/integrations/frameworks/sveltekit) | Framework | Available |
| [Nuxt](/integrations/frameworks/nuxt) | Framework | Available |
| [Gatsby](/integrations/frameworks/gatsby) | Framework | Available |
| [Remix](/integrations/frameworks/remix) | Framework | Available |
| [Vite](/integrations/frameworks/vite) | Framework | Available |
| [Fiber](/integrations/frameworks/fiber) | Framework | Available |
| [Django](/integrations/frameworks/django) | Framework | Available |
| [Flask](/integrations/frameworks/flask) | Framework | Available |
| [Laravel](/integrations/frameworks/laravel) | Framework | Available |
| [Ruby on Rails](/integrations/frameworks/rails) | Framework | Available |
| GCP Secret Manager | Cloud | Coming soon |
| Jenkins | CI/CD | Coming soon |
| Integration | Type | Status |
| -------------------------------------------------------------- | ---------------------- | ----------- |
| [Docker](/integrations/platforms/docker) | Platform | Available |
| [Docker-Compose](/integrations/platforms/docker-compose) | Platform | Available |
| [Kubernetes](/integrations/platforms/kubernetes) | Platform | Available |
| [Terraform](/integrations/frameworks/terraform) | Infrastructure as code | Available |
| [PM2](/integrations/platforms/pm2) | Platform | Available |
| [Heroku](/integrations/cloud/heroku) | Cloud | Available |
| [Vercel](/integrations/cloud/vercel) | Cloud | Available |
| [Netlify](/integrations/cloud/netlify) | Cloud | Available |
| [Render](/integrations/cloud/render) | Cloud | Available |
| [Railway](/integrations/cloud/railway) | Cloud | Available |
| [Fly.io](/integrations/cloud/flyio) | Cloud | Available |
| [Supabase](/integrations/cloud/supabase) | Cloud | Available |
| [Cloudflare Pages](/integrations/cloud/cloudflare-pages) | Cloud | Available |
| [Checkly](/integrations/cloud/checkly) | Cloud | Available |
| [HashiCorp Vault](/integrations/cloud/hashicorp-vault) | Cloud | Available |
| [AWS Parameter Store](/integrations/cloud/aws-parameter-store) | Cloud | Available |
| [AWS Secret Manager](/integrations/cloud/aws-secret-manager) | Cloud | Available |
| [Azure Key Vault](/integrations/cloud/azure-key-vault) | Cloud | Available |
| [GitHub Actions](/integrations/cicd/githubactions) | CI/CD | Available |
| [GitLab](/integrations/cicd/gitlab) | CI/CD | Available |
| [CircleCI](/integrations/cicd/circleci) | CI/CD | Available |
| [Travis CI](/integrations/cicd/travisci) | CI/CD | Available |
| [React](/integrations/frameworks/react) | Framework | Available |
| [Vue](/integrations/frameworks/vue) | Framework | Available |
| [Express](/integrations/frameworks/express) | Framework | Available |
| [Next.js](/integrations/frameworks/nextjs) | Framework | Available |
| [NestJS](/integrations/frameworks/nestjs) | Framework | Available |
| [SvelteKit](/integrations/frameworks/sveltekit) | Framework | Available |
| [Nuxt](/integrations/frameworks/nuxt) | Framework | Available |
| [Gatsby](/integrations/frameworks/gatsby) | Framework | Available |
| [Remix](/integrations/frameworks/remix) | Framework | Available |
| [Vite](/integrations/frameworks/vite) | Framework | Available |
| [Fiber](/integrations/frameworks/fiber) | Framework | Available |
| [Django](/integrations/frameworks/django) | Framework | Available |
| [Flask](/integrations/frameworks/flask) | Framework | Available |
| [Laravel](/integrations/frameworks/laravel) | Framework | Available |
| [Ruby on Rails](/integrations/frameworks/rails) | Framework | Available |
| GCP Secret Manager | Cloud | Coming soon |
| Jenkins | CI/CD | Coming soon |

1
docs/mint.json
View File

@@ -196,6 +196,7 @@
"integrations/cloud/railway",
"integrations/cloud/flyio",
"integrations/cloud/supabase",
"integrations/cloud/cloudflare-pages",
"integrations/cloud/checkly",
"integrations/cloud/hashicorp-vault",
"integrations/cloud/azure-key-vault",

5
frontend/src/pages/integrations/[id].tsx
View File

@@ -220,7 +220,7 @@ export default function Integrations() {
case "hashicorp-vault":
link = `${window.location.origin}/integrations/hashicorp-vault/authorize`;
break;
case 'cloudflare-pages':
case "cloudflare-pages":
link = `${window.location.origin}/integrations/cloudflare-pages/authorize`;
break;
default:
@@ -287,8 +287,9 @@ export default function Integrations() {
case "hashicorp-vault":
link = `${window.location.origin}/integrations/hashicorp-vault/create?integrationAuthId=${integrationAuth._id}`;
break;
case 'cloudflare-pages':
case "cloudflare-pages":
link = `${window.location.origin}/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth._id}`;
break;
default:
break;
}

33
frontend/src/pages/integrations/cloudflare-pages/authorize.tsx
View File

@@ -1,39 +1,40 @@
import { useState } from "react";
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() {
const router = useRouter();
const [accessKey, setAccessKey] = useState('');
const [accessKeyErrorText, setAccessKeyErrorText] = useState('');
const [accountId, setAccountId] = useState('');
const [accountIdErrorText, setAccountIdErrorText] = useState('');
const [accessKey, setAccessKey] = useState("");
const [accessKeyErrorText, setAccessKeyErrorText] = useState("");
const [accountId, setAccountId] = useState("");
const [accountIdErrorText, setAccountIdErrorText] = useState("");
const [isLoading, setIsLoading] = useState(false);
const handleButtonClick = async () => {
try {
setAccessKeyErrorText('');
setAccountIdErrorText('');
setAccessKeyErrorText("");
setAccountIdErrorText("");
if (accessKey.length === 0 || accountId.length === 0) {
if (accessKey.length === 0) setAccessKeyErrorText('API token cannot be blank!');
if (accountId.length === 0) setAccountIdErrorText('Account ID cannot be blank!');
if (accessKey.length === 0) setAccessKeyErrorText("API token cannot be blank!");
if (accountId.length === 0) setAccountIdErrorText("Account ID cannot be blank!");
return;
}
setIsLoading(true);
const integrationAuth = await saveIntegrationAccessToken({
workspaceId: localStorage.getItem('projectData.id'),
integration: 'cloudflare-pages',
workspaceId: localStorage.getItem("projectData.id"),
integration: "cloudflare-pages",
accessId: accountId,
accessToken: accessKey,
url: null,
namespace: null
});
setAccessKey('');
setAccountId('');
setAccessKey("");
setAccountId("");
setIsLoading(false);
router.push(`/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth._id}`);
@@ -49,7 +50,7 @@ export default function CloudflarePagesIntegrationPage() {
<FormControl
label="Cloudflare Pages API token"
errorText={accessKeyErrorText}
isError={accessKeyErrorText !== '' ?? false}
isError={accessKeyErrorText !== "" ?? false}
className="mx-6"
>
<Input
@@ -61,7 +62,7 @@ export default function CloudflarePagesIntegrationPage() {
<FormControl
label="Cloudflare Pages Account ID"
errorText={accountIdErrorText}
isError={accountIdErrorText !== '' ?? false}
isError={accountIdErrorText !== "" ?? false}
className="mx-6"
>
<Input

37
frontend/src/pages/integrations/cloudflare-pages/create.tsx
View File

@@ -1,30 +1,31 @@
import { useState, useEffect } from "react";
import { useEffect,useState } from "react";
import { useRouter } from "next/router";
import { useGetWorkspaceById } from "~/hooks/api";
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 = [
{ name: 'Production', slug: 'production' },
{ name: 'Preview', slug: 'preview' }
{ name: "Production", slug: "production" },
{ name: "Preview", slug: "preview" }
];
export default function CloudflarePagesIntegrationPage() {
const router = useRouter();
const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? '');
const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
const { data: integrationAuthApps } = useGetIntegrationAuthApps({
integrationAuthId: (integrationAuthId as string) ?? ''
integrationAuthId: (integrationAuthId as string) ?? ""
});
const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
const [targetApp, setTargetApp] = useState('');
const [targetAppId, setTargetAppId] = useState('');
const [targetEnvironment, setTargetEnvironment] = useState('');
const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
const [targetApp, setTargetApp] = useState("");
const [targetAppId, setTargetAppId] = useState("");
const [targetEnvironment, setTargetEnvironment] = useState("");
const [isLoading, setIsLoading] = useState(false);
@@ -41,7 +42,7 @@ export default function CloudflarePagesIntegrationPage() {
setTargetAppId(String(integrationAuthApps[0].appId));
setTargetEnvironment(cloudflareEnvironments[0].slug);
} else {
setTargetApp('none');
setTargetApp("none");
setTargetEnvironment(cloudflareEnvironments[0].slug);
}
}
@@ -66,12 +67,12 @@ export default function CloudflarePagesIntegrationPage() {
owner: null,
path: null,
region: null,
secretPath: '/',
secretPath: "/",
});
setIsLoading(false);
router.push(`/integrations/${localStorage.getItem('projectData.id')}`);
router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
} catch(err) {
console.error(err);
}