使用 Docker 容器化 Nuxt 3.0 專案

Deployment
, , , ,

做法

新增 .env 檔：

1
APP_PORT=3000

新增 docker-compose.yaml 檔：

1
2
3
4
5
6
7
8
9
version: "3"

services:
  app:
    container_name: my-nuxt-app
    build: .
    restart: always
    ports:
      - "${APP_PORT}:3000"

新增 Dockerfile 檔：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# build stage
FROM node:16 as builder

WORKDIR /app

COPY . .

RUN npm ci
RUN npm run build

RUN rm -rf node_modules
RUN npm ci --only=production

# final stage
FROM node:16-alpine

WORKDIR /app

COPY --from=builder /app .

ENV HOST 0.0.0.0
EXPOSE 3000

CMD [ "node", ".output/server/index.mjs" ]

新增 .dockerignore 檔。

1
2
3
4
/node_modules
/.idea
/.vscode
/.git

編譯並啟動容器：

1
docker-compose up -d --build

瀏覽網頁

前往 http://127.0.0.1:3000 瀏覽。