Publish Clockface to Cloudfront

[hoorayimhelping]

Adding Clockface to our edge CDN should speed up donwloads and increase cacheability.

Currently Clockface publishes index.js and index.css and Roboto and icomoon webfonts. These files need to be added to the CDN on publish, and pulled down as CDN dependencies (rather than imported and bundled together in the app bundle) in our various apps.

For this, Auth0 should be the app that proves the concept. We can take our learnings (if any) from hooking up Auth0 and apply them to other apps like InfluxDB.

[tkyocum]

For the 4 identified elements, where are they publicly available? We'll need a static location for each element that we want to be cached across CDN nodes.

[hoorayimhelping]

Each app that needs to use Clockface includes it as an npm/yarn dependency (cloud 2 marks it as a ui dependency in package.json). So Clockface is deployed to production as part of an app bundle.

When we 'release' clockface, we publish the library to npm using a publish script.

[tkyocum]

Docs:

• Uploading objects
• Invalidating files

Suggestions for deployment scripting:

• Push content via s3 or s3cmd like this: s3cmd --acl-public --delete-removed --no-progress sync content/* s3://assets.influxdata.com
• Invalidate replaced content via aws cli like this: aws cloudfront create-invalidation --distribution-id E7U3ELRZ6ZGNT --paths "/*" (if you only replace a few files, you may want to adjust --paths to only invalidate the updates files. for small distributions, it's not a big deal to invalidate everything.)

Nitpicky details for future reference/troubleshooting:

• Distribution ID: E7U3ELRZ6ZGNT
• Bucket: assets.influxdata.com in the Cloud 2.0 AWS Prod account
• SSL is managed via AWS cert manager within Cloud 2.0 AWS Prod account, and will renew automatically
• Credentials to be communicated out of band

How to test whether something is served from CDN or not:

Here are two cURL requests for the same object. Note the "x-cache" header. The first request is a miss, meaning the object was fetched from the S3 bucket. The second request was a hit, meaning it was served directly from Cloudfront.

tim@moomin:~$ curl -I https://assets.influxdata.com/index.html
HTTP/2 200
content-type: text/html
content-length: 6
date: Tue, 04 Feb 2020 17:39:26 GMT
last-modified: Tue, 04 Feb 2020 17:38:43 GMT
etag: "b1946ac92492d2347c6235b4d2611184"
accept-ranges: bytes
server: AmazonS3
x-cache: Miss from cloudfront
via: 1.1 af5cdbeee0d74dc841ba3e8c1801409b.cloudfront.net (CloudFront)
x-amz-cf-pop: ORD52-C2
x-amz-cf-id: VCz1vy3-Al7yLlNLdTxmVGJdMN-IBxvB_wO3jwGp6KX1YBWOojksGQ==

tim@moomin:~$ curl -I https://assets.influxdata.com/index.html
HTTP/2 200
content-type: text/html
content-length: 6
date: Tue, 04 Feb 2020 17:39:26 GMT
last-modified: Tue, 04 Feb 2020 17:38:43 GMT
etag: "b1946ac92492d2347c6235b4d2611184"
accept-ranges: bytes
server: AmazonS3
x-cache: Hit from cloudfront
via: 1.1 af5cdbeee0d74dc841ba3e8c1801409b.cloudfront.net (CloudFront)
x-amz-cf-pop: ORD52-C2
x-amz-cf-id: XVA4xrxGf08PGZCJw6lgfZTJOex-q9YAesk5ipERyLRGYEPILSOMOQ==
age: 2