diff --git a/content/en/deployments/koyeb.md b/content/en/deployments/koyeb.md index 954351517e..f155e36fef 100644 --- a/content/en/deployments/koyeb.md +++ b/content/en/deployments/koyeb.md @@ -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: @@ -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 /my-nuxt-project -``` - -This command will build the Docker image with the name /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 /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 /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 `/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. + + Deploy to Koyeb +