Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Koyeb guide to use git-driven deployment #2013

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update Koyeb guide to use git-driven deployment #2013

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f98179c
Update Koyeb guide to use git-driven deployment
edouardb Feb 9, 2022
c98544e
Merge branch 'main' into edit-koyeb-deployment-doc
edouardb Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 24 additions & 94 deletions content/en/deployments/koyeb.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
template: guide
title: Koyeb
description: Deploy Nuxt on Koyeb Serverless Platform with Docker
description: How to deploy a Nuxt app with Koyeb?
target: Server
category: deployment
logo:
Expand All @@ -10,119 +10,49 @@ logo:
---
# Deploy Nuxt on Koyeb Serverless Platform

Deploy Nuxt on Koyeb Serverless Platform with Docker
How to deploy a Nuxt app with Koyeb?

---

[Koyeb](https://www.koyeb.com) is a developer-friendly serverless platform to deploy apps globally. The platform lets you seamlessly run Docker containers, web apps, and APIs with git-based deployment, native autoscaling, a global edge network, and built-in service mesh and discovery.

In this guide, we showcase how to dockerize and deploy a Nuxt application on the Koyeb platform.

> Koyeb allows you to deploy Docker containers from the registry of your choice. In this guide we use the Docker Hub to store our image but you are free to use the [GitHub Container Registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry), the [GitLab Container Registry](https://docs.gitlab.com/ee/user/packages/container_registry/) or any other container registry provider.
This guide showcases how to deploy a Nuxt application on the Koyeb platform.

## Requirements

To successfully follow and complete this guide, you need:

1. A Nuxt project to deploy. You can use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to create a Nuxt project and get started
2. A [Koyeb account](https://app.koyeb.com) to deploy and run the dockerized Nuxt application
3. A [Docker Hub](https://hub.docker.com/) account to push the Docker image and deploy it on Koyeb

## Getting started

In your Nuxt application directory run the following command to install dependencies:

```bash
yarn
```

Once the dependencies are installed, launch your application and ensure everything is working fine:

```bash
yarn dev
```

## Dockerize your application

To Dockerize your Nuxt application, you need to create a `Dockerfile` in your project directory containing the content below:

```dockerfile
FROM node:lts as builder

WORKDIR /app

COPY . .

RUN yarn install \
--prefer-offline \
--frozen-lockfile \
--non-interactive \
--production=false

RUN yarn build

RUN rm -rf node_modules && \
NODE_ENV=production yarn install \
--prefer-offline \
--pure-lockfile \
--non-interactive \
--production=true
1. A Nuxt project to deploy. You can use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started
2. A [Koyeb account](https://app.koyeb.com)

FROM node:lts
## Deploy

WORKDIR /app
Go to the [Koyeb Control Panel](https://app.koyeb.com) and click the **Create App** button to go to the App creation page:

COPY --from=builder /app .
- Select **GitHub** as the deployment method to use
- In the repositories list, select the repository containing your Nuxt application or use our [demo application](https://github.com/koyeb/example-nuxtjs) if you don't have an existing Nuxt project yet
- Specify the branch of your repository to deploy
- In the **Environment variables** add a new variable with key `HOST` and `0.0.0.0` for value. This is required to allow Koyeb to reach your application, perform health checks and expose your application to the mesh network
- Give your Koyeb App a name, for example `nuxt-on-koyeb`, and click the **Create App** button

ENV HOST 0.0.0.0
EXPOSE 3000
> You may notice that you don't have to specify any build and run commands. By default, if a `build` script is referenced in your `package.json`, Koyeb will execute it during the build stage. If a `run` script is present, it will then be used to launch your application.

CMD [ "yarn", "start" ]
```
You land on the deployment page, where you can follow the progress of your Nuxt application's deployment. Once the build and deployment are completed, you can access your application by clicking the App URL ending with `koyeb.app` in the Koyeb control panel.

To build the Docker image execute the following command:

```bash
docker build . -t <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project
```

This command will build the Docker image with the name <YOUR_DOCKER_HUB>/my-nuxt-project. Once the build is over, you can run a container using the image locally to validate everything is working as expected running:

```bash
docker run -p 3000:3000 <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project
```

Open your browser and navigate to http://localhost:3000 to view your project landing page.

## Push your Docker image to a container registry

Since our Docker image is built and functional in our test, we can now upload it to a container registry. In this documentation, we will store our image on the Docker Hub. In your terminal run the command below to push the image:

```bash
docker push <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project
```

## Deploy the Nuxt application to production on Koyeb

On the Koyeb Control Panel, click the **Create App** button.

In the form, fill the `Docker image` field with the name of the image we previously created which should look like `<YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project`.

Check the box `Use a private registry` and, in the select field, click **Create Registry Secret**.
Your Nuxt application is now running on Koyeb and benefits from native autoscaling, automatic HTTPS (SSL), auto-healing, and global load-balancing across our edge network.

A modal opens asking for:
## Continuous deployment (CD)

- a name for the Secret which will be created, we can use for instance `docker-hub-secret`
- the registry provider to generate the secret containing your private registry credentials, in our case Docker Hub
- your Docker Hub username and password. We recommend you to [generate an access token](https://hub.docker.com/settings/security) from the Docker Hub to use instead of your password.
Once you've filled all the fields, click the **Create** button.
Now that your Nuxt application is deployed, each change you push to your repository will automatically trigger a new build and deployment on the Koyeb Serverless Platform.

We don't need to change the _Path_, our app will be available at the root of our domain: `/`.
Your changes then go live as soon as the deployment passes all necessary health checks. In case of a failure during one of your deployments, we ensure to keep the latest working deployment active, so your application is always up and running.

Give your App a name, i.e `nuxt-app`, and click **Create App**.
## Deploy to Koyeb button

_You can add more regions to deploy your applications, set environment variables, and define the horizontal scaling according to your needs._
You can add the Deploy to Koyeb button to your documentation and readme files to allow your users to deploy your Nuxt application with zero configuration. If you want to create your own **Deploy to Koyeb** button, you can check our [documentation](https://www.koyeb.com/docs/deploy-to-koyeb-button) explaining how to get started.

You will automatically be redirected to the Koyeb App page where you can follow the progress of your Nuxt application deployment. In a few seconds, once your app is deployed, click on the _Public URL_ ending with `koyeb.app`.
Below is the Deploy to Koyeb button to deploy the Koyeb Nuxt demo application with one click:

Your Nuxt application is now running on Koyeb and benefits from native autoscaling, automatic HTTPS (SSL), auto-healing, and global load-balancing across our edge network.
<a href="https://app.koyeb.com/deploy?type=git&repository=github.com/koyeb/example-nuxtjs&branch=main&name=nuxtjs-on-koyeb&env[HOST]=0.0.0.0" target="_blank">
<img src="https://www.koyeb.com/static/images/deploy/button.svg" alt="Deploy to Koyeb" />
</a>