Blogbeitrag zur AWS Cloud Resume Challenge Teil 1

"Erstellen einer Cloud-nativen Website mit AWS: Vom statischen Hosting zum dynamischen Inhalt"

1. Einführung
2. Einrichten einer statischen Website mit S3
3. Sicherung der Website mit CloudFront
4. DNS mit Route 53 konfigurieren
5. Implementierung eines Besucherzählers
   • DynamoDB zur Datenspeicherung
   • Lambda für Backend-Logik
   • API-Gateway für HTTP-Endpunkte
6. Frontend-JavaScript-Integration
7. Testen des JavaScript-Codes
8. Fazit

---

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.

Inhaltsverzeichnis

1. Einführung
2. Einrichten einer statischen Website mit S3
3. Sicherung der Website mit CloudFront
4. DNS mit Route 53 konfigurieren
5. Implementierung eines Besucherzählers
6. Frontend-JavaScript-Integration
7. Testen des JavaScript-Codes
8. Fazit

Einführung

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.

Einrichten einer statischen Website mit S3

Amazon S3 (Simple Storage Service) ist ein Objektspeicherdienst, den wir zum Hosten statischer Websites verwenden können. So richten Sie es ein:

1. Erstellen Sie einen S3-Bucket:

   • Gehen Sie zur AWS-Managementkonsole und navigieren Sie zu S3.
   • Klicken Sie auf „Bucket erstellen“ und wählen Sie einen weltweit eindeutigen Namen.
   • Aktivieren Sie in den Bucket-Einstellungen „Statisches Website-Hosting“.
   • Setzen Sie das Indexdokument auf „index.html“.

2. Laden Sie Ihre Website-Dateien hoch:

   • Laden Sie Ihre HTML-, CSS- und JavaScript-Dateien in den Bucket hoch.
   • Stellen Sie sicher, dass die Dateien über öffentliche Leseberechtigungen verfügen.

3. Bucket-Richtlinie konfigurieren:

   • Fügen Sie in den Bucket-Berechtigungen eine Bucket-Richtlinie hinzu, um öffentlichen Lesezugriff zu ermöglichen:

   {
       "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.

Sichern der Website mit CloudFront

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:

1. Erstellen Sie eine CloudFront-Verteilung:

   • Gehen Sie in der AWS-Konsole zu CloudFront und klicken Sie auf „Verteilung erstellen“.
   • Legen Sie die Ursprungsdomäne auf den Website-Endpunkt Ihres S3-Buckets fest.
   • Aktivieren Sie „HTTP zu HTTPS umleiten“.

2. SSL/TLS-Zertifikat konfigurieren:

   • Verwenden Sie AWS Certificate Manager (ACM), um ein kostenloses SSL/TLS-Zertifikat für Ihre Domain zu erstellen.
   • Wählen Sie in Ihren CloudFront-Verteilungseinstellungen dieses Zertifikat aus.

3. Origin Access Identity (OAI) einrichten:

   • Erstellen Sie eine OAI und verknüpfen Sie sie mit Ihrer Distribution.
   • Aktualisieren Sie Ihre S3-Bucket-Richtlinie, um nur den Zugriff von dieser OAI aus zuzulassen.

Konfigurieren von DNS mit Route 53

Route 53 ist der Domain Name System (DNS)-Webdienst von AWS. Wir werden es verwenden, um unseren Domänennamen unserer CloudFront-Distribution zuzuordnen:

1. Erstellen Sie eine gehostete Zone:

   • Erstellen Sie in Route 53 eine gehostete Zone für Ihre Domain.

2. Nameserver aktualisieren:

   • Wenn Ihre Domain anderswo registriert ist, aktualisieren Sie die Nameserver bei Ihrem Registrar, um die Nameserver von Route 53 zu verwenden.

3. Datensatzsätze erstellen:

   • Create an A record for your domain, aliasing it to your CloudFront distribution.
   • If needed, create a CNAME record for www subdomain.

Implementing a Visitor Counter

For our visitor counter, we'll use a serverless architecture with DynamoDB, Lambda, and API Gateway.

DynamoDB for Data Storage

DynamoDB is a NoSQL database service. We'll use it to store our visitor count:

1. Create a DynamoDB table:
   • Name: "VisitorCount"
   • Partition key: "id" (String)
   • Add an item with id "visitors" and an attribute "count" set to 0.

Lambda for Backend Logic

Lambda allows us to run code without provisioning servers. Our Lambda function will update the visitor count:

1. Create a Lambda function:
   • Runtime: Node.js 20.x
   • Code:

   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' })
           };
       }
   };

1. Set up environment variables:

   • Add TABLE_NAME environment variable with your DynamoDB table name.

2. Configure permissions:

   • Give the Lambda function permission to read/write to your DynamoDB table.

API Gateway for HTTP Endpoints

API Gateway allows us to create, publish, and manage APIs. We'll use it to expose our Lambda function:

1. Create a new API:

   • Choose HTTP API type.

2. Create a resource and method:

   • Create a resource named "visitorcount".
   • Add a POST method to this resource, integrating it with your Lambda function.

3. Enable CORS:

   • In the API settings, enable CORS for your domain.

4. Deploy the API:

   • Create a new stage (e.g., "prod") and deploy your API.

Frontend JavaScript Integration

Now, let's integrate our backend with the frontend:

1. Add HTML for the visitor counter:

   <div id="visitor-count">Visitors: <span id="count">0</span></div>

1. Add JavaScript to call our API:

   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.

Testing the JavaScript Code

To ensure our JavaScript works correctly, we'll add some tests:

1. Install Jest for testing:

   npm install --save-dev jest

1. Create a test file (e.g., visitorCounter.test.js):

   // 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');
   });

1. Run the tests:

   npx jest

Conclusion

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!