Skip to content

Commit

Permalink
[docs][web-app]: rewrite web-app hosting guide (#4424)
Browse files Browse the repository at this point in the history 
rewrites the web-app hosting guide on help.ente.io/self-hosting.
Includes steps for building the Dockerfile and also additionally
includes the pm2 setup, perhaps Docker is marked "Recommended" to avoid
unnecessary variables which "might" (likely won't) show up in the pm2
setup.
  • Loading branch information
@mngshm
mngshm authored Dec 18, 2024
2 parents 7cf7443 + d66aa25 commit 40d938b
Showing 1 changed file with 203 additions and 43 deletions.
246 changes: 203 additions & 43 deletions docs/docs/self-hosting/guides/web-app.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Hosting the web app
title: Hosting the web apps
description:
Building and hosting Ente's web app, connecting it to your self-hosted
Building and hosting Ente's web apps, connecting it to your self-hosted
server
---

Expand All @@ -17,47 +17,207 @@ yarn install
NEXT_PUBLIC_ENTE_ENDPOINT=http://localhost:8080 yarn dev:photos
```

This is fine for trying this out and verifying that your self-hosted server is
working correctly etc. But if you would like to use the web app for a longer
term, then it is recommended that you use a production build.
This is fine for trying the web app and verifying that your self-hosted server is
working as expected etc. But if you would like to use the web app for a longer term,
then it is recommended to follow the Docker approach.

To create a production build, you can run the same process, but instead do a
`yarn build` (which is an alias for `yarn build:photos`). For example,
## With Docker/Docker Compose (Recommended)

> [!IMPORTANT]
>
> This docker image is still in testing stage and it might show up with some
> variables in different scenarios. But this image has been tested on a production
> ente site.
>
> Recurring changes might be made by the team or from community if more
> improvements can be made.
```dockerfile
FROM node:20-bookworm-slim as builder

WORKDIR ./ente

COPY . .
COPY apps/ .

# Will help default to yarn versoin 1.22.22
RUN corepack enable

RUN yarn cache clean
RUN yarn install --network-timeout 1000000000
RUN yarn build:photos && yarn build:auth && yarn build:accounts && yarn build:cast

FROM node:20-bookworm-slim

WORKDIR /app

COPY --from=builder /ente/apps/photos/out /app/photos
COPY --from=builder /ente/apps/accounts/out /app/accounts
COPY --from=builder /ente/apps/auth/out /app/auth
COPY --from=builder /ente/apps/cast/out /app/cast

RUN npm install -g serve

ENV PHOTOS=3000
EXPOSE ${PHOTOS}

ENV ACCOUNTS=3001
EXPOSE ${ACCOUNTS}

ENV AUTH=3002
EXPOSE ${AUTH}

ENV CAST=3003
EXPOSE ${CAST}

CMD ["sh", "-c", "serve /app/photos -l tcp://0.0.0.0:${PHOTOS} & serve tcp://0.0.0.0:${ACCOUNTS} -l /app/accounts & server tcp://0.0.0.0:${AUTH} -l /app/auth & server -l tcp://0.0.0.0:${CAST} & serve /app/cast]
```
The above is a multi-stage Dockerfile which creates a production ready static output
of the 4 apps (Photos, Accounts, Auth and Cast) and serves the static content with
Caddy.
Looking at 2 different node base-images doing different tasks in the same Dockerfile
would not make sense, but the Dockerfile is divided into two just to improve the build
efficiency as building this Dockerfile will arguably take more time.
Lets build a Docker image from the above Dockerfile. Copy and paste the above Dockerfile
contents in the root of your web directory which is inside `ente/web`. Execute the
below command to create an image from this Dockerfile.
You can always edit the Dockerfile and remove the steps for apps which you do not
intend to install on your system (like auth or cast) and opt out of it.
```sh
# Build the image
docker build -t <image-name>:<tag> --no-cache --progress plain .
```
## compose.yaml
Moving ahead, we need to paste the below contents into the compose.yaml inside
`ente/server/compose.yaml` under the services section.
```yaml
ente-web:
image: <image-name> # name of the image you used while building
ports:
- 3000:3000
- 3001:3001
- 3002:3002
- 3003:3003
environment:
- NODE_ENV=development
restart: always
```
Now, we're good to go. All we are left to do is start the containers.
```sh
docker compose up -d # --build
# Accessing the logs
docker compose logs <container-name>
```
Next part is to configure a [web server](#web-server-configuration).
## Without Docker / Docker compose
One way to run all the apps together without Docker is by using [PM2](https://pm2.keymetrics.io/)
in this setup. The configuration and usage is very simple and just needs one
configuration file for it. You can run the apps both in dev server mode as
well as static files.
The below configuration will run the apps in dev server mode.
### Install PM2
```sh
npm install pm2@latest
```
Copy the below contents to a file called `ecosystem.config.js` inside the `ente/web`
directory.
```js
module.exports = {
apps: [
{
name: "photos",
script: "yarn workspace photos next dev",
env: {
NODE_ENV: "development",
PORT: "3000"
}
},
{
name: "accounts",
script: "yarn workspace accounts next dev",
env: {
NODE_ENV: "development",
PORT: "3001"
},
{
name: "auth",
script: "yarn workspace auth next dev",
env: {
NODE_ENV: "development",
PORT: "3002"
}
},
{
name: "cast",
script: "yarn workspace cast next dev",
env: {
NODE_ENV: "development",
PORT: "3003"
}
}
]
};
```
Finally, start pm2.
```sh
pm2 start
# for logs
pm2 logs all
```
# Web server configuration
The last step ahead is configuring reverse_proxy for the ports on which the
apps are being served (you will have to make changes, if you have cusotmized the ports).
The web server of choice in this guide is [Caddy](https://caddyserver.com) because
with caddy you don't have to manually configure/setup SSL ceritifcates as caddy
will take care of that.
```sh
NEXT_PUBLIC_ENTE_ENDPOINT=http://localhost:8080 yarn build:photos
```

This creates a production build, which is a static site consisting of a folder
of HTML/CSS/JS files that can then be deployed on any standard web server.

Nginx is a common choice for a web server, and you can then put the generated
static site (from the `web/apps/photos/out` folder) to where nginx would serve
them. Note that there is nothing specific to nginx here - you can use any web
server - the basic gist is that yarn build will produce a web/apps/photos/out
folder that you can then serve with any web server of your choice.

If you're new to web development, you might find the [web app's README], and
some of the documentation it its source code -
[docs/new.md](https://github.com/ente-io/ente/blob/main/web/docs/new.md),
[docs/dev.md](https://github.com/ente-io/ente/blob/main/web/docs/dev.md) -
useful. We've also documented the process we use for our own production
deploypments in
[docs/deploy.md](https://github.com/ente-io/ente/blob/main/web/docs/deploy.md),
though be aware that that is probably overkill for simple cases.

## Using Docker

We currently don't offer pre-built Docker images for the web app, however it is
quite easy to build and deploy the web app in a Docker container without
installing anything extra on your machine. For example, you can use the
dockerfile from this
[discussion](https://github.com/ente-io/ente/discussions/1183), or use the
Dockerfile mentioned in the
[notes](https://help.ente.io/self-hosting/guides/external-s3) created by a
community member.

## Public sharing

If you'd also like to enable public sharing on the web app you're running,
please follow the [step here](https://help.ente.io/self-hosting/faq/sharing).
photos.yourdomain.com {
reverse_proxy http://localhost:3001
}
auth.yourdomain.com {
reverse_proxy http://localhost:3002
}
# and so on ...
```
Next, start the caddy server :).
```sh
# If caddy service is not enabled
sudo systemctl enable caddy
sudo systemctl daemon-reload
sudo systemctl start caddy
```
## Contributing
Please start a discussion on the Github Repo if you have any suggestions for the Dockerfile,
You can also share your setups on Github Discussions.

0 comments on commit 40d938b

Please sign in to comment.