"Erstellen einer Cloud-nativen Website mit AWS: Vom statischen Hosting zum dynamischen Inhalt"
Ich habe vor ein paar Jahren beim Surfen auf Reddit von der Cloud Resume Challenge gehört. Als Technikbegeisterter, der aber nicht täglich in AWS arbeitet, hat mich die Herausforderung fasziniert.
Die von Forrest Brazeal ins Leben gerufene Cloud Resume Challenge ist ein mehrstufiges Projekt, bei dem eine Full-Stack-Anwendung mithilfe verschiedener AWS-Dienste erstellt wird. Es ist darauf ausgelegt, Cloud-Fähigkeiten durch praktische Umsetzung zu demonstrieren, was es auch für diejenigen von uns, die bereits in diesem Bereich tätig sind, zu einer hervorragenden Übung macht.
In diesem Blogbeitrag teile ich meine Erfahrungen beim Abschluss der Cloud Resume Challenge und beschreibe dabei detailliert die von mir genutzten AWS-Services, die von mir implementierte Architektur und die Erkenntnisse, die ich gewonnen habe. Egal, ob Sie ein Cloud-Experte sind, der seine Fähigkeiten verbessern möchte, oder jemand, der sich für reale AWS-Anwendungen interessiert, ich hoffe, dass meine Reise durch dieses Projekt für Sie von Nutzen sein wird.
Cloud-native Entwicklung nutzt die Leistungsfähigkeit des Cloud Computing, um skalierbare und belastbare Anwendungen zu erstellen. In diesem umfassenden Leitfaden führen wir Sie durch den Prozess der Erstellung einer Cloud-nativen Website mithilfe verschiedener AWS-Dienste. Wir beginnen mit dem Hosten einer statischen Website und fügen nach und nach dynamische Funktionen hinzu, einschließlich eines Besucherzählers. Dieser Artikel ist perfekt für Anfänger, die verstehen möchten, wie verschiedene AWS-Dienste zusammenarbeiten, um eine voll funktionsfähige, skalierbare Website zu erstellen.
Amazon S3 (Simple Storage Service) ist ein Objektspeicherdienst, den wir zum Hosten statischer Websites verwenden können. So richten Sie es ein:
Erstellen Sie einen S3-Bucket:
Laden Sie Ihre Website-Dateien hoch:
Bucket-Richtlinie konfigurieren:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/*"
}
]
}
Ersetzen Sie „Ihr-Bucket-Name“ durch Ihren tatsächlichen Bucket-Namen.
CloudFront ist der Content Delivery Network (CDN)-Dienst von AWS. Wir werden es verwenden, um unsere Website über HTTPS bereitzustellen und die Leistung zu verbessern:
Erstellen Sie eine CloudFront-Verteilung:
SSL/TLS-Zertifikat konfigurieren:
Origin Access Identity (OAI) einrichten:
Route 53 ist der Domain Name System (DNS)-Webdienst von AWS. Wir werden es verwenden, um unseren Domänennamen unserer CloudFront-Distribution zuzuordnen:
Erstellen Sie eine gehostete Zone:
Nameserver aktualisieren:
Datensatzsätze erstellen:
For our visitor counter, we'll use a serverless architecture with DynamoDB, Lambda, and API Gateway.
DynamoDB is a NoSQL database service. We'll use it to store our visitor count:
Lambda allows us to run code without provisioning servers. Our Lambda function will update the visitor count:
const { DynamoDBClient, UpdateItemCommand } = require('@aws-sdk/client-dynamodb');
const client = new DynamoDBClient();
exports.handler = async (event) => {
const params = {
TableName: process.env.TABLE_NAME,
Key: { id: { S: 'visitors' } },
UpdateExpression: 'ADD visitorCount :inc',
ExpressionAttributeValues: { ':inc': { N: '1' } },
ReturnValues: 'UPDATED_NEW'
};
try {
const command = new UpdateItemCommand(params);
const data = await client.send(command);
const visitorCount = data.Attributes.visitorCount.N;
return {
statusCode: 200,
headers: {
"Access-Control-Allow-Origin": "https://yourdomain.com",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Methods": "OPTIONS,POST"
},
body: JSON.stringify({ visitorCount: parseInt(visitorCount) })
};
} catch (error) {
console.error('Error:', error);
return {
statusCode: 500,
headers: {
"Access-Control-Allow-Origin": "https://yourdomain.com",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Methods": "OPTIONS,POST"
},
body: JSON.stringify({ error: 'Failed to update visitor count' })
};
}
};
Set up environment variables:
Configure permissions:
API Gateway allows us to create, publish, and manage APIs. We'll use it to expose our Lambda function:
Create a new API:
Create a resource and method:
Enable CORS:
Deploy the API:
Now, let's integrate our backend with the frontend:
<div id="visitor-count">Visitors: <span id="count">0</span></div>
function updateVisitorCount() {
fetch('https://your-api-gateway-url/visitorcount', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
mode: 'cors'
})
.then(response => response.json())
.then(data => {
document.getElementById('count').textContent = data.visitorCount;
})
.catch(error => console.error('Error:', error));
}
document.addEventListener('DOMContentLoaded', updateVisitorCount);
Replace 'https://your-api-gateway-url' with your actual API Gateway URL.
To ensure our JavaScript works correctly, we'll add some tests:
npm install --save-dev jest
// Mock fetch function
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ visitorCount: 5 }),
})
);
// Import the function to test
const { updateVisitorCount } = require('./visitorCounter');
test('updates visitor count correctly', async () => {
// Set up our document body
document.body.innerHTML = '<div id="count">0</div>';
// Call the function
await updateVisitorCount();
// Check that the count was updated
expect(document.getElementById('count').textContent).toBe('5');
});
npx jest
In this guide, we've covered how to build a cloud-native website using various AWS services. We've implemented a static website with S3, secured it with CloudFront, set up DNS with Route 53, and created a serverless backend with DynamoDB, Lambda, and API Gateway.
This architecture provides a scalable, secure, and cost-effective solution for hosting websites and web applications. As you become more comfortable with these services, you can expand on this foundation to build even more complex and feature-rich applications.
In the next article, we'll explore how to automate the deployment of this website using CI/CD practices with GitHub Actions.
Das obige ist der detaillierte Inhalt vonBlogbeitrag zur AWS Cloud Resume Challenge Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
