How to deploy NextJs app via cloudron to the subdomain?

[Oleksii909]

I have NextJs application wich is built to fetch data from directus backend app via API the NextJs app is working fine on my local machine. I need to delivery that app to the subdomain using cloudron service to be hosted on my Ubuntu AWS Lightsail instance.

Please help me how to achieve that? I can't understand if it could be done using the repository: https://git.cloudron.io/cloudron/tutorial-typescript-app

Any help or advice would be highly appreciated

[nebulon]

Currently there is no deployment endpoint of any kind for specific frameworks like nextjs. For such cases you would have to build a custom app package https://docs.cloudron.io/packaging/tutorial/

We have thought of maybe providing an app, which could act as a nextjs deployment endpoint, however this is not our main focus to be a developer/deployment platform.

But would be great if others here could contribute if it would be generally useful to add and also what the expectations for this feature would be.

[klawitterb]

I’m building a nuxt.js app myself (same as next but for vue). I find it relatively easy to build a custom docker image for cloudron. Using gitlab + gitlab runner on cloudron to build the app and push a docker image to the internal docker registry and deploy it from there to cloudron. Even got 2 versions of the app running for some test staging.

[Oleksii909]

I was able to deploy with cloudron my nextjs frontend app fetching my directus backend via API here is the repository with STEP-BY-STEP guide: https://github.com/alexmazaltov/nextjs-app-for-directus-vai-cloudron

@klawitterb May i ask you to share your code?

[klawitterb]

My code might be a bit to specific for my way of doing it, but I can try to give more details when I find the time.

[klawitterb]

So here's a little sum up how I do it:

1. Create dockerfile

ARG nodeversion=21-bullseye

# build stage using standard node container
FROM docker.io/node:$nodeversion AS builder

WORKDIR /app

# copy & install dependencies
COPY package.json yarn.lock .yarnrc.yml ./
COPY .yarn/ .yarn
RUN yarn install
# copy source code & build
COPY . .
ENV NODE_ENV=production
RUN yarn build --standalone 

# use cloudron base image for running the app
FROM docker.io/cloudron/base:4.0.0@sha256:31b195ed0662bdb06a6e8a5ddbedb6f191ce92e8bee04c03fb02dd4e9d0286df

WORKDIR /app
ENV NODE_ENV=production

# copy built files
COPY --from=builder ./app/.output ./.output/
# start script for execution of the app, make sure its executable
COPY --from=builder ./app/start.sh ./
RUN chmod +x /app/start.sh

# set the port and host and expose the port
ENV HOST 0.0.0.0
ENV PORT 8000
EXPOSE 8000

# start the app using start script
CMD [ "/app/start.sh"]

2. Create start.sh

#!/bin/bash

set -eu

# set any environment variables here, e.g. database connection details

# run the server
node .output/server/index.mjs

3. Create CloudronManifest.json
   Nothing special here, follow documentation from Cloudron, set app details, add addons, set exposed port, etc.
4. Create CI/CD pipeline
   This depends a bit on your runner setup, I'm using a custom gitlab runner package on Cloudron I build for myself + the cloudron build service app. This has some quirks but works for me. Its a docker in docker runner but without access to the docker.sock its not possible to run docker commands itself (or at least didn't figure out how). Normally you'd need access to the docker.sock which is not possible with app packages and a security risk.
   Nevertheless here's a sample of my .gitlab-ci.yml

stages:
  - stage

deploy_stage:
  stage: stage
  image: node:19
  environment:
    name: STAGE
  variables:
    BUILD_SERVICE: 'https://builderbot.serverdomain.de'
    FQ_IMAGE_NAME: 'docker.serverdomain.de/imagepath'
    TAG: pre
  only:
    - main
  script:
    - npm install -g cloudron
    - cloudron build --tag $TAG --set-build-service $BUILD_SERVICE --set-repository $FQ_IMAGE_NAME --build-service-token $CI_BUILD_SERVICE_TOKEN
    - cloudron update --server my.serverdomain.de --token $CI_CLOUDRON_TOKEN --app appsubdomain.serverdomain.de --image docker.serverdomain.de/imagepath:$TAG
    #- cloudron install --server my.serverdomain.de --token $CI_CLOUDRON_TOKEN --location appsubdomain.serverdomain.de --image docker.serverdomain.de/imagepath:$TAG

For first run you need to use install cli cmd and afterwards update. Hence I always keep it commented out in the pipeline in case I need to reinstall the app from scratch. A combined command for this would be brilliant *hint *hint @girish

Apart from that there's a little more to it in terms of one time setup which I ommited:

• Setup private docker registry in Cloudron (alternative use a public registry)
• Register the gitlab runner in gitlab
• Setup secrets in gitlab, e.g. Cloudron access tokens
• might be more I've forgotten, as always once setup things get blurry in memory