task 2.2: implement automated deployment

[Guria]

Task 2.2

• add serverless framework to manage deployment
• define needed resources: bucket, distribution, policies
• define plugin to sync FE build to s3 bucket
• define plugin to invalidate cloudfront distribution after deploy
• add custom plugin to output distribution url after deploy
• add corresponded npm scripts

[Guria]

I spend some time to get a deeper insight on what is happening in suggested serverless plugins to use.
And I found that those plugins are not very optimal:

• serverless-finch requires additional flags to ask it not to mess s3 bucket policies and configurations
• serverless-finch doesn't manages bucket cleanup on sls remove
• spa plugin template has unused tasks
• spa plugin template uses spawn to run cli for task that could be done with serverless api
• these plugins requires separate commands to run instead of hooking in existing sls deploy and sls remove
• All above brings us messy scripts set in package.json

So I have explored ways to write better plugin or find ones that fit better.
https://www.serverless.com/plugins/fullstack-serverless - was promising, but the way it is implemented seems to have some expectations on how Resources named.
Finally I found great combination of:
https://www.serverless.com/plugins/serverless-s3-sync
https://github.com/aghadiry/serverless-cloudfront-invalidate

Configuration is pretty straight forward and these plugins solves all above points.
Only missing piece is output of cloudfront domain name, which I solved with my own plugin and hooking it to sls deploy command.
As an outcome we need only those commands

$ npm run build && sls deploy # to deploy/update resources, sync s3, run invalidation
$ sls remove                  # to cleanup s3 and remove all resources

[Guria]

Initial deploy of infrastructure and already builded app.

npm run deploy

> [email protected] deploy
> sls deploy

Deploying guria-aws-js-practitioner to stage dev (us-east-1)
DistributionIdKey: WebAppDistributionIdOutput
CloudfrontInvalidate: Invalidation started
Web App deployed to: https://d117vzcvm45m9s.cloudfront.net

✔ Service deployed to stack guria-aws-js-practitioner-dev (294s)

[Guria]

Make visible changes and redeploy s3 bucket with distribution invalidation.
Resources not changed so it reports that there is no changes to deploy.

 npm run build:deploy

> [email protected] build:deploy
> run-s build deploy

> [email protected] build
> tsc && vite build

vite v3.1.4 building for production...
✓ 1760 modules transformed.
dist/index.html                      0.53 KiB
dist/assets/dehydrated.2e689d50.js   1.55 KiB / gzip: 0.44 KiB
dist/assets/index.a7196b63.js        215.17 KiB / gzip: 65.31 KiB
dist/assets/libs.b35d0422.js         107.82 KiB / gzip: 35.44 KiB
dist/assets/react.fbb230d2.js        197.86 KiB / gzip: 60.38 KiB

> [email protected] deploy
> sls deploy

Deploying guria-aws-js-practitioner to stage dev (us-east-1)
DistributionIdKey: WebAppDistributionIdOutput
CloudfrontInvalidate: Invalidation started
Web App deployed to: https://d117vzcvm45m9s.cloudfront.net

Change set did not include any changes to be deployed. (19s)

https://d117vzcvm45m9s.cloudfront.net

[Guria]

Removing serverless deployment with all created resources.
serverless-s3-sync cleanups bucket before removal.

npm run remove

> [email protected] remove
> sls remove

Removing guria-aws-js-practitioner from stage dev (us-east-1)

[Guria]

Direct access to s3 bucket content is not allowed:

Static website hosting  Enabled
Hosting type            Bucket hosting
Bucket website endpoint http://guria-aws-js-practitioner-dev.s3-website-us-east-1.amazonaws.com

http://guria-aws-js-practitioner-dev.s3-website-us-east-1.amazonaws.com