「AWS を使用したクラウドネイティブ Web サイトの構築: 静的ホスティングから動的コンテンツまで」
私は数年前に Reddit をサーフィンしていたときに Cloud Resume Challenge について知りました。テクノロジー愛好家ではあるものの、AWS で日常的に働いているわけではない私は、この挑戦に興味をそそられました。
Forrest Brazeal によって作成された Cloud Resume Challenge は、さまざまな AWS サービスを使用してフルスタック アプリケーションを構築する複数ステップのプロジェクトです。実践的な実装を通じてクラウド スキルを披露するように設計されており、すでに現場にいる人にとっても優れた演習になります。
このブログ投稿では、Cloud Resume Challenge を完了した私の経験を共有し、使用した AWS サービス、実装したアーキテクチャ、得た洞察について詳しく説明します。あなたがスキルを磨きたいと考えているクラウド プロフェッショナルであっても、実際の AWS アプリケーションに興味がある人であっても、このプロジェクトを通じた私の取り組みに価値を見出していただければ幸いです。
クラウドネイティブ開発では、クラウド コンピューティングの力を活用して、スケーラブルで復元力のあるアプリケーションを構築します。この包括的なガイドでは、さまざまな AWS サービスを使用してクラウドネイティブ Web サイトを作成するプロセスについて説明します。まずは静的 Web サイトのホスティングから始めて、訪問者カウンターなどの動的機能を徐々に追加していきます。この記事は、さまざまな AWS サービスがどのように連携して完全に機能し、スケーラブルなウェブサイトを作成するかを理解したい初心者に最適です。
Amazon S3 (Simple Storage Service) は、静的 Web サイトをホストするために使用できるオブジェクト ストレージ サービスです。設定方法は次のとおりです:
S3 バケットを作成します:
Web サイトのファイルをアップロードします:
バケットポリシーの構成:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/*"
}
]
}
「your-bucket-name」を実際のバケット名に置き換えます。
CloudFront は、AWS のコンテンツ配信ネットワーク (CDN) サービスです。これを使用して、HTTPS 経由で Web サイトを提供し、パフォーマンスを向上させます:
CloudFront ディストリビューションを作成します:
SSL/TLS 証明書を構成します:
Origin Access Identity (OAI) のセットアップ:
Route 53 は、AWS のドメイン ネーム システム (DNS) Web サービスです。これを使用して、ドメイン名を CloudFront ディストリビューションにマッピングします。
ホストゾーンを作成します:
ネームサーバーを更新します:
レコードセットの作成:
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.
以上がAWS クラウド再開チャレンジのブログ投稿パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
