Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

docs: add docker deployment guide #3331

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 14 additions & 0 deletions docs/components/atoms/logo/LogoDocker.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
role="img"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 256 185"
>
<path
fill="#2396ED"
d="M250.716 70.497c-5.765-4-18.976-5.5-29.304-3.5c-1.2-10-6.725-18.749-16.333-26.499l-5.524-4l-3.844 5.75c-4.803 7.5-7.205 18-6.485 28c.24 3.499 1.441 9.749 5.044 15.249c-3.362 2-10.328 4.5-19.455 4.5H1.155l-.48 2c-1.682 9.999-1.682 41.248 18.014 65.247c14.892 18.249 36.99 27.499 66.053 27.499c62.93 0 109.528-30.25 131.386-84.997c8.647.25 27.142 0 36.51-18.75c.24-.5.72-1.5 2.401-5.249l.961-2l-5.284-3.25ZM139.986 0h-26.42v24.999h26.42V0Zm0 29.999h-26.42v24.999h26.42v-25Zm-31.225 0h-26.42v24.999h26.42v-25Zm-31.225 0H51.115v24.999h26.421v-25ZM46.311 59.998H19.89v24.999h26.42v-25Zm31.225 0H51.115v24.999h26.421v-25Zm31.225 0h-26.42v24.999h26.42v-25Zm31.226 0h-26.422v24.999h26.422v-25Zm31.225 0H144.79v24.999h26.422v-25Z"
/>
</svg>
</template>
129 changes: 129 additions & 0 deletions docs/content/2.guide/5.deployment/7.docker.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
---
icon: LogoDocker
---

# Docker

How to develop, build and deploy Nuxt via Docker.

::list

- Support for HMR in development
- Standardized environment for development and production
- Minimalist and stable image
- Run your own Docker image on AWS, Azure, Kubernetes, Swarm etc.
::

## Setup

**Note**: You need to have [**Docker**](https://www.docker.com/get-started) and [**docker-compose**](https://docs.docker.com/compose/install/) installed.

### Preparation

Let's start by creating **two files in the project root**, `Dockerfile` and `docker-compose.yml` with the following contents:

```dockerfile [Dockerfile]
FROM node:16-alpine as nuxtBuild

WORKDIR /nuxtBuild

COPY ./ /nuxtBuild

RUN yarn install && yarn run build

###

FROM node:16-alpine

WORKDIR /app

COPY ./package.json /app/package.json
COPY --from=nuxtBuild /nuxtBuild/.output /app/.output

RUN ( \
echo '#!/bin/sh'; \
echo 'if [[ "$NODE_ENV" == "development" ]]; then yarn run dev; else node /app/.output/server/index.mjs; fi' \
) > /usr/local/bin/nuxt-entrypoint && chmod +x /usr/local/bin/nuxt-entrypoint

ENV HOST=0.0.0.0

ENTRYPOINT ["nuxt-entrypoint"]
```

and

```yaml [docker-compose.yml]
version: "3"
services:
nuxt:
build: .
environment:
NODE_ENV: development
volumes:
- ".:/app"
ports:
- "3000:3000"
```

### Local development

For local development, just run docker compose to launch your Nuxt project:

::code-group

```bash [Docker compose]
docker-compose up -d
```

```bash [Docker compose v2]
docker compose up -d
```

::

You can use following command to **execute into container**:

::code-group

```bash [Docker compose]
docker-compose exec nuxt sh
```

```bash [Docker compose v2]
docker compose exec nuxt sh
```

::

**Nuxt will be available at [http://localhost:3000](http://localhost:3000)**.

### Build into production

To build into production you need to modify the environment `NODE_ENV` and remove `volumes` property, example:

```yaml [docker-compose.yml]
version: "3"
services:
nuxt:
build: .
environment:
NODE_ENV: production
ports:
- "3000:3000"
```

Then just run:

::code-group

```bash [Docker compose]
docker-compose build
```

```bash [Docker compose v2]
docker compose build
```

::

Voila, your production **image is ready** and prepared for deployment into AWS, Kubernetes etc.