Step 1: Simple web - solargis/cdk-workshop GitHub Wiki
In this step we will create a simple static web, hosted in the cloud, in public S3 bucket.
We will use simple index.html file, but the same setup will work for any static content, as we will use later for hosting an Angular application.
Preparation
Add npm dependencies:
npm install --save @aws-cdk/aws-s3 @aws-cdk/aws-s3-deployment app-root-path
npm install --save-dev @types/app-root-path @types/node
Create directory ./lib/web
1.1 Create simple web
Add static HTML file to: ./lib/web/index.html
Hello from CDK
Define cloud resources for simple web: ./cdk/cdk-workshop-stack.ts
import { CfnOutput, Construct, Stack, StackProps } from '@aws-cdk/core';
import { Bucket } from '@aws-cdk/aws-s3';
import { BucketDeployment, Source } from '@aws-cdk/aws-s3-deployment';
import { path as rootPath } from 'app-root-path';
import { resolve } from 'path';
// ...inside of CdkWorkshopStack constructor
// S3 bucket to host static web with public access
const webBucket = new Bucket(this, 'WebBucket', {
websiteIndexDocument: 'index.html'
});
webBucket.grantPublicAccess();
// link to web assets directory
const webSource = Source.asset(resolve(rootPath, 'lib/web'));
// define deployment of web assets into web bucket
new BucketDeployment(this, 'WebDeployment', {
sources: [webSource],
destinationBucket: webBucket
});
// export web bucket public URL
new CfnOutput(this, 'WebBucketUrl', {
value: webBucket.bucketWebsiteUrl
});
Check changes in the stack:
cdk diff
Deploy stack with simple web:
cdk deploy
Test
- Open browser and navigate to web bucket URL returned as output
WebBucketUrl - Check S3 bucket content in AWS Console: Services > S3