@aws/nx-plugin-mcp 1.0.0-rc.77 → 1.0.0-rc.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1072,11 +1072,17 @@ The `ts#website` generates these files. Let us examine some of the key files hig
|
|
|
1072
1072
|
// packages/common/constructs/src/app/static-websites/game-ui.ts
|
|
1073
1073
|
import * as url from 'url';
|
|
1074
1074
|
import { Construct } from 'constructs';
|
|
1075
|
-
import { StaticWebsite } from '../../core/index.js';
|
|
1075
|
+
import { StaticWebsite, StaticWebsiteProps } from '../../core/index.js';
|
|
1076
|
+
|
|
1077
|
+
export type GameUIProps = Omit<
|
|
1078
|
+
StaticWebsiteProps,
|
|
1079
|
+
'websiteName' | 'websiteFilePath'
|
|
1080
|
+
>;
|
|
1076
1081
|
|
|
1077
1082
|
export class GameUI extends StaticWebsite {
|
|
1078
|
-
constructor(scope: Construct, id: string) {
|
|
1083
|
+
constructor(scope: Construct, id: string, props?: GameUIProps) {
|
|
1079
1084
|
super(scope, id, {
|
|
1085
|
+
...props,
|
|
1080
1086
|
websiteName: 'GameUI',
|
|
1081
1087
|
websiteFilePath: url.fileURLToPath(
|
|
1082
1088
|
new URL(
|
|
@@ -129,58 +129,7 @@ waf -> cloudfront
|
|
|
129
129
|
cloudfront -> s3
|
|
130
130
|
```
|
|
131
131
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
The CloudFront distribution applies a response headers policy that sets `Strict-Transport-Security`, `X-Content-Type-Options`, `X-Frame-Options: DENY`, `Referrer-Policy` and a `Content-Security-Policy` on all responses.
|
|
135
|
-
|
|
136
|
-
A default `Content-Security-Policy` is enforced. It restricts scripts and framing to mitigate XSS and clickjacking, while permitting HTTPS and WSS connections so the website can call AWS service endpoints (such as API Gateway, Cognito and Bedrock AgentCore) whose URLs are only known at deploy time. To adjust the policy (for example to tighten `connect-src` to your specific origins), edit the `content_security_policy` value in your generated `static-website.ts` (CDK) or `static-website.tf` (Terraform).
|
|
137
|
-
|
|
138
|
-
`runtime-config.json` is served with `Cache-Control: no-cache` so that browsers always fetch the latest configuration after a redeploy, rather than using a stale cached copy.
|
|
139
|
-
|
|
140
|
-
#### Custom Domain & TLS
|
|
141
|
-
|
|
142
|
-
By default the distribution uses the default CloudFront domain name (`*.cloudfront.net`) and its default certificate, which does not support enforcing a minimum TLS version of 1.2. To serve your website from your own domain, supply an [ACM certificate](https://docs.aws.amazon.com/acm/latest/userguide/acm-overview.html) (which must reside in `us-east-1` for use with CloudFront) and your domain names — a minimum TLS version of 1.2 is then enforced for viewers:
|
|
143
|
-
|
|
144
|
-
<Infrastructure>
|
|
145
|
-
<Fragment slot="cdk">
|
|
146
|
-
Pass the `certificate` and `domainNames` props through in your generated website construct in `packages/common/constructs/src/app/static-websites`:
|
|
147
|
-
|
|
148
|
-
```ts {6-8}
|
|
149
|
-
export class MyWebsite extends StaticWebsite {
|
|
150
|
-
constructor(scope: Construct, id: string) {
|
|
151
|
-
super(scope, id, {
|
|
152
|
-
websiteName: 'MyWebsite',
|
|
153
|
-
websiteFilePath: ...,
|
|
154
|
-
domainNames: ['www.example.com'],
|
|
155
|
-
certificate: Certificate.fromCertificateArn(scope, 'Cert',
|
|
156
|
-
'arn:aws:acm:us-east-1:123456789012:certificate/...'),
|
|
157
|
-
});
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
```
|
|
161
|
-
</Fragment>
|
|
162
|
-
<Fragment slot="terraform">
|
|
163
|
-
Set the `custom_domain_names` and `acm_certificate_arn` variables in your generated website module in `packages/common/terraform/src/app/static-websites`:
|
|
164
|
-
|
|
165
|
-
```hcl {5-6}
|
|
166
|
-
module "static_website" {
|
|
167
|
-
source = "../../../core/static-website"
|
|
168
|
-
website_name = "my-website"
|
|
169
|
-
website_file_path = ...
|
|
170
|
-
custom_domain_names = ["www.example.com"]
|
|
171
|
-
acm_certificate_arn = "arn:aws:acm:us-east-1:123456789012:certificate/..."
|
|
172
|
-
|
|
173
|
-
providers = {
|
|
174
|
-
aws.us_east_1 = aws.us_east_1
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
```
|
|
178
|
-
</Fragment>
|
|
179
|
-
</Infrastructure>
|
|
180
|
-
|
|
181
|
-
You will also need to create DNS records (for example in Route 53) pointing your domain at the CloudFront distribution.
|
|
182
|
-
|
|
183
|
-
## Implementing your React Website
|
|
132
|
+
## Implementing your Website
|
|
184
133
|
|
|
185
134
|
The [React documentation](https://react.dev/learn) is a good place to start to learn the basics of building with React.
|
|
186
135
|
|
|
@@ -231,6 +180,321 @@ export const MyComponent = () => {
|
|
|
231
180
|
|
|
232
181
|
For more details, check out the [TanStack Router](https://tanstack.com/router/latest/docs/framework/react/overview) documentation.
|
|
233
182
|
|
|
183
|
+
## Deploying your Website
|
|
184
|
+
|
|
185
|
+
The React website generator creates CDK or Terraform infrastructure as code based on your selected `iac`. You can use this to deploy your website.
|
|
186
|
+
|
|
187
|
+
<Infrastructure>
|
|
188
|
+
<Fragment slot="cdk">
|
|
189
|
+
To deploy your website, we recommend using the <Link path="guides/typescript-infrastructure">`ts#infra` generator</Link> to create a CDK application.
|
|
190
|
+
|
|
191
|
+
You can use the CDK construct generated for you in `packages/common/constructs` to deploy your website.
|
|
192
|
+
|
|
193
|
+
```ts title="packages/infra/src/stacks/application-stack.ts" {3, 9}
|
|
194
|
+
import { Stack } from 'aws-cdk-lib';
|
|
195
|
+
import { Construct } from 'constructs';
|
|
196
|
+
import { MyWebsite } from '@my-scope/common-constructs';
|
|
197
|
+
|
|
198
|
+
export class ApplicationStack extends Stack {
|
|
199
|
+
constructor(scope: Construct, id: string) {
|
|
200
|
+
super(scope, id);
|
|
201
|
+
|
|
202
|
+
new MyWebsite(this, 'MyWebsite');
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
This sets up:
|
|
208
|
+
|
|
209
|
+
1. An S3 bucket for hosting your static website files
|
|
210
|
+
2. CloudFront distribution for global content delivery
|
|
211
|
+
3. WAF Web ACL for security protection
|
|
212
|
+
4. Origin Access Control for secure S3 access
|
|
213
|
+
5. Automatic deployment of website files and runtime configuration
|
|
214
|
+
</Fragment>
|
|
215
|
+
<Fragment slot="terraform">
|
|
216
|
+
To deploy your website, we recommend using the <Link path="/guides/terraform-project">`terraform#project` generator</Link> to create a Terraform project.
|
|
217
|
+
|
|
218
|
+
You can use the Terraform module generated for you in `packages/common/terraform` to deploy your website.
|
|
219
|
+
|
|
220
|
+
```hcl title="packages/infra/src/main.tf" {3}
|
|
221
|
+
# Deploy website
|
|
222
|
+
module "my_website" {
|
|
223
|
+
source = "../../common/terraform/src/app/static-websites/my-website"
|
|
224
|
+
|
|
225
|
+
providers = {
|
|
226
|
+
aws.us_east_1 = aws.us_east_1
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
This sets up:
|
|
232
|
+
|
|
233
|
+
1. An S3 bucket for hosting your static website files
|
|
234
|
+
2. CloudFront distribution for global content delivery
|
|
235
|
+
3. WAF Web ACL for security protection (deployed in us-east-1)
|
|
236
|
+
4. Origin Access Control for secure S3 access
|
|
237
|
+
5. Automatic deployment of website files and runtime configuration
|
|
238
|
+
|
|
239
|
+
:::note[WAF Provider Region]
|
|
240
|
+
The `aws.us_east_1` provider is required for CloudFront and WAF resources, which must be deployed in the us-east-1 region. Make sure your Terraform configuration includes this provider:
|
|
241
|
+
|
|
242
|
+
```hcl title="packages/infra/src/providers.tf"
|
|
243
|
+
provider "aws" {
|
|
244
|
+
alias = "us_east_1"
|
|
245
|
+
region = "us-east-1"
|
|
246
|
+
}
|
|
247
|
+
```
|
|
248
|
+
:::
|
|
249
|
+
</Fragment>
|
|
250
|
+
</Infrastructure>
|
|
251
|
+
|
|
252
|
+
### Security Headers
|
|
253
|
+
|
|
254
|
+
The CloudFront distribution applies a response headers policy that sets `Strict-Transport-Security`, `X-Content-Type-Options`, `X-Frame-Options: DENY`, `Referrer-Policy` and a `Content-Security-Policy` on all responses.
|
|
255
|
+
|
|
256
|
+
A default `Content-Security-Policy` is enforced. It restricts scripts and framing to mitigate XSS and clickjacking, while permitting HTTPS and WSS connections so the website can call AWS service endpoints (such as API Gateway, Cognito and Bedrock AgentCore) whose URLs are only known at deploy time. To adjust the policy (for example to tighten `connect-src` to your specific origins), edit the `content_security_policy` value in your generated `static-website.ts` (CDK) or `static-website.tf` (Terraform).
|
|
257
|
+
|
|
258
|
+
`runtime-config.json` is served with `Cache-Control: no-cache` so that browsers always fetch the latest configuration after a redeploy, rather than using a stale cached copy.
|
|
259
|
+
|
|
260
|
+
### WAF
|
|
261
|
+
|
|
262
|
+
The CloudFront distribution is protected by an [AWS WAFv2](https://docs.aws.amazon.com/waf/latest/developerguide/waf-chapter.html) Web ACL by default. The Web ACL uses the AWS managed default ruleset ([`AWSManagedRulesCommonRuleSet`](https://docs.aws.amazon.com/waf/latest/developerguide/aws-managed-rule-groups-baseline.html#aws-managed-rule-groups-baseline-crs) and [`AWSManagedRulesKnownBadInputsRuleSet`](https://docs.aws.amazon.com/waf/latest/developerguide/aws-managed-rule-groups-baseline.html#aws-managed-rule-groups-baseline-known-bad-inputs)), providing protection against common web exploits including the OWASP Top 10.
|
|
263
|
+
|
|
264
|
+
<Infrastructure>
|
|
265
|
+
<Fragment slot="cdk">
|
|
266
|
+
To opt out, set `enableWaf` to `false` when you create your website:
|
|
267
|
+
|
|
268
|
+
```ts title="packages/infra/src/stacks/application-stack.ts" {10,15-18}
|
|
269
|
+
import { Stack } from 'aws-cdk-lib';
|
|
270
|
+
import { Construct } from 'constructs';
|
|
271
|
+
import { MyWebsite, suppressRules } from '@my-scope/common-constructs';
|
|
272
|
+
|
|
273
|
+
export class ApplicationStack extends Stack {
|
|
274
|
+
constructor(scope: Construct, id: string) {
|
|
275
|
+
super(scope, id);
|
|
276
|
+
|
|
277
|
+
const website = new MyWebsite(this, 'MyWebsite', {
|
|
278
|
+
enableWaf: false,
|
|
279
|
+
});
|
|
280
|
+
|
|
281
|
+
// Disabling WAF fails the checkov CKV_AWS_68 check ("CloudFront
|
|
282
|
+
// Distribution should have WAF enabled"). Suppress it explicitly.
|
|
283
|
+
suppressRules(
|
|
284
|
+
website.cloudFrontDistribution,
|
|
285
|
+
['CKV_AWS_68'],
|
|
286
|
+
'WAF is intentionally disabled for this distribution',
|
|
287
|
+
);
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
:::caution[Suppress CKV_AWS_68 when disabling WAF]
|
|
293
|
+
Disabling WAF means the synthesized CloudFront distribution has no Web ACL associated, which fails the `checkov` security scan with `CKV_AWS_68: "CloudFront Distribution should have WAF enabled"` unless suppressed as shown above.
|
|
294
|
+
:::
|
|
295
|
+
</Fragment>
|
|
296
|
+
<Fragment slot="terraform">
|
|
297
|
+
To opt out, set `enable_waf` to `false`:
|
|
298
|
+
|
|
299
|
+
```hcl title="packages/infra/src/main.tf" {7}
|
|
300
|
+
module "my_website" {
|
|
301
|
+
source = "../../common/terraform/src/app/static-websites/my-website"
|
|
302
|
+
|
|
303
|
+
providers = {
|
|
304
|
+
aws.us_east_1 = aws.us_east_1
|
|
305
|
+
}
|
|
306
|
+
enable_waf = false
|
|
307
|
+
}
|
|
308
|
+
```
|
|
309
|
+
</Fragment>
|
|
310
|
+
</Infrastructure>
|
|
311
|
+
|
|
312
|
+
### Bucket Encryption
|
|
313
|
+
|
|
314
|
+
The website bucket, the CloudFront distribution log bucket, and the CloudWatch Logs group receiving their server access logs are encrypted with a customer-managed [AWS KMS](https://aws.amazon.com/kms/) key by default. This key is created for you automatically, with key rotation enabled.
|
|
315
|
+
|
|
316
|
+
<Infrastructure>
|
|
317
|
+
<Fragment slot="cdk">
|
|
318
|
+
If you want to use a different encryption configuration, pass the `encryption`, `encryptionKey` and `enableKeyRotation` props when you create your website:
|
|
319
|
+
|
|
320
|
+
```ts title="packages/infra/src/stacks/application-stack.ts" {11}
|
|
321
|
+
import { Stack } from 'aws-cdk-lib';
|
|
322
|
+
import { Construct } from 'constructs';
|
|
323
|
+
import { BucketEncryption } from 'aws-cdk-lib/aws-s3';
|
|
324
|
+
import { MyWebsite } from '@my-scope/common-constructs';
|
|
325
|
+
|
|
326
|
+
export class ApplicationStack extends Stack {
|
|
327
|
+
constructor(scope: Construct, id: string) {
|
|
328
|
+
super(scope, id);
|
|
329
|
+
|
|
330
|
+
new MyWebsite(this, 'MyWebsite', {
|
|
331
|
+
encryption: BucketEncryption.S3_MANAGED,
|
|
332
|
+
});
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
:::caution[Suppress CKV_AWS_158 when using S3_MANAGED]
|
|
338
|
+
Choosing `BucketEncryption.S3_MANAGED` means the access log group is no longer KMS encrypted, which fails the `checkov` security scan with `CKV_AWS_158`. Suppress it:
|
|
339
|
+
|
|
340
|
+
```ts title="packages/infra/src/stacks/application-stack.ts"
|
|
341
|
+
import { LogGroup } from 'aws-cdk-lib/aws-logs';
|
|
342
|
+
import { suppressRules } from '@my-scope/common-constructs';
|
|
343
|
+
|
|
344
|
+
suppressRules(
|
|
345
|
+
website,
|
|
346
|
+
['CKV_AWS_158'],
|
|
347
|
+
'Access log group is not KMS encrypted when encryption is S3_MANAGED',
|
|
348
|
+
(c) => c instanceof LogGroup,
|
|
349
|
+
);
|
|
350
|
+
```
|
|
351
|
+
:::
|
|
352
|
+
|
|
353
|
+
To use your own KMS key instead of one created automatically, pass `encryptionKey`:
|
|
354
|
+
|
|
355
|
+
```ts {2}
|
|
356
|
+
new MyWebsite(this, 'MyWebsite', {
|
|
357
|
+
encryptionKey: myKey,
|
|
358
|
+
});
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
:::caution[Imported keys need their own permissions]
|
|
362
|
+
A key imported via `Key.fromKeyArn` must already grant the CloudWatch Logs, S3 and CloudFront service principals the permissions they need in its own key policy. `addToResourcePolicy` is a no-op on an imported key, so this construct can't grant them for you, and `cdk synth` won't warn you - the failure only shows up at deploy time. A key created in the same app (`new Key(this, 'WebsiteKey')`) doesn't have this problem, since CDK can update its policy directly.
|
|
363
|
+
:::
|
|
364
|
+
|
|
365
|
+
`enableKeyRotation` (default `true`) only applies to the automatically created key, i.e. when `encryption` is `BucketEncryption.KMS` (the default) and no `encryptionKey` is supplied:
|
|
366
|
+
|
|
367
|
+
```ts {2}
|
|
368
|
+
new MyWebsite(this, 'MyWebsite', {
|
|
369
|
+
enableKeyRotation: false,
|
|
370
|
+
});
|
|
371
|
+
```
|
|
372
|
+
|
|
373
|
+
:::caution[Suppress CKV_AWS_7 when disabling key rotation]
|
|
374
|
+
Disabling key rotation on the automatically created key fails the `checkov` security scan with `CKV_AWS_7`. Suppress it:
|
|
375
|
+
|
|
376
|
+
```ts title="packages/infra/src/stacks/application-stack.ts"
|
|
377
|
+
import { Key } from 'aws-cdk-lib/aws-kms';
|
|
378
|
+
import { suppressRules } from '@my-scope/common-constructs';
|
|
379
|
+
|
|
380
|
+
suppressRules(
|
|
381
|
+
website,
|
|
382
|
+
['CKV_AWS_7'],
|
|
383
|
+
'Key rotation is managed externally',
|
|
384
|
+
(c) => c instanceof Key,
|
|
385
|
+
);
|
|
386
|
+
```
|
|
387
|
+
:::
|
|
388
|
+
</Fragment>
|
|
389
|
+
<Fragment slot="terraform">
|
|
390
|
+
If you want to use a different encryption configuration, set the `encryption`, `kms_key_arn`, `create_kms_key` and `enable_key_rotation` variables:
|
|
391
|
+
|
|
392
|
+
```hcl title="packages/infra/src/main.tf" {7}
|
|
393
|
+
module "my_website" {
|
|
394
|
+
source = "../../common/terraform/src/app/static-websites/my-website"
|
|
395
|
+
|
|
396
|
+
providers = {
|
|
397
|
+
aws.us_east_1 = aws.us_east_1
|
|
398
|
+
}
|
|
399
|
+
encryption = "S3_MANAGED"
|
|
400
|
+
}
|
|
401
|
+
```
|
|
402
|
+
|
|
403
|
+
:::caution[Checkov: S3_MANAGED]
|
|
404
|
+
Choosing `S3_MANAGED` fails the `checkov` security scan with `CKV_AWS_145` on the website and distribution log buckets. The vended `test` target doesn't accept a `--config-file`, but `checkov` auto-discovers a `.checkov.yaml` in its working directory, so drop one in `packages/infra/src`:
|
|
405
|
+
|
|
406
|
+
```yaml title="packages/infra/src/.checkov.yaml"
|
|
407
|
+
skip-check:
|
|
408
|
+
- CKV_AWS_145
|
|
409
|
+
```
|
|
410
|
+
:::
|
|
411
|
+
|
|
412
|
+
To use your own KMS key instead of one created automatically, pass `kms_key_arn` and set `create_kms_key` to `false`:
|
|
413
|
+
|
|
414
|
+
```hcl title="packages/infra/src/main.tf" {7-8}
|
|
415
|
+
module "my_website" {
|
|
416
|
+
source = "../../common/terraform/src/app/static-websites/my-website"
|
|
417
|
+
|
|
418
|
+
providers = {
|
|
419
|
+
aws.us_east_1 = aws.us_east_1
|
|
420
|
+
}
|
|
421
|
+
kms_key_arn = aws_kms_key.website.arn
|
|
422
|
+
create_kms_key = false
|
|
423
|
+
}
|
|
424
|
+
```
|
|
425
|
+
|
|
426
|
+
A customer-supplied key must already grant the CloudWatch Logs, S3 and CloudFront service principals the permissions they need in its own key policy.
|
|
427
|
+
|
|
428
|
+
`enable_key_rotation` (default `true`) only applies to the automatically created key, i.e. when `encryption` is `"KMS"` (the default) and `create_kms_key` is `true`:
|
|
429
|
+
|
|
430
|
+
```hcl title="packages/infra/src/main.tf" {7}
|
|
431
|
+
module "my_website" {
|
|
432
|
+
source = "../../common/terraform/src/app/static-websites/my-website"
|
|
433
|
+
|
|
434
|
+
providers = {
|
|
435
|
+
aws.us_east_1 = aws.us_east_1
|
|
436
|
+
}
|
|
437
|
+
enable_key_rotation = false
|
|
438
|
+
}
|
|
439
|
+
```
|
|
440
|
+
|
|
441
|
+
:::caution[Checkov: key rotation disabled]
|
|
442
|
+
Disabling key rotation on the automatically created key fails the `checkov` security scan with `CKV_AWS_7`. Add it to the same `.checkov.yaml`:
|
|
443
|
+
|
|
444
|
+
```yaml title="packages/infra/src/.checkov.yaml"
|
|
445
|
+
skip-check:
|
|
446
|
+
- CKV_AWS_7
|
|
447
|
+
```
|
|
448
|
+
:::
|
|
449
|
+
</Fragment>
|
|
450
|
+
</Infrastructure>
|
|
451
|
+
|
|
452
|
+
### Custom Domain & TLS
|
|
453
|
+
|
|
454
|
+
By default the distribution uses the default CloudFront domain name (`*.cloudfront.net`) and its default certificate, which does not support enforcing a minimum TLS version of 1.2. To serve your website from your own domain, supply an [ACM certificate](https://docs.aws.amazon.com/acm/latest/userguide/acm-overview.html) (which must reside in `us-east-1` for use with CloudFront) and your domain names. A minimum TLS version of 1.2 is then enforced for viewers:
|
|
455
|
+
|
|
456
|
+
<Infrastructure>
|
|
457
|
+
<Fragment slot="cdk">
|
|
458
|
+
Pass the `certificate` and `domainNames` props when you create your website:
|
|
459
|
+
|
|
460
|
+
```ts title="packages/infra/src/stacks/application-stack.ts" {11-13}
|
|
461
|
+
import { Stack } from 'aws-cdk-lib';
|
|
462
|
+
import { Construct } from 'constructs';
|
|
463
|
+
import { Certificate } from 'aws-cdk-lib/aws-certificatemanager';
|
|
464
|
+
import { MyWebsite } from '@my-scope/common-constructs';
|
|
465
|
+
|
|
466
|
+
export class ApplicationStack extends Stack {
|
|
467
|
+
constructor(scope: Construct, id: string) {
|
|
468
|
+
super(scope, id);
|
|
469
|
+
|
|
470
|
+
new MyWebsite(this, 'MyWebsite', {
|
|
471
|
+
domainNames: ['www.example.com'],
|
|
472
|
+
certificate: Certificate.fromCertificateArn(this, 'Cert',
|
|
473
|
+
'arn:aws:acm:us-east-1:123456789012:certificate/...'),
|
|
474
|
+
});
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
```
|
|
478
|
+
</Fragment>
|
|
479
|
+
<Fragment slot="terraform">
|
|
480
|
+
Set the `custom_domain_names` and `acm_certificate_arn` variables:
|
|
481
|
+
|
|
482
|
+
```hcl title="packages/infra/src/main.tf" {7-8}
|
|
483
|
+
module "my_website" {
|
|
484
|
+
source = "../../common/terraform/src/app/static-websites/my-website"
|
|
485
|
+
|
|
486
|
+
providers = {
|
|
487
|
+
aws.us_east_1 = aws.us_east_1
|
|
488
|
+
}
|
|
489
|
+
custom_domain_names = ["www.example.com"]
|
|
490
|
+
acm_certificate_arn = "arn:aws:acm:us-east-1:123456789012:certificate/..."
|
|
491
|
+
}
|
|
492
|
+
```
|
|
493
|
+
</Fragment>
|
|
494
|
+
</Infrastructure>
|
|
495
|
+
|
|
496
|
+
You will also need to create DNS records (for example in Route 53) pointing your domain at the CloudFront distribution.
|
|
497
|
+
|
|
234
498
|
## Runtime Configuration
|
|
235
499
|
|
|
236
500
|
Configuration from your infrastructure is provided to your website via <Link href="guides/runtime-config">Runtime Configuration</Link>. This allows your website to access details such as API URLs which are not known until your application is deployed.
|
|
@@ -252,7 +516,7 @@ export class ApplicationStack extends Stack {
|
|
|
252
516
|
constructor(scope: Construct, id: string) {
|
|
253
517
|
super(scope, id);
|
|
254
518
|
|
|
255
|
-
// Website can be declared at any point
|
|
519
|
+
// Website can be declared at any point, since runtime config is resolved lazily
|
|
256
520
|
new MyWebsite(this, 'MyWebsite');
|
|
257
521
|
|
|
258
522
|
// Automatically adds values to the RuntimeConfig
|
|
@@ -415,75 +679,6 @@ You can run your tests using the `test` target:
|
|
|
415
679
|
|
|
416
680
|
<NxCommands commands={['test <my-website>']} />
|
|
417
681
|
|
|
418
|
-
## Deploying Your Website
|
|
419
|
-
|
|
420
|
-
The React website generator creates CDK or Terraform infrastructure as code based on your selected `iac`. You can use this to deploy your website.
|
|
421
|
-
|
|
422
|
-
<Infrastructure>
|
|
423
|
-
<Fragment slot="cdk">
|
|
424
|
-
To deploy your website, we recommend using the <Link path="guides/typescript-infrastructure">`ts#infra` generator</Link> to create a CDK application.
|
|
425
|
-
|
|
426
|
-
You can use the CDK construct generated for you in `packages/common/constructs` to deploy your website.
|
|
427
|
-
|
|
428
|
-
```ts title="packages/infra/src/stacks/application-stack.ts" {3, 9}
|
|
429
|
-
import { Stack } from 'aws-cdk-lib';
|
|
430
|
-
import { Construct } from 'constructs';
|
|
431
|
-
import { MyWebsite } from '@my-scope/common-constructs';
|
|
432
|
-
|
|
433
|
-
export class ApplicationStack extends Stack {
|
|
434
|
-
constructor(scope: Construct, id: string) {
|
|
435
|
-
super(scope, id);
|
|
436
|
-
|
|
437
|
-
new MyWebsite(this, 'MyWebsite');
|
|
438
|
-
}
|
|
439
|
-
}
|
|
440
|
-
```
|
|
441
|
-
|
|
442
|
-
This sets up:
|
|
443
|
-
|
|
444
|
-
1. An S3 bucket for hosting your static website files
|
|
445
|
-
2. CloudFront distribution for global content delivery
|
|
446
|
-
3. WAF Web ACL for security protection
|
|
447
|
-
4. Origin Access Control for secure S3 access
|
|
448
|
-
5. Automatic deployment of website files and runtime configuration
|
|
449
|
-
</Fragment>
|
|
450
|
-
<Fragment slot="terraform">
|
|
451
|
-
To deploy your website, we recommend using the <Link path="/guides/terraform-project">`terraform#project` generator</Link> to create a Terraform project.
|
|
452
|
-
|
|
453
|
-
You can use the Terraform module generated for you in `packages/common/terraform` to deploy your website.
|
|
454
|
-
|
|
455
|
-
```hcl title="packages/infra/src/main.tf" {3}
|
|
456
|
-
# Deploy website
|
|
457
|
-
module "my_website" {
|
|
458
|
-
source = "../../common/terraform/src/app/static-websites/my-website"
|
|
459
|
-
|
|
460
|
-
providers = {
|
|
461
|
-
aws.us_east_1 = aws.us_east_1
|
|
462
|
-
}
|
|
463
|
-
}
|
|
464
|
-
```
|
|
465
|
-
|
|
466
|
-
This sets up:
|
|
467
|
-
|
|
468
|
-
1. An S3 bucket for hosting your static website files
|
|
469
|
-
2. CloudFront distribution for global content delivery
|
|
470
|
-
3. WAF Web ACL for security protection (deployed in us-east-1)
|
|
471
|
-
4. Origin Access Control for secure S3 access
|
|
472
|
-
5. Automatic deployment of website files and runtime configuration
|
|
473
|
-
|
|
474
|
-
:::note[WAF Provider Region]
|
|
475
|
-
The `aws.us_east_1` provider is required for CloudFront and WAF resources, which must be deployed in the us-east-1 region. Make sure your Terraform configuration includes this provider:
|
|
476
|
-
|
|
477
|
-
```hcl title="packages/infra/src/providers.tf"
|
|
478
|
-
provider "aws" {
|
|
479
|
-
alias = "us_east_1"
|
|
480
|
-
region = "us-east-1"
|
|
481
|
-
}
|
|
482
|
-
```
|
|
483
|
-
:::
|
|
484
|
-
</Fragment>
|
|
485
|
-
</Infrastructure>
|
|
486
|
-
|
|
487
682
|
## Connections
|
|
488
683
|
|
|
489
684
|
Use the <Link path="guides/connection">`connection`</Link> generator to integrate this project with others in your workspace. The following connections involve this project:
|