How to run frontent(nextjs) and appwrite(backend) on the same vps server?

I installed appwrite on VPS with standart 80 and 443 ports _APP_DOMAIN=appwrite.mydom.com _APP_DOMAIN_TARGET=mydom.com

before i had nextjs13 app on mydom.com launched with caddy.server mydom.com { reverse_proxy localhost:3000} which fetched data from appwrite via node-appwrite

Now I can't set up both nextjs13 and appwrite on the same vps machine if I change the default appwrite ports 80 and 443 to run nextjs13 on mydom.com without any problems, then I lose the ability to contact appwrite due to ssl errors. I can't figure out how to get nextjs13 to work with ssl on mydom.com along with appwrite Please help

_APP_DOMAIN and _APP_DOMAIN_TARGET usually have the same value As they both meant to be used to Appwrite

If you want to have another app - nextjs in your case - on the same server then you'll need to edit to docker-compose file and adjust the traefik values

The quickest solution will be to have two different servers. but if you want to have them both it's also an option.

Are you familiar with those tasks?

I don't have the option to use two servers, only one. Can you tell me exactly what I need to change? my docker knowledge level is minimal

Okay, I'll try Be sure to back anything before In a sec I will write you a method that worked for me

How did you installed Appwrite? Using some installer or manual?

docker run -it --rm
\ --volume /var/run/docker.sock:/var/run/docker.sock
\ --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw
\ --entrypoint="install"
\ appwrite/appwrite:1.3.4

Good

One more question

How you ran your nextjs project?

I usually have caddy.server installed, I run pnpm buld and pnpm start. Caddy installs let's encrypt and makes mydom.com available

If you can help me I appreciate it

Of course

In a few minutes

From what I see now Caddy would be a bit diffcult to achieve

Anyhow this is the directon

So, Appwrite used Traefik to route the traffic into the server. As of now all the traffic will be route to your Appwrite server (Swoole) no matter what.

What you need to do is to add another docker container that will point to your nextjs project. Then add it to Appwrite network, and assign the right domain to it.

Set both of these value to your Appwrite only

_APP_DOMAIN=appwrite.mydom.com _APP_DOMAIN_TARGET=appwrite.mydom.com

I'll assume your domain is example.com

Next JS files location Put all your next js files inside a known location in your linux system For example /root/app/data

Add Compose file Inside /root/app create another file docker-compose.yml

And add this content

version: '3'

services:
  caddy:
    image: caddy/caddy:2.6.4-alpine
    container_name: caddy-service
    restart: unless-stopped
    volumes:
      - /root/app/Caddyfile:/etc/caddy/Caddyfile
      - /root/app/data:/srv
      - caddy_data:/data
      - caddy_config:/config
    networks:
      - appwrite
    labels:
      - traefik.enable=true
      - traefik.constraint-label-stack=appwrite
      - traefik.docker.network=appwrite

      - traefik.http.services.app.loadbalancer.server.port=80
      - traefik.http.routers.app-http.entrypoints=appwrite_web
      - traefik.http.routers.app-http.rule=Host(`example.com`)
      - traefik.http.routers.app-http.service=app

      - traefik.http.services.apps.loadbalancer.server.port=443
      - traefik.http.routers.app-https.entrypoints=appwrite_websecure
      - traefik.http.routers.app-https.rule=Host(`example.com`)
      - traefik.http.routers.app-https.service=apps
      - traefik.http.routers.app-https.tls=true

  pnpm-app:
    image: node:18-bullseye
    container_name: pnpm-app
    restart: unless-stopped
    environment:
      - NODE_ENV=production
    volumes:
      - /root/app/data:/usr/src/app
    command: bash -c "cd /usr/src/app && npm ci && npm start"
    networks:
      - appwrite


networks:
  appwrite:
    name: appwrite_appwrite
    external: true

volumes:
  caddy_data:
  caddy_config:

Appwrite network is external so be sure that Appwrite is already on.

Add Caddyfile Inside /root/app create another file named Caddyfile And add this content

example.com {
   reverse_proxy pnpm-app:3000  {
    header_down Strict-Transport-Security max-age=31536000;
   }
}

This will let you run both Appwrite and any other external application.

When everything is set run docker compose up -d in the new directory.

FYI there is a better way to this, But imo this would be the quick way to achieve it, and if you want to have better experience you can explore another ways to do so.

Do notice I've used npm in the example.

If you want the other options I think you should check A. Create reverse proxy with NGINX and manual certbot ssl B. Just exposed the node directly and you can achieve free SSL with cloudflare for example I can show the files in this use case

C. Two servers.

As always, if this is a production, or important data I recommend to run backups before.

Thank you very much, I understand which way to look. I will try this