AWS Cloud Resume Challenge Catatan Blog Bahagian 1

"Membina Tapak Web Asli Awan dengan AWS: Daripada Pengehosan Statik kepada Kandungan Dinamik"

1. Pengenalan
2. Menyediakan Tapak Web Statik dengan S3
3. Melindungi Tapak Web dengan CloudFront
4. Mengkonfigurasi DNS dengan Laluan 53
5. Melaksanakan Kaunter Pelawat
   • DynamoDB untuk Storan Data
   • Lambda untuk Logik Bahagian Belakang
   • Gerbang API untuk Titik Akhir HTTP
6. Integrasi JavaScript Depan
7. Menguji Kod JavaScript
8. Kesimpulan

Membina Tapak Web Asli Awan dengan AWS: Daripada Pengehosan Statik kepada Kandungan Dinamik

Saya mendengar tentang Cabaran Cloud Resume semasa melayari reddit beberapa tahun lalu. Sebagai peminat teknologi tetapi seseorang yang tidak bekerja di AWS setiap hari, cabaran itu menarik minat saya. 

Cabaran Cloud Resume, yang dicipta oleh Forrest Brazeal, ialah projek berbilang langkah yang melibatkan membina aplikasi tindanan penuh menggunakan pelbagai perkhidmatan AWS. Ia direka untuk mempamerkan kemahiran awan melalui pelaksanaan praktikal, menjadikannya latihan yang sangat baik walaupun bagi kita yang sudah berada di lapangan.

Dalam catatan blog ini, saya akan berkongsi pengalaman saya menyelesaikan Cabaran Cloud Resume, memperincikan perkhidmatan AWS yang saya gunakan, seni bina yang saya laksanakan dan cerapan yang saya peroleh. Sama ada anda seorang profesional awan yang ingin mempertajam kemahiran anda atau seseorang yang ingin tahu tentang aplikasi AWS dunia sebenar, saya harap anda akan mendapat nilai dalam perjalanan saya melalui projek ini.

Jadual Kandungan

1. Pengenalan
2. Menyediakan Tapak Web Statik dengan S3
3. Melindungi Tapak Web dengan CloudFront
4. Mengkonfigurasi DNS dengan Laluan 53
5. Melaksanakan Kaunter Pelawat
6. Integrasi JavaScript Depan
7. Menguji Kod JavaScript
8. Kesimpulan

pengenalan

Pembangunan asli awan memanfaatkan kuasa pengkomputeran awan untuk membina aplikasi berskala dan berdaya tahan. Dalam panduan komprehensif ini, kami akan melalui proses mencipta tapak web asli awan menggunakan pelbagai perkhidmatan AWS. Kami akan bermula dengan mengehos tapak web statik dan secara beransur-ansur menambah ciri dinamik, termasuk kaunter pelawat. Artikel ini sesuai untuk pemula yang ingin memahami cara perkhidmatan AWS yang berbeza berfungsi bersama-sama untuk mencipta tapak web boleh skala yang berfungsi sepenuhnya.

Menyediakan Laman Web Statik dengan S3

Amazon S3 (Perkhidmatan Penyimpanan Mudah) ialah perkhidmatan penyimpanan objek yang boleh kami gunakan untuk mengehoskan tapak web statik. Begini cara untuk menyediakannya:

1. Buat baldi S3:

   • Pergi ke Konsol Pengurusan AWS dan navigasi ke S3.
   • Klik "Buat baldi" dan pilih nama unik di peringkat global.
   • Dalam tetapan baldi, dayakan "Penghosan tapak web statik".
   • Tetapkan dokumen indeks kepada "index.html".

2. Muat naik fail tapak web anda:

   • Muat naik fail HTML, CSS dan JavaScript anda ke baldi.
   • Pastikan fail mempunyai kebenaran membaca awam.

3. Konfigurasikan dasar baldi:

   • Dalam kebenaran baldi, tambahkan dasar baldi untuk membenarkan akses baca awam:

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::your-bucket-name/*"
           }
       ]
   }

Ganti "nama baldi-anda" dengan nama baldi sebenar anda.

Melindungi Laman Web dengan CloudFront

CloudFront ialah perkhidmatan Rangkaian Penyampaian Kandungan (CDN) AWS. Kami akan menggunakannya untuk menyediakan tapak web kami melalui HTTPS dan meningkatkan prestasi:

1. Buat pengedaran CloudFront:

   • Dalam AWS Console, pergi ke CloudFront dan klik "Buat Pengedaran".
   • Tetapkan domain asal kepada titik akhir tapak web baldi S3 anda.
   • Dayakan "Ubah hala HTTP ke HTTPS".

2. Konfigurasikan sijil SSL/TLS:

   • Gunakan Pengurus Sijil AWS (ACM) untuk membuat sijil SSL/TLS percuma untuk domain anda.
   • Dalam tetapan pengedaran CloudFront anda, pilih sijil ini.

3. Sediakan Identiti Akses Asal (OAI):

   • Buat OAI dan kaitkan dengan pengedaran anda.
   • Kemas kini dasar baldi S3 anda untuk hanya membenarkan akses daripada OAI ini.

Mengkonfigurasi DNS dengan Laluan 53

Laluan 53 ialah perkhidmatan web Sistem Nama Domain (DNS) AWS. Kami akan menggunakannya untuk memetakan nama domain kami ke pengedaran CloudFront kami:

1. Buat zon yang dihoskan:

   • Dalam Laluan 53, buat zon yang dihoskan untuk domain anda.

2. Kemas kini pelayan nama:

   • Jika domain anda didaftarkan di tempat lain, kemas kini pelayan nama di pendaftar anda untuk menggunakan pelayan nama Laluan 53.

3. Buat set rekod:

   • 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.

Atas ialah kandungan terperinci AWS Cloud Resume Challenge Catatan Blog Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!