mirror of
https://github.com/databasus/databasus.git
synced 2026-04-06 00:32:03 +02:00
462 lines
18 KiB
HTML
462 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- Minified TailwindCSS -->
|
|
<link rel="stylesheet" href="styles.min.css" />
|
|
|
|
<!-- Primary Meta Tags -->
|
|
<title>How to connect Google Drive to Postgresus | Postgresus</title>
|
|
<meta name="title" content="How to connect Google Drive to Postgresus | Postgresus" />
|
|
<meta
|
|
name="description"
|
|
content="Step-by-step guide to configure Google Drive storage for PostgreSQL backups with Postgresus. Learn how to set up Google Cloud project and OAuth."
|
|
/>
|
|
<meta
|
|
name="keywords"
|
|
content="Postgresus, Google Drive, PostgreSQL backup, Google Cloud, OAuth, cloud storage, database backup"
|
|
/>
|
|
<link rel="canonical" href="https://postgresus.com/google-drive-storage" />
|
|
|
|
<!-- Favicons -->
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
|
<link rel="apple-touch-icon" href="favicon.svg" />
|
|
<link rel="shortcut icon" href="favicon.ico" />
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<link rel="stylesheet" href="index.css" />
|
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GE01THYR9X"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag() {
|
|
dataLayer.push(arguments);
|
|
}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-GE01THYR9X');
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<!------------------ NAVBAR ------------------------->
|
|
<nav
|
|
class="fixed left-0 right-0 top-0 z-50 flex h-[60px] justify-center bg-white px-4 sm:h-[70px] md:h-[80px]"
|
|
>
|
|
<div
|
|
class="flex w-[320px] min-w-0 max-w-[320px] grow items-center border-b sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
|
>
|
|
<a href="/" class="flex items-center">
|
|
<img
|
|
src="logo.svg"
|
|
loading="eager"
|
|
alt="Postgresus logo"
|
|
width="35"
|
|
height="35"
|
|
class="flex-shrink-0 sm:h-[40px] sm:w-[40px] md:h-[50px] md:w-[50px]"
|
|
/>
|
|
|
|
<div class="ml-2 text-lg font-bold sm:ml-3 sm:text-xl md:ml-4 md:text-2xl">
|
|
Postgresus
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<!------------------ END OF NAVBAR ------------------>
|
|
|
|
<!------------------ MAIN CONTENT ------------------------->
|
|
<div class="flex justify-center py-[50px] pt-[110px] md:py-[100px] md:pt-[180px]">
|
|
<main
|
|
class="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
|
>
|
|
<div class="max-w-[800px]">
|
|
<h1 class="mb-6 text-2xl font-bold sm:text-4xl">
|
|
How to connect Google Drive to Postgresus?
|
|
</h1>
|
|
|
|
<p class="mb-8 max-w-[500px] text-lg text-gray-700">
|
|
To keep your backups in Google Drive you need:
|
|
</p>
|
|
|
|
<div class="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div class="rounded-lg bg-blue-50 p-4">
|
|
<h3 class="mb-2 font-semibold text-blue-800">Step 1</h3>
|
|
<p class="text-blue-700">
|
|
Create Google Cloud project so you can access Google Drive API
|
|
</p>
|
|
</div>
|
|
<div class="rounded-lg bg-blue-50 p-4">
|
|
<h3 class="mb-2 font-semibold text-blue-800">Step 2</h3>
|
|
<p class="text-blue-700">Sign in via your Google Account</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-8">
|
|
<!-- How to create Google Cloud project -->
|
|
<div class="pl-6">
|
|
<h2 class="mb-4 text-2xl font-semibold">How to create Google Cloud project?</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Step 1 -->
|
|
<div class="border-l-4 border-blue-500 pl-6">
|
|
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
|
<span
|
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
|
>1</span
|
|
>
|
|
Create new project
|
|
</h3>
|
|
<div class="space-y-2">
|
|
<p class="text-gray-700">
|
|
Go to
|
|
<a
|
|
href="https://console.cloud.google.com/"
|
|
target="_blank"
|
|
class="text-blue-600 underline hover:text-blue-800"
|
|
>https://console.cloud.google.com/</a
|
|
>
|
|
</p>
|
|
<p class="text-gray-700">Choose <strong>"new project"</strong> (top left)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="border-l-4 border-blue-500 pl-6">
|
|
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
|
<span
|
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
|
>2</span
|
|
>
|
|
Enable Google Drive API
|
|
</h3>
|
|
<div class="space-y-2">
|
|
<p class="text-gray-700">
|
|
Go to <strong>"API & Services"</strong> tab, then to
|
|
<strong>"API library"</strong>
|
|
</p>
|
|
<p class="pb-10 text-gray-700">
|
|
Choose <strong>Google Drive API</strong> and enable it:
|
|
</p>
|
|
</div>
|
|
|
|
<img
|
|
src="images/google-drive-storage/image-1.webp"
|
|
alt="Step 2"
|
|
class="mb-8 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="border-l-4 border-blue-500 pl-6">
|
|
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
|
<span
|
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
|
>3</span
|
|
>
|
|
Configure consent screen
|
|
</h3>
|
|
<p class="pb-10 text-gray-700">
|
|
Go to <strong>"Credentials"</strong> → <strong>"Create credentials"</strong> →
|
|
<strong>"Configure consent screen"</strong> and fill any data there:
|
|
</p>
|
|
|
|
<img
|
|
src="images/google-drive-storage/image-2.webp"
|
|
alt="Step 3"
|
|
class="mb-8 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="border-l-4 border-blue-500 pl-6">
|
|
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
|
<span
|
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
|
>4</span
|
|
>
|
|
Create OAuth client ID
|
|
</h3>
|
|
<p class="pb-10 text-gray-700">
|
|
Go to <strong>"Credentials"</strong> → <strong>"Create credentials"</strong> →
|
|
<strong>"OAuth client ID"</strong>:
|
|
</p>
|
|
|
|
<img
|
|
src="images/google-drive-storage/image-3.webp"
|
|
alt="Step 4"
|
|
class="mb-8 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Step 5 -->
|
|
<div class="border-l-4 border-blue-500 pl-6">
|
|
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
|
<span
|
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
|
>5</span
|
|
>
|
|
Configure application settings
|
|
</h3>
|
|
<p class="mb-4 text-gray-700">Fill the following data:</p>
|
|
<div class="space-y-2">
|
|
<div class="rounded-lg bg-gray-100 p-3">
|
|
<p class="text-sm"><strong>Application type:</strong> Web application</p>
|
|
</div>
|
|
<div class="rounded-lg bg-gray-100 p-3">
|
|
<p class="text-sm">
|
|
<strong>Authorized JavaScript origins:</strong>
|
|
<code class="rounded bg-gray-200 px-2 py-1 text-sm"
|
|
>https://postgresus.com</code
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="rounded-lg bg-gray-100 p-3">
|
|
<p class="text-sm">
|
|
<strong>Authorized redirect URIs:</strong>
|
|
<code class="rounded bg-gray-200 px-2 py-1 text-sm"
|
|
>https://postgresus.com/storages/google-oauth</code
|
|
>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-3 text-gray-700">And copy credentials</div>
|
|
</div>
|
|
|
|
<div class="pb-10"></div>
|
|
|
|
<img
|
|
src="images/google-drive-storage/image-4.webp"
|
|
alt="Step 5 - 1"
|
|
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
|
loading="lazy"
|
|
/>
|
|
|
|
<img
|
|
src="images/google-drive-storage/image-5.png"
|
|
alt="Step 5 - 2"
|
|
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Step 6 -->
|
|
<div class="border-l-4 border-blue-500 pl-6">
|
|
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
|
<span
|
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
|
>6</span
|
|
>
|
|
Add scope
|
|
</h3>
|
|
|
|
<p class="pb-5 text-gray-700">
|
|
Go to <strong>"Data Access"</strong> and add scope
|
|
<code class="rounded bg-gray-100 px-2 py-1 text-sm">"/auth/drive.file"</code>
|
|
</p>
|
|
|
|
<img
|
|
src="images/google-drive-storage/image-6.png"
|
|
alt="Step 6"
|
|
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Step 7 -->
|
|
<div class="border-l-4 border-blue-500 pl-6">
|
|
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
|
<span
|
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
|
>7</span
|
|
>
|
|
Publish the app
|
|
</h3>
|
|
<p class="pb-10 text-gray-700">
|
|
Go to <strong>"Audience"</strong> and publish an app
|
|
</p>
|
|
|
|
<img
|
|
src="images/google-drive-storage/image-7.png"
|
|
alt="Step 7"
|
|
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sign in via Google Account -->
|
|
<div class="pl-6">
|
|
<h2 class="mb-4 text-2xl font-semibold">Sign in via your Google Account</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Step 1 -->
|
|
<div class="border-l-4 border-green-500 pl-6">
|
|
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
|
<span
|
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white"
|
|
>1</span
|
|
>
|
|
Fill credentials data
|
|
</h3>
|
|
|
|
<p class="pb-10 text-gray-700">Fill data from the previous step:</p>
|
|
|
|
<img
|
|
src="images/google-drive-storage/image-8.png"
|
|
alt="Step 1"
|
|
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="border-l-4 border-green-500 pl-6">
|
|
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
|
<span
|
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white"
|
|
>2</span
|
|
>
|
|
Choose your account
|
|
</h3>
|
|
<p class="text-gray-700">Choose your account to sign in</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="border-l-4 border-green-500 pl-6">
|
|
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
|
<span
|
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white"
|
|
>3</span
|
|
>
|
|
Handle security warning
|
|
</h3>
|
|
<div class="space-y-2">
|
|
<p class="text-gray-700">
|
|
If you see a warning, click <strong>"Advanced"</strong> (left bottom corner)
|
|
and choose <strong>"Proceed anyway"</strong>
|
|
</p>
|
|
<div class="rounded-lg bg-yellow-50 p-4">
|
|
<p class="text-sm text-yellow-800">
|
|
⚠️ This warning appears because your app is not yet verified by Google. It's
|
|
safe to proceed for your own application.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Final Step -->
|
|
<div class="max-w-[500px] rounded-lg border border-green-200 bg-green-50 p-6">
|
|
<h2 class="mb-3 text-xl font-semibold text-green-800">🎉 Setup Complete!</h2>
|
|
<p class="text-green-700">
|
|
Your Google Drive is now connected to Postgresus and ready to store your PostgreSQL
|
|
backups securely in the cloud.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="mt-12 border-t border-gray-200 pt-8">
|
|
<a
|
|
href="/"
|
|
class="inline-flex items-center font-semibold text-blue-600 hover:text-blue-800"
|
|
>
|
|
← Back to main page
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<!------------------ END OF MAIN CONTENT ------------------>
|
|
|
|
<!------------------ FOOTER SECTION -------------------------------->
|
|
<div id="footer" class="flex justify-center bg-blue-600 py-[50px] md:py-[50px]">
|
|
<div
|
|
class="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
|
>
|
|
<div class="flex flex-col items-center space-y-4">
|
|
<div class="flex flex-wrap justify-center gap-6 text-white">
|
|
<a
|
|
href="https://github.com/RostislavDugin/postgresus"
|
|
target="_blank"
|
|
class="transition-colors hover:text-blue-200"
|
|
>
|
|
GitHub
|
|
</a>
|
|
|
|
<a
|
|
href="https://t.me/postgresus_community"
|
|
target="_blank"
|
|
class="transition-colors hover:text-blue-200"
|
|
>
|
|
Community
|
|
</a>
|
|
|
|
<a
|
|
href="https://rostislav-dugin.com"
|
|
target="_blank"
|
|
class="transition-colors hover:text-blue-200"
|
|
>
|
|
Developer
|
|
</a>
|
|
</div>
|
|
<p class="text-center text-sm text-white">© 2025 Postgresus. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!------------------ END OF FOOTER SECTION ------------------------->
|
|
|
|
<!-- Yandex.Metrika counter -->
|
|
<script type="text/javascript">
|
|
(function (m, e, t, r, i, k, a) {
|
|
m[i] =
|
|
m[i] ||
|
|
function () {
|
|
(m[i].a = m[i].a || []).push(arguments);
|
|
};
|
|
m[i].l = 1 * new Date();
|
|
for (var j = 0; j < document.scripts.length; j++) {
|
|
if (document.scripts[j].src === r) {
|
|
return;
|
|
}
|
|
}
|
|
((k = e.createElement(t)),
|
|
(a = e.getElementsByTagName(t)[0]),
|
|
(k.async = 1),
|
|
(k.src = r),
|
|
a.parentNode.insertBefore(k, a));
|
|
})(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js?id=103482608', 'ym');
|
|
|
|
ym(103482608, 'init', {
|
|
ssr: true,
|
|
clickmap: true,
|
|
ecommerce: 'dataLayer',
|
|
accurateTrackBounce: true,
|
|
trackLinks: true,
|
|
});
|
|
</script>
|
|
<noscript
|
|
><div>
|
|
<img
|
|
src="https://mc.yandex.ru/watch/103482608"
|
|
style="position: absolute; left: -9999px"
|
|
alt=""
|
|
/></div
|
|
></noscript>
|
|
<!-- /Yandex.Metrika counter -->
|
|
</body>
|
|
</html>
|