Skip to content

/ react

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add scheduling profiler deployment CI job #19874

Merged
merged 6 commits into from Sep 22, 2020
Merged

Add scheduling profiler deployment CI job #19874

merged 6 commits into from Sep 22, 2020
+152 −3

Conversation

@taneliang
Copy link
Contributor

@taneliang taneliang commented Sep 21, 2020 •
edited

Summary

The scheduling profiler is currently still being deployed from the https://github.com/MLH-Fellowship/scheduling-profiler-prototype/ repository. This PR adds a CI job to deploy the scheduling profiler from master.

I've used the deprecated name property in vercel.json (https://vercel.link/name-prop) as I'm not sure how we can set the project's name when using the vercel link CLI command in CI.

Stacked on #19691.

Alternatives considered

  • Deploying using Vercel's GitHub integration. This will give us deploy previews. Unfortunately, their build environment doesn't have Java, and so we can't build React.
  • Making a bot that listens to GitHub check suite complete webhook events, then downloads and deploys the CI artifact. This is the approach we used to deploy another OSS project I'm working on. I've also heard of this approach being recommended in various places on the web. However, it seems like too much work for this profiler.

Pre-merge checklist

Post-merge checklist

  • Ensure scheduling profiler deploys correctly from master.
  • "Transfer" domains from the MLH Fellowship Vercel account.

Test Plan

  1. Test prod deployment: https://app.circleci.com/pipelines/github/taneliang/react/24/workflows/4e48ded3-6d39-47bd-b6a2-19941802ff08/jobs/125
    image

    I'll need to delete this deployment to release the domain, but this is what it looks like now:
    image

  2. Ensured Vercel token will not be exposed to PRs from forks: https://app.circleci.com/pipelines/github/taneliang/react/25/workflows/a3970596-db17-4fd8-8067-debfa83d20d6/jobs/128
    image
@taneliang
taneliang reviewed Sep 21, 2020
View changes
packages/react-devtools-scheduling-profiler/README.md
@@ -1,3 +1,15 @@
# Experimental React Concurrent Mode Profiler

- Deployed at: https://react-scheduling-profiler.vercel.app
https://react-devtools-scheduling-profiler.vercel.app/

This comment has been minimized.

Sign in to view
@taneliang

taneliang Sep 21, 2020
Author Contributor

I've updated the domain name to match the package's folder name, but it's a little long. @bvaughn do you have a preference?

This comment has been minimized.

Sign in to view
@bvaughn

bvaughn Sep 21, 2020
Contributor

Either domain sounds fine to me 😄

This comment has been minimized.

Sign in to view
@bvaughn

bvaughn Sep 21, 2020 •
edited
Contributor

Question: If this was working, would I expect to actually see a working deployment at react-devtools-scheduling-profiler.vercel.app (rather than 404: NOT_FOUND) Disregard.
@codesandbox
Copy link

@codesandbox codesandbox bot commented Sep 21, 2020 •
edited

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 38a15c7:

Sandbox Source
React Configuration
@taneliang
Copy link
Contributor Author

@taneliang taneliang commented Sep 21, 2020

Disabled the project on my CircleCI account. Closing and reopening to kick CI.
@taneliang taneliang closed this Sep 21, 2020
@taneliang taneliang reopened this Sep 21, 2020
@sizebot
Copy link

@sizebot sizebot commented Sep 21, 2020 •
edited

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 38a15c7

@sizebot
Copy link

@sizebot sizebot commented Sep 21, 2020 •
edited

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 38a15c7

@taneliang taneliang changed the title Add scheduling profiler deployment job to CI Add scheduling profiler deployment CI job Sep 21, 2020
@taneliang
Copy link
Contributor Author

@taneliang taneliang commented Sep 21, 2020

@bvaughn, would you mind setting up the deploy token environment variable in CircleCI? I've laid out the steps here: https://github.com/taneliang/react/blob/scheduling-profiler-deploy/packages/react-devtools-scheduling-profiler/README.md

I'm also not sure if we want to test the deployment before merging this PR, as that'll require exposing CI secrets to all jobs running from forks. I'm quite sure everything will work as I've tried it though.

Unrelated: I'll also rebase this on master since #19691 is merged.
@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Sep 21, 2020

Yes 👍 I'll do this after lunch.
taneliang added 4 commits Sep 21, 2020
@taneliang
Add vercel to scheduling profiler dev deps
Verified
This commit was signed with a verified signature.
taneliang E-Liang Tan
GPG key ID: 692BCC42C61FC9B2 Learn about signing commits
a047a89
@taneliang
Add vercel.json
Verified
This commit was signed with a verified signature.
taneliang E-Liang Tan
GPG key ID: 692BCC42C61FC9B2 Learn about signing commits
660f9fd
@taneliang
Add CD job
Verified
This commit was signed with a verified signature.
taneliang E-Liang Tan
GPG key ID: 692BCC42C61FC9B2 Learn about signing commits
ca69bac
@taneliang
Add CD setup instructions
Verified
This commit was signed with a verified signature.
taneliang E-Liang Tan
GPG key ID: 692BCC42C61FC9B2 Learn about signing commits
Loading status checks…
8f6e13a
@taneliang taneliang force-pushed the taneliang:scheduling-profiler-deploy branch from 20f6c91 to 8f6e13a Sep 21, 2020
@taneliang
taneliang reviewed Sep 21, 2020
View changes
packages/react-devtools-scheduling-profiler/README.md

