Skip to content
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

Web deployment #693

Merged
merged 4 commits into from
Mar 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
If you just want to run ente locally or develop on it, you can do

yarn
yarn dev:photos
yarn dev

The docs in this directory are for more advanced or infrequently needed details.
66 changes: 32 additions & 34 deletions web/docs/deploy.md
Original file line number Diff line number Diff line change
@@ -1,44 +1,39 @@
# Deploying the web apps

The various web apps (Ente Photos, Ente Auth) are deployed on Cloudflare Pages.
They also use Cloudflare Workers for some tasks.

This repository deploys multiple different apps (the Photos app, the Auth app).
Some of them get deployed to multiple different endpoints (e.g. the main branch
of photos app gets deployed to testing.ente.io, the while the photos-release
branch is the production deployment).
## tl;dr;

The apps are under the app directory:
```sh
yarn deploy:photos
```

- photos - The Ente Photos app
- auth - The Ente Auth app
- cast - The cast app, which can be thought of as an independent subset of
Photos app functionality
- ... and more
## Details

For deploying, we've added the GitHub integration provided by Cloudflare Pages
app to this repository. This integration watches for pushes to all branches. In
all cases, it runs the same script, `scripts/deploy.sh`.
The various web apps (Ente Photos, Ente Auth) are deployed on Cloudflare Pages.

Internally it uses the `CF_PAGES_BRANCH` environment variable to decide what
exactly to build ([CF
The deployment is done using the GitHub app provided by Cloudflare Pages. The
Cloudflare integration watches for pushes to all branches named "deploy/*". In
all cases, it runs the same script, `scripts/deploy.sh`, using the
`CF_PAGES_BRANCH` environment variable to decide what exactly to build ([CF
docs](https://developers.cloudflare.com/pages/how-to/build-commands-branches/)).

Then, for some special branches, we have configured CNAME aliases (Cloudflare
calls them Custom Domains) to give a stable URL to some of these deployments
Here is a potentially out of date list of CNAMEs and the corresponding branch;
see the Cloudflare dashboard for the latest:
For each of these branches, we have configured CNAME aliases (Cloudflare calls
them Custom Domains) to give a stable URL to the deployments.

- _testing.ente.io_: `main`
- _web.ente.io_: `photos-release`
- _auth.ente.io_: `auth-release`
- _accounts.ente.io_: `accounts-release`
- _cast.ente.io_: `cast-release`
- `deploy/photos` → _web.ente.io_
- `deploy/auth` → _auth.ente.io_
- `deploy/accounts` → _accounts.ente.io_
- `deploy/cast` → _cast.ente.io_

Thus to trigger a, say, production deployment of the photos app, we can open and
merge a PR into the `photos-release` branch. Cloudflare will then build and
merge a PR into the `deploy/photos` branch. Cloudflare will then build and
deploy the code to _web.ente.io_.

The command `yarn deploy:photos` just does that - it'll open a new PR to fast
forward the current main onto `deploy/photos`. There are similar `yarn deploy:*`
commands for the other apps.

## Other subdomains

Apart from this, there are also some subdomains:

- `albums.ente.io` is a CNAME alias to the production deployment
Expand All @@ -49,14 +44,17 @@ Apart from this, there are also some subdomains:
- `payments.ente.io` and `family.ente.io` are currently in a separate
repositories (Enhancement: bring them in here).

In Cloudflare Pages setting the following environment variables are defined:
## NODE_VERSION

In Cloudflare Pages setting the `NODE_VERSION` environment variables is defined.

- `NODE_VERSION`: Determines which version of Node is used when we do `yarn
build:foo`. Currently this is set to `20.11.1`. The major version here should
match that of `@types/node` in our dev dependencies.
This determines which version of Node is used when we do `yarn build:foo`.
Currently this is set to `20.11.1`. The major version here should match that of
`@types/node` in our dev dependencies.

- `SENTRY_AUTH_TOKEN`: An encrypted environment variable that is used by the
Sentry Webpack Plugin to upload sourcemaps during the build.
It is a good idea to also use the same major version of node on your machine.
For example, for macOS you can install the the latest from the v20 series using
`brew install node@20`.

## Adding a new app

Expand Down
4 changes: 2 additions & 2 deletions web/docs/new.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ development, here is a recommended workflow:

3. Enable the VS Code setting to format on save.

4. Install node on your machine `brew install node`. Our package manager, `yarn`
comes with it.
4. Install node on your machine `brew install node@20`. Our package manager,
`yarn` comes with it.

That's it. Enjoy coding!
4 changes: 4 additions & 0 deletions web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
"build:auth": "yarn workspace auth next build",
"build:cast": "yarn workspace cast next build",
"build:photos": "yarn workspace photos next build",
"deploy:accounts": "open 'https://github.com/ente-io/ente/pull/new/deploy/accounts..main'",
"deploy:auth": "open 'https://github.com/ente-io/ente/pull/new/deploy/auth..main'",
"deploy:cast": "open 'https://github.com/ente-io/ente/pull/new/deploy/cast..main'",
"deploy:photos": "open 'https://github.com/ente-io/ente/pull/new/deploy/photos..main'",
"dev": "yarn dev:photos",
"dev:accounts": "yarn workspace accounts next dev",
"dev:albums": "yarn workspace photos next dev -p 3002",
Expand Down
25 changes: 18 additions & 7 deletions web/scripts/deploy.sh
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
#!/bin/sh

# This script is run by the Cloudflare Pages integration when deploying the apps
# in this repository. The app to build and the environment variables to use is
# decided based on the value of the CF_PAGES_BRANCH environment variable.
# in this repository. The app to build is decided based on the value of the
# CF_PAGES_BRANCH environment variable.
#
# The Cloudflare Pages build configuration is set to use `out/` as the build
# output directory, so once we're done building we copy the app specific output
Expand All @@ -12,29 +12,40 @@
#
# To test this script locally, run
#
# CF_PAGES_BRANCH=foo-bar ./scripts/deploy.sh
# CF_PAGES_BRANCH=deploy/foo ./scripts/deploy.sh
#

set -o errexit
set -o xtrace

if test "$(basename $(pwd))" != "web"
then
echo "ERROR: This script should be run from the web directory"
exit 1
fi

rm -rf out

case "$CF_PAGES_BRANCH" in
accounts-*)
deploy/accounts)
yarn build:accounts
cp -R apps/accounts/out .
;;
auth-*)
deploy/auth)
yarn build:auth
cp -R apps/auth/out .
;;
cast-*)
deploy/cast)
yarn build:cast
cp -R apps/cast/out .
;;
*)
deploy/photos)
yarn build:photos
cp -R apps/photos/out .
;;
*)
echo "ERROR: We don't know how to build and deploy a branch named $CF_PAGES_BRANCH."
echo " Maybe you forgot to add a new case in web/scripts/deploy.sh"
exit 1
;;
esac
Loading