MDN interactive examples S3/Cloudfront hosting

[bookshelfdave]

https://github.com/mdn/interactive-examples/issues/54#issuecomment-315131908

Note for @metadave

[bookshelfdave]

let's discuss infrastructure provisioning here: cc @jwhitlock @schalkneethling @jgmize @pmac

[bookshelfdave]

Info we'll need:

• [x] domain: interactive-examples.mdn.mozilla.net
• [x] ACM certificate
• [x] Cloudfront/S3 automation (public)
• [x] IAM role automation (private)

[pmac]

Just a note:

On bedrock we've chosen to assign a CNAME to any *.moz.works resources we need for a couple reasons:

1. It's more obvious that the requests to this resource are 1st party and mozilla owned if it's a *.mozilla.net address.
2. You'll likely already need *.mozilla.net in a CSP if you have or will have one, so that's one less domain to have in the policy.

These are not deal-breakers, but are considerations for which domains to use for such things. I'll also add that we should not use *.mozilla.org for these to avoid cross-domain cookie security issues.

[bookshelfdave]

@jwhitlock @jgmize @schalkneethling what domain should we use? (also, see @pmac's comment above)

[schalkneethling]

There is a mdn.mozillademos.org that might be an option?

[bookshelfdave]

There is also this MDN infra issue related to mdn.mozillademos.org.

[jwhitlock]

We can't reuse mdn.mozillademos.org, and shouldn't - it's already doing two things when it should just do one.

One option is a subdomain, like interactive-examples.mdn.mozillademos.org, that is just this project. WebOps still owns that domain, but they are very fast (less than 15 minutes) to add DNS entries.

Another options is something like interactive-examples.mdn.mozilla.net. I imagine it has the same issues, that WebOps owns mozilla.net, but it would set a new example. mdn.mozilla.net would be a decent source domain for server emails as well.

[bookshelfdave]

@jgmize (via IRC) suggested to create interactive-examples.mdn.moz.works in route53 and then file a bug with webops requesting that they create a CNAME record for interactive-examples.mdn.mozilla.net.

[bookshelfdave]

My vote is that *.mdn.mozilla.net may look less suspicious to outside users than *.mozillademos.org

[bookshelfdave]

These resources have been provisioned, but DNS and Jenkins need to be updated.

[bookshelfdave]

DNS change requested here

[bookshelfdave]

https://interactive-examples.mdn.moz.works/ is working (this is more of a "behind the scenes" domain), I need to update Jenkins to push to the S3 bucket.

[bookshelfdave]

wip (w/out irc notifications) here

[bookshelfdave]

https://github.com/mdn/interactive-examples/pull/149

[bookshelfdave]

https://interactive-examples.mdn.mozilla.net/ is now live.

@schalkneethling @jwhitlock let me know if you have any questions.

[jwhitlock]

Thanks @metadave!

This seems to work: https://interactive-examples.mdn.mozilla.net/live-examples/js-examples/array-find.html

And this: https://interactive-examples.mdn.mozilla.net/pages/css/border-style.html

The project could probably use some index documents, so that https://interactive-examples.mdn.mozilla.net isn't just an error, and you can navigate to the examples during development. But that's a different issue...

[schalkneethling]

Thought I asked this question but, seems I did not ;p Now that we have CloudFront configured with the interactive examples, how do we cache bust? Does it automatically do that whenever a merge to master happens? i.e. this would trigger a push from Tavis to the prod branch @metadave @jwhitlock

[bookshelfdave]

@schalkneethling Cloudfront ttl is currently set to 60 seconds, so a push will show up after this short delay (plus whatever "magic" Cloudfront does behind the scenes). We can also look into cache invalidation at some point in the future if more control is needed.

[schalkneethling]

@metadave Thx. That is totally reasonable. I doubt that it will ever cause an issue.