AWS クラウド再開チャレンジのブログ投稿パート 1-jsチュートリアル-php.cn

AWS Cloud Resume Challenge Blog Post Part 1

「AWS を使用したクラウドネイティブ Web サイトの構築: 静的ホスティングから動的コンテンツまで」

はじめに
S3 を使用した静的 Web サイトのセットアップ
CloudFront を使用して Web サイトを保護する
Route 53 を使用した DNS の構成
訪問者カウンターの実装
- データストレージ用の DynamoDB
- バックエンドロジック用の Lambda
- HTTP エンドポイント用の API ゲートウェイ
フロントエンド JavaScript の統合
JavaScript コードのテスト
結論

AWS を使用したクラウドネイティブ Web サイトの構築: 静的ホスティングから動的コンテンツまで

私は数年前に Reddit をサーフィンしていたときに Cloud Resume Challenge について知りました。テクノロジー愛好家ではあるものの、AWS で日常的に働いているわけではない私は、この挑戦に興味をそそられました。

Forrest Brazeal によって作成された Cloud Resume Challenge は、さまざまな AWS サービスを使用してフルスタックアプリケーションを構築する複数ステップのプロジェクトです。実践的な実装を通じてクラウドスキルを披露するように設計されており、すでに現場にいる人にとっても優れた演習になります。

このブログ投稿では、Cloud Resume Challenge を完了した私の経験を共有し、使用した AWS サービス、実装したアーキテクチャ、得た洞察について詳しく説明します。あなたがスキルを磨きたいと考えているクラウドプロフェッショナルであっても、実際の AWS アプリケーションに興味がある人であっても、このプロジェクトを通じた私の取り組みに価値を見出していただければ幸いです。

導入

クラウドネイティブ開発では、クラウドコンピューティングの力を活用して、スケーラブルで復元力のあるアプリケーションを構築します。この包括的なガイドでは、さまざまな AWS サービスを使用してクラウドネイティブ Web サイトを作成するプロセスについて説明します。まずは静的 Web サイトのホスティングから始めて、訪問者カウンターなどの動的機能を徐々に追加していきます。この記事は、さまざまな AWS サービスがどのように連携して完全に機能し、スケーラブルなウェブサイトを作成するかを理解したい初心者に最適です。

S3 を使用した静的 Web サイトのセットアップ

Amazon S3 (Simple Storage Service) は、静的 Web サイトをホストするために使用できるオブジェクトストレージサービスです。設定方法は次のとおりです:

S3 バケットを作成します:
- AWS マネジメントコンソールに移動し、S3 に移動します。
- [バケットの作成] をクリックし、グローバルに一意の名前を選択します。
- バケット設定で、「静的 Web サイトホスティング」を有効にします。
- インデックスドキュメントを「index.html」に設定します。
Web サイトのファイルをアップロードします:
- HTML、CSS、JavaScript ファイルをバケットにアップロードします。
- ファイルにパブリック読み取り権限があることを確認してください。
バケットポリシーの構成:
- バケットの権限に、パブリック読み取りアクセスを許可するバケットポリシーを追加します。

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

ログイン後にコピー

「your-bucket-name」を実際のバケット名に置き換えます。

CloudFront を使用して Web サイトを保護する

CloudFront は、AWS のコンテンツ配信ネットワーク (CDN) サービスです。これを使用して、HTTPS 経由で Web サイトを提供し、パフォーマンスを向上させます:

CloudFront ディストリビューションを作成します:
- AWS コンソールで、CloudFront に移動し、[ディストリビューションの作成] をクリックします。
- オリジンドメインを S3 バケットの Web サイトエンドポイントに設定します。
- 「HTTP を HTTPS にリダイレクト」を有効にします。
SSL/TLS 証明書を構成します:
- AWS Certificate Manager (ACM) を使用して、ドメイン用の無料の SSL/TLS 証明書を作成します。
- CloudFront 配布設定で、この証明書を選択します。
Origin Access Identity (OAI) のセットアップ:
- OAI を作成し、ディストリビューションに関連付けます。
- この OAI からのアクセスのみを許可するように S3 バケットポリシーを更新します。

Route 53 を使用した DNS の設定

Route 53 は、AWS のドメインネームシステム (DNS) Web サービスです。これを使用して、ドメイン名を CloudFront ディストリビューションにマッピングします。

ホストゾーンを作成します:
- Route 53 で、ドメインのホストゾーンを作成します。
ネームサーバーを更新します:
- ドメインが別の場所に登録されている場合は、Route 53 のネームサーバーを使用するようにレジストラのネームサーバーを更新します。
レコードセットの作成:
- 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:

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:

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

ログイン後にコピー

Set up environment variables:
- Add TABLE_NAME environment variable with your DynamoDB table name.
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:

Create a new API:
- Choose HTTP API type.
Create a resource and method:
- Create a resource named "visitorcount".
- Add a POST method to this resource, integrating it with your Lambda function.
Enable CORS:
- In the API settings, enable CORS for your domain.
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:

Add HTML for the visitor counter:

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

ログイン後にコピー

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:

Install Jest for testing:

   npm install --save-dev jest

ログイン後にコピー

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

ログイン後にコピー

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.

以上がAWS クラウド再開チャレンジのブログ投稿パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。