mirror of
https://github.com/ente-io/ente.git
synced 2025-08-08 07:28:26 +00:00
[docs][web-app]: rewrite web-app hosting guide
This commit is contained in:
mngshm
parent
431ad61ca2
commit
1b5e6174f1
@ -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~
|
||||
|
||||
```sh
|
||||
NEXT_PUBLIC_ENTE_ENDPOINT=http://localhost:8080 yarn build:photos
|
||||
> [!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]
|
||||
```
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
## Using Docker
|
||||
```sh
|
||||
# Build the image
|
||||
docker build -t <image-name>:<tag> --no-cache --progress plain .
|
||||
```
|
||||
|
||||
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.
|
||||
## compose.yaml
|
||||
|
||||
## Public sharing
|
||||
Moving ahead, we need to paste the below contents into the compose.yaml inside
|
||||
`ente/server/compose.yaml` under the services section.
|
||||
|
||||
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).
|
||||
```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 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
|
||||
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.
|
||||
|
||||
<!-->
|
||||
<!--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.-->
|
||||
<!---->
|
||||
<!--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,-->
|
||||
<!---->
|
||||
<!--```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).-->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user