These instructions are intended for internal use, but may be useful if you are setting up a custom production deployment of the scheduling profiler.

1. Create a Vercel token at https://vercel.com/account/tokens.

This comment has been minimized.

Sign in to view
@taneliang

taneliang Sep 21, 2020
Author Contributor

These tokens make me a little uneasy, as they allow access to the whole Vercel account and we can't scope them to a single project. I don't think there's any alternative though.
@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Sep 21, 2020

@bvaughn, would you mind setting up the deploy token environment variable in CircleCI? I've laid out the steps here:

@taneliang Done.
taneliang added 2 commits Sep 22, 2020
@taneliang
Attempt to deploy from this fork (should fail)
Verified
This commit was signed with a verified signature.
taneliang E-Liang Tan
GPG key ID: 692BCC42C61FC9B2 Learn about signing commits
Loading status checks…
fda8027
@taneliang
Revert "Attempt to deploy from this fork (should fail)"
Verified
This commit was signed with a verified signature.
taneliang E-Liang Tan
GPG key ID: 692BCC42C61FC9B2 Learn about signing commits
Loading status checks…
38a15c7 
This reverts commit fda8027.
@taneliang
Copy link
Contributor Author

@taneliang taneliang commented Sep 22, 2020

Thanks @bvaughn!

I've just tried deploying from this fork, and the deployment failed as expected because I can't access the deploy token. https://app.circleci.com/pipelines/github/facebook/react/5074/workflows/7269c720-0dd2-4164-9ff5-b9c2d70b8687/jobs/211378

Looks like this is ready for a review/merge, unless we want to do a test deployment first.
@bvaughn
bvaughn approved these changes Sep 22, 2020
View changes
Copy link
Contributor

@bvaughn bvaughn left a comment

Ok. Let's give it a try then. 😁
@bvaughn bvaughn merged commit 04e21ef into facebook:master Sep 22, 2020
34 checks passed
34 checks passed
Facebook CLA Check Contributor License Agreement is valid!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_build Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_lint_build Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_build Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_build_prod Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_dom_fixtures Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_persistent Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_prod Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_prod_www Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_prod_www_variant Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_www Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_www_variant Your tests passed on CircleCI!
Details
ci/circleci: build_devtools_and_process_artifacts Your tests passed on CircleCI!
Details
ci/circleci: build_devtools_scheduling_profiler Your tests passed on CircleCI!
Details
ci/circleci: process_artifacts Your tests passed on CircleCI!
Details
ci/circleci: process_artifacts_experimental Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: sizebot_experimental Your tests passed on CircleCI!
Details
ci/circleci: sizebot_stable Your tests passed on CircleCI!
Details
ci/circleci: yarn_build Your tests passed on CircleCI!
Details
ci/circleci: yarn_flow Your tests passed on CircleCI!
Details
ci/circleci: yarn_lint Your tests passed on CircleCI!
Details
ci/circleci: yarn_lint_build Your tests passed on CircleCI!
Details
ci/circleci: yarn_test Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build_devtools Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build_prod Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_prod Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_prod_www Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_prod_www_variant Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_www Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_www_variant Your tests passed on CircleCI!
Details
ci/codesandbox Building packages succeeded.
Details
@taneliang taneliang deleted the taneliang:scheduling-profiler-deploy branch Sep 22, 2020
@taneliang
Copy link
Contributor Author

@taneliang taneliang commented Sep 22, 2020

It works! 🎉 https://react-devtools-scheduling-profiler.vercel.app/

image

When will it be a good time to transfer the domains? I'll need to delete the domains off the MLH Fellowship Vercel account before you can add them, but that'll break the old domains until they're added to your account :)
@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Sep 22, 2020

Excellent 😁 Great work!

We could transfer them now. I'm not sure what's required on my end though. 😅 I haven't used Vercel much.
@taneliang
Copy link
Contributor Author

@taneliang taneliang commented Sep 22, 2020

Ah! It's pretty simple:

  1. At https://vercel.com/bvaughn/react-devtools-scheduling-profiler/settings/domains, just add these domains:
    • react-scheduling-profiler.vercel.app
    • scheduling-profiler-prototype.vercel.app (the first domain that was publicized within FB)
    • react-concurrent-mode-profiler.vercel.app (I was just squatting on it in case we wanted to use that)
  2. Set redirects on the secondary domains:
    image

That's it! The end result should look something like this:

image
@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Sep 22, 2020

Ok. Let's do it. (Looks like I can't add them yet.)
@taneliang
Copy link
Contributor Author

@taneliang taneliang commented Sep 22, 2020

Oops, just deleted them a second ago. Does it work now?
@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Sep 22, 2020

Hm. I was able to add scheduling-profiler-prototype.vercel.app but not the other two.
@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Sep 22, 2020

Ok just got react-scheduling-profiler.vercel.app
@taneliang
Copy link
Contributor Author

@taneliang taneliang commented Sep 22, 2020

Huh okay, looks like it's because I was holding on to their *.now.sh versions. The last one should work now
@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Sep 22, 2020

Got 'em all! Thanks
@taneliang
Copy link
Contributor Author

@taneliang taneliang commented Sep 22, 2020 •
edited

Awesome! 😄 I've moved the original MLH deployment to https://mlh-react-scheduling-profiler.vercel.app/ in case we need it.

cc @kartikcho
@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Sep 22, 2020

Thanks a bunch! 🙇
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bvaughn bvaughn

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants
@taneliang @sizebot @bvaughn @facebook-github-bot
You can’t perform that action at this time.