【Nuxt.js/Vue.js】Dockerイメージを作る&サイズを小さくするコツ

nuxt.js開発関連

Nuxt.jsをDockerで動かすための手順をまとめました。

ビルド用のshell

docker内にソースをコピーしてビルドではなく、先にビルドしてからイメージを作ります。

#!/bin/sh

APP_NAME=xxx-app

npm run build
docker build -t $APP_NAME:latest ./

Dockerfile

Dockerイメージのサイズを小さくするためにベースはalpineを使っています。
また、必要最小限のファイルのみで固めるためにnpm install は productionを指定しています。これによりdevDependenciesがimportされなくなります。
その後、必要なファイルをCOPYすることで必要最低限となるためDockerイメージを最小限にできます。

FROM node:8.15.0-alpine
ENV LANG C.UTF-8

WORKDIR /opt/docker

COPY package.json .
RUN apk add --no-cache --virtual python2 \
    && npm install -g vue-cli  \
    && npm install --production \
    && apk del python2
COPY .nuxt ./.nuxt/
COPY nuxt.config.js .
COPY static ./static/

ENV HOST 0.0.0.0
EXPOSE 3000

VOLUME ["/opt/docker"]

# start command
CMD [ "npm", "run", "start" ]

docker-compose.yml

必要最小限の定義です。

version: "3"
services:
  xxx-hp:
    restart: always
    image: xxx-hp:latest
    container_name: xxx-hp
    ports:
      - "3000:3000"
    logging:
      options:
        max-size: 5m
    environment:
      TZ: Asia/Tokyo

本番で動かす場合はネットワークの定義も書いたほうがいいです。

参考

©2018 LLC Shimer-System.
image/svg+xml