Deploy your Astro Site to Zerops

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import { Steps } from '@astrojs/starlight/components';

Zerops is a dev-first cloud platform that can be used to deploy both Static and SSR Astro site.

This guide will walk you through setting up and deploying both Static and SSR Astro sites on Zerops.

:::tip[Astro x Zerops Quickrun]

Want to test running Astro on Zerops without installing or setting up anything? Using repositories Zerops x Astro - Static or Zerops x Astro - SSR on Node.js you can deploy example Astro site with a single click.

:::

Running apps on Zerops requires two steps:

Creating a project
Triggering build & deploy pipeline

:::note One Zerops project can contain multiple Astro sites. :::

Astro Static site on Zerops

Creating a project and a service for Astro Static

Projects and services can be added either through a Project add wizard or imported using a yaml structure:

yaml

# see https://docs.zerops.io/references/import for full reference
project:
  name: recipe-astro
services:
  - hostname: app
    type: static

This will create a project called recipe-astro with a Zerops Static service called app.

Deploying your Astro Static site

To tell Zerops how to build and run your site, add a zerops.yml to your repository:

<PackageManagerTabs> <Fragment slot="npm"> ```yaml title="zerops.yml" # see https://docs.zerops.io/zerops-yml/specification for full reference zerops: - setup: app build: base: nodejs@20 buildCommands: - npm i - npm build deployFiles: - dist/~ run: base: static ``` </Fragment> <Fragment slot="pnpm"> ```yaml title="zerops.yml" # see https://docs.zerops.io/zerops-yml/specification for full reference zerops: - setup: app build: base: nodejs@20 buildCommands: - pnpm i - pnpm build deployFiles: - dist/~ run: base: static ``` </Fragment> <Fragment slot="yarn"> ```yaml title="zerops.yml" # see https://docs.zerops.io/zerops-yml/specification for full reference zerops: - setup: app build: base: nodejs@20 buildCommands: - yarn - yarn build deployFiles: - dist/~ run: base: static ``` </Fragment> </PackageManagerTabs>

Now you can trigger the build & deploy pipeline using the Zerops CLI or by connecting the app service with your GitHub / GitLab repository from inside the service detail.

Astro SSR site on Zerops

Update scripts

Update your start script to run the server output from the Node adapter.

json

"scripts": {
  "start": "node ./dist/server/entry.mjs",
}

Creating a project and a service for Astro SSR (Node.js)

Projects and services can be added either through a Project add wizard or imported using a yaml structure:

yaml

# see https://docs.zerops.io/references/import for full reference
project:
  name: recipe-astro
services:
  - hostname: app
    type: nodejs@20

This will create a project called recipe-astro with Zerops Node.js service called app.

Deploying your Astro SSR site

To tell Zerops how to build and run your site using the official Astro Node.js adapter in standalone mode, add a zerops.yml file to your repository:

<PackageManagerTabs> <Fragment slot="npm"> ```yaml title="zerops.yml" # see https://docs.zerops.io/zerops-yml/specification for full reference zerops: - setup: app build: base: nodejs@20 buildCommands: - npm i - npm run build deployFiles: - dist - package.json - node_modules run: base: nodejs@20 ports: - port: 3000 httpSupport: true envVariables: PORT: 3000 HOST: 0.0.0.0 start: npm start ``` </Fragment> <Fragment slot="pnpm"> ```yaml title="zerops.yml" # see https://docs.zerops.io/zerops-yml/specification for full reference zerops: - setup: app build: base: nodejs@20 buildCommands: - pnpm i - pnpm run build deployFiles: - dist - package.json - node_modules run: base: nodejs@20 ports: - port: 3000 httpSupport: true envVariables: PORT: 3000 HOST: 0.0.0.0 start: pnpm start ``` </Fragment> <Fragment slot="yarn"> ```yaml title="zerops.yml" # see https://docs.zerops.io/zerops-yml/specification for full reference zerops: - setup: app build: base: nodejs@20 buildCommands: - yarn - yarn build deployFiles: - dist - package.json - node_modules run: base: nodejs@20 ports: - port: 3000 httpSupport: true envVariables: PORT: 3000 HOST: 0.0.0.0 start: yarn start ``` </Fragment> </PackageManagerTabs>

Now you can trigger the build & deploy pipeline using the Zerops CLI or by connecting the app service with your GitHub / GitLab repository from inside the service detail.

Trigger the pipeline using Zerops CLI (zcli)

<Steps> 1. Install the Zerops CLI. ```shell # To download the zcli binary directly, # use https://github.com/zeropsio/zcli/releases npm i -g @zerops/zcli ```

Open Settings > Access Token Management in the Zerops app and generate a new access token.
Log in using your access token with the following command: shell zcli login <token>
Navigate to the root of your app (where zerops.yml is located) and run the following command to trigger the deploy: shell zcli push
</Steps>