Building a website using Google Cloud Spanner with a standard HTML/CSS/JS frontend requires a small “bridge” (a backend). Since Spanner is a secure, server-side database, you cannot connect to it directly from client-side JavaScript for security reasons.
To build this, you’ll use Cloud Run to host your backend and Cloud Storage or Firebase App Hosting for your frontend.
1. Set Up the Database (Cloud Spanner)
First, you need a place for your data.
* Create Instance: In the Cloud Console, search for Spanner. Create a “Regional” instance (e.g., us-central1).
* Create Database: Inside the instance, create a database (e.g., my-website-db).
* Define Schema: Create a table. For example, a simple table for “Messages”:
CREATE TABLE Messages (
MessageId STRING(36) NOT NULL,
Content STRING(MAX),
CreatedAt TIMESTAMP,
) PRIMARY KEY (MessageId);
2. Create the Backend (Node.js API)
You need a script to talk to Spanner. Create a folder and run npm init -y and npm install @google-cloud/spanner express.
server.js
const express = require(‘express’);
const { Spanner } = require(‘@google-cloud/spanner’);
const app = express();
const spanner = new Spanner({ projectId: ‘YOUR_PROJECT_ID’ });
const instance = spanner.instance(‘YOUR_INSTANCE_ID’);
const database = instance.database(‘YOUR_DATABASE_ID’);
app.get(‘/api/data’, async (req, res) => {
const query = { sql: ‘SELECT * FROM Messages’ };
const [rows] = await database.run(query);
res.json(rows);
});
app.listen(8080, () => console.log(‘Server running on port 8080’));
3. Create the Frontend (HTML/JS)
Now, write your HTML to “fetch” that data from your backend.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Spanner Web App</title>
<style> body { font-family: sans-serif; padding: 20px; } </style>
</head>
<body>
<h1>Data from Spanner</h1>
<div id=”content”>Loading…</div>
<script>
async function loadData() {
const response = await fetch(‘/api/data’); // Points to your backend
const data = await response.json();
document.getElementById(‘content’).innerText = JSON.stringify(data);
}
loadData();
</script>
</body>
</html>
4. Deploy to Google Cloud
Since you create article and informational web pages, you want a professional deployment:
* Backend (Cloud Run): Dockerize your server.js and deploy it to Cloud Run. This gives you a URL (e.g., https://backend-api.a.run.app).
* Frontend (Cloud Storage): Upload your index.html and style.css to a Cloud Storage Bucket configured for static website hosting.
* Permissions: Ensure your Cloud Run service account has the Spanner Database User role so it can read your data.
Recommended Next Step
Since you mentioned you work with PHP as well, would you like me to show you how to connect to Spanner using a PHP backend instead of Node.js?
Discover more from NathanLegakis.com
Subscribe to get the latest posts sent to your email.
NathanLegakis.com 
Leave a comment