Nuxt.jsの環境構築をしてみた
ディレクトリ構造の確認
docker-nuxt
├── docker
│ └── nuxt
│ └── Dockerfile
├── nuxtApp/
└── docker-compose.yaml
Nuxtプロジェクトの作成
以下の記事を参考にしてください。
Nuxt.jsでプロジェクト作成
Dockerfile
FROM node:12.1.0-alpine
RUN mkdir /code
# docker-composeでのコマンドが実行される場所
WORKDIR /code
RUN npm install -g vue-cli
# 外部に公開するポートを指定(run時の-pオプション)
EXPOSE 3000
docker-compose.yaml
version: "3"
services:
nuxt:
container_name: nuxt
build: ./docker/nuxt # Dockerfileの場所を指定
image: nuxt # buildがあればイメージ名を付与として機能
volumes:
- .:/code
ports:
- 3000:3000
working_dir: /code/frontEnd # コマンドの実行場所(指定しなければDockerfileのWORKDIRが適用)
command: npm run dev
package.json
"scripts": {
"dev": "HOST=0.0.0.0 PORT=3000 nuxt", // 変更
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},