diff --git a/src/components/DeployGuidesNav.astro b/src/components/DeployGuidesNav.astro index 06109ce488d9f..68712c3a858da 100644 --- a/src/components/DeployGuidesNav.astro +++ b/src/components/DeployGuidesNav.astro @@ -43,7 +43,7 @@ const services: Service[] = [ { title: 'Kinsta', slug: 'kinsta', supports: ['ssr', 'static'] }, { title: 'Deta Space', slug: 'space', supports: ['ssr', 'static'] }, { title: 'Zeabur', slug: 'zeabur', supports: ['ssr', 'static'] }, - { title: 'Zerops', slug: 'zerops', supports: ['ssr'] }, + { title: 'Zerops', slug: 'zerops', supports: ['ssr', 'static'] }, ]; --- diff --git a/src/content/docs/en/guides/deploy/zerops.mdx b/src/content/docs/en/guides/deploy/zerops.mdx index 7c18f1ee9b25d..a9eeff28ddab1 100644 --- a/src/content/docs/en/guides/deploy/zerops.mdx +++ b/src/content/docs/en/guides/deploy/zerops.mdx @@ -7,135 +7,201 @@ i18nReady: true import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import { Steps } from '@astrojs/starlight/components'; -[Zerops](https://zerops.io/) is a dev-first cloud platform that can be used to deploy an SSR Astro site. +[Zerops](https://zerops.io/) is a dev-first cloud platform that can be used to deploy both Static and SSR Astro site. -This guide will walk you through deploying an Astro project using the Node.js adapter to Zerops. +This guide will walk you through seting up and deploying both Static and SSR Astro sites on Zerops. -## Prerequisites -- **An Astro project using the [`@astrojs/node` SSR adapter](/en/guides/integrations-guide/node/)** -- **A Zerops account** - If you don’t already have one, you can [create a Zerops account](https://zerops.io/) for free. +:::tip[Astro x Zerops Quickrun] -:::tip[Start from a template] -The [Zerops x Astro - Node.js example app](https://github.com/zeropsio/recipe-astro-nodejs) can be imported directly into your [Zerops Dashboard](https://app.zerops.io/dashboard/projects), and deployed in one click! +Want to test running Astro on Zerops without installing or setting up anything? Using repositories [Zerops x Astro - Static](https://github.com/zeropsio/recipe-astro-static) or [Zerops x Astro - SSR on Node.js](https://github.com/zeropsio/recipe-astro-static) you can deploy example Astro site with a single click. + +::: + +Running apps on Zerops requires two steps: +1. Creating a project +2. 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`](https://app.zerops.io/dashboard/project-add) wizard or imported using a yaml structure: ```yaml +# see https://docs.zerops.io/references/import for full reference project: - name: astro + name: recipe-astro services: - - hostname: astronode - type: nodejs@20 - buildFromGit: https://github.com/zeropsio/recipe-astro-nodejs - ports: - - port: 4321 - httpSupport: true - enableSubdomainAccess: true - minContainers: 1 + - hostname: app + type: static ``` -::: -## Creating a Zerops Node.js project +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: + + + + ```yaml title="zerops.yml" + # see https://docs.zerops.io/references/zeropsyml for full reference + zerops: + - setup: app + build: + base: nodejs@20 + buildCommands: + - npm i + - npm build + deployFiles: + - dist/~ + run: + base: static + ``` + + + ```yaml title="zerops.yml" + # see https://docs.zerops.io/references/zeropsyml for full reference + zerops: + - setup: app + build: + base: nodejs@20 + buildCommands: + - pnpm i + - pnpm build + deployFiles: + - dist/~ + run: + base: static + ``` + + + ```yaml title="zerops.yml" + # see https://docs.zerops.io/references/zeropsyml for full reference + zerops: + - setup: app + build: + base: nodejs@20 + buildCommands: + - yarn + - yarn build + deployFiles: + - dist/~ + run: + base: static + ``` + + + +Now you can [trigger the build & deploy pipeline using the Zerops CLI](#trigger-the-pipeline-using-zerops-cli-zcli) or by connecting the `app` service with your [GitHub](https://docs.zerops.io/references/github-integration/) / [GitLab](https://docs.zerops.io/references/gitlab-integration) repository from inside the service detail. -You can create a Node.js service for your Astro site through the [Zerops `project add` wizard](https://app.zerops.io/dashboard/project-add), or by importing an Astro site using `.yaml`. -The following YAML structure will setup a project called `my-astro-sites` with a Node.js v20 service called `hellothere`. One Zerops project can contain many Astro apps. +## Astro SSR site on Zerops + +### Creating a project and a service for Astro SSR (Node.js) +Projects and services can be added either through a [`Project add`](https://app.zerops.io/dashboard/project-add) wizard or imported using a yaml structure: ```yaml +# see https://docs.zerops.io/references/import for full reference project: - name: my-astro-sites + name: recipe-astro services: - - hostname: hellothere + - hostname: app type: nodejs@20 - ports: - - port: 4321 - httpSupport: true - minContainers: 1 ``` +This will create a project called `recipe-astro` with Zerops Node.js service called `app`. -## Building and deploying your app to Zerops +### Deploying your Astro SSR site -Now that you've prepared a Node.js service on Zerops, you will need to create a `zerops.yml` file at the root of your project to trigger the build and deploy pipeline on Zerops. +To tell Zerops how to build and run your site using the official [Astro Node.js adapter](/en/guides/integrations-guide/node/) in `standalone` mode, add a `zerops.yml` file to your repository: -The following example shows configuring the required build and run operations for the example project with hostname `hellothere`: ```yaml title="zerops.yml" - zerops: - - setup: hellothere - build: - base: nodejs@20 - buildCommands: - - npm i - - npm run build - deploy: - - dist - - package.json - - node_modules - cache: - - node_modules - - package-lock.json - run: - start: node dist/server/entry.mjs + # see https://docs.zerops.io/references/zeropsyml 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 - NODE_ENV: production + start: npm start ``` ```yaml title="zerops.yml" - zerops: - - setup: hellothere - build: - base: nodejs@20 - buildCommands: - - pnpm i - - pnpm run build - deploy: - - dist - - package.json - - node_modules - cache: - - node_modules - - pnpm-lock.yaml - run: - start: node dist/server/entry.mjs + # see https://docs.zerops.io/references/zeropsyml 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 - NODE_ENV: production + start: pnpm start ``` ```yaml title="zerops.yml" - zerops: - - setup: astronode - build: - base: nodejs@20 - buildCommands: - - yarn - - yarn build - deploy: - - dist - - package.json - - node_modules - cache: - - node_modules - - yarn.lock - run: - start: node dist/server/entry.mjs + # see https://docs.zerops.io/references/zeropsyml 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 - NODE_ENV: production + start: yarn start ``` -### Trigger the pipeline using GitHub / GitLab -To setup continuous deployment on either a push to a branch or on a new release, go to your Node.js service detail and connect your Zerops service with a GitHub or GitLab repository. - +Now you can [trigger the build & deploy pipeline using the Zerops CLI](#trigger-the-pipeline-using-zerops-cli-zcli) or by connecting the `app` service with your [GitHub](https://docs.zerops.io/references/github-integration/) / [GitLab](https://docs.zerops.io/references/gitlab-integration) repository from inside the service detail. -### Trigger the pipeline Using Zerops CLI (zcli) +## Trigger the pipeline using Zerops CLI (zcli) 1. Install the Zerops CLI. @@ -159,6 +225,11 @@ To setup continuous deployment on either a push to a branch or on a new release, ## Resources +### Official + +- [Create Zerops account](https://app.zerops.io/registration) +- [Zerops Documentation](https://docs.zerops.io) +- [Zerops Astro recipe](https://app.zerops.io/recipe/astro) +### Community - [Deploying Astro to Zerops in 3 mins](https://medium.com/@arjunaditya/how-to-deploy-astro-to-zerops-4230816a62b4) -- [Detailed guide to creating a Zerops Node.js service](https://docs.zerops.io/nodejs/how-to/create)