From 1b5e6174f163eac5b602394d16056f8cd93569ea Mon Sep 17 00:00:00 2001 From: mngshm Date: Tue, 17 Dec 2024 15:13:53 +0530 Subject: [PATCH 1/4] [docs][web-app]: rewrite web-app hosting guide --- docs/docs/self-hosting/guides/web-app.md | 282 +++++++++++++++++++---- 1 file changed, 241 insertions(+), 41 deletions(-) diff --git a/docs/docs/self-hosting/guides/web-app.md b/docs/docs/self-hosting/guides/web-app.md index 28802c457d4..5d635118d4c 100644 --- a/docs/docs/self-hosting/guides/web-app.md +++ b/docs/docs/self-hosting/guides/web-app.md @@ -17,47 +17,247 @@ 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. + +```sh +# Build the image +docker build -t : --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: # 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 +``` + +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 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 way +runs them in a static way. + +### 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 customized the ports). +The web server of choice in this guide is [Caddy](https://caddyserver.com) because +with caddy you don't have to configure/setup SSL ceritifcates as caddy will manage 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 +} +doesn't work. The +# 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. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 956e74533e390427d79b84ee73ccbacc003fe68e Mon Sep 17 00:00:00 2001 From: mngshm Date: Tue, 17 Dec 2024 15:14:58 +0530 Subject: [PATCH 2/4] fix: remove commented guide --- docs/docs/self-hosting/guides/web-app.md | 46 ------------------------ 1 file changed, 46 deletions(-) diff --git a/docs/docs/self-hosting/guides/web-app.md b/docs/docs/self-hosting/guides/web-app.md index 5d635118d4c..7ca6b1b561b 100644 --- a/docs/docs/self-hosting/guides/web-app.md +++ b/docs/docs/self-hosting/guides/web-app.md @@ -215,49 +215,3 @@ sudo systemctl start caddy 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. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From 2f3f48f4db561179fa4b2b2367bfa52a58b78cae Mon Sep 17 00:00:00 2001 From: mngshm Date: Tue, 17 Dec 2024 17:08:54 +0530 Subject: [PATCH 3/4] remove: unintended copy-pasted text --- docs/docs/self-hosting/guides/web-app.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/docs/self-hosting/guides/web-app.md b/docs/docs/self-hosting/guides/web-app.md index 7ca6b1b561b..e235435c83d 100644 --- a/docs/docs/self-hosting/guides/web-app.md +++ b/docs/docs/self-hosting/guides/web-app.md @@ -197,7 +197,6 @@ photos.yourdomain.com { auth.yourdomain.com { reverse_proxy http://localhost:3002 } -doesn't work. The # and so on ... ``` From d66aa25ee7c25a54abcdaaeadff701ec391f9d9d Mon Sep 17 00:00:00 2001 From: mngshm Date: Wed, 18 Dec 2024 10:21:25 +0530 Subject: [PATCH 4/4] fix: minor typos and some additions --- docs/docs/self-hosting/guides/web-app.md | 25 +++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/docs/docs/self-hosting/guides/web-app.md b/docs/docs/self-hosting/guides/web-app.md index e235435c83d..ace5ae6382e 100644 --- a/docs/docs/self-hosting/guides/web-app.md +++ b/docs/docs/self-hosting/guides/web-app.md @@ -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 --- @@ -21,7 +21,7 @@ This is fine for trying the web app and verifying that your self-hosted server i 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. -## With Docker/Docker Compose ~Recommended~ +## With Docker/Docker Compose (Recommended) > [!IMPORTANT] > @@ -85,6 +85,9 @@ Lets build a Docker image from the above Dockerfile. Copy and paste the above Do 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 : --no-cache --progress plain . @@ -121,12 +124,15 @@ 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 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 way -runs them in a static way. +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 ``` @@ -185,9 +191,10 @@ 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 customized the ports). +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 configure/setup SSL ceritifcates as caddy will manage that. +with caddy you don't have to manually configure/setup SSL ceritifcates as caddy +will take care of that. ```sh photos.yourdomain.com {