概要
Nuxt.jsにてプロジェクトを立ち上げる際の、手順について書きます。立ち上げたものはDocker化し、docker-composeで運用します。
レンダリング形式
今回はSSGを想定して作成
構成
- TypeScript
- html
- css
バージョン
- node v16.15.1
- yarn v1.22.19
- nuxt v2.15.8
- Composition API v1.6.3
- Vue v2.6.14
- vuetify v2.6.1
- axios v5.13.6
create app
- Nuxt.jsのアプリをコマンドを実行して作成
- create appコマンドはローカルにて実行するため、yarn、nodeは最新のバージョンを入れておく。
$ yarn create nuxt-app <プロジェクト名>
yarn create v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-nuxt-app@4.0.0" with binaries:
- create-nuxt-app
create-nuxt-app v4.0.0
✨ Generating Nuxt.js project in <プロジェクト名>
? Project name: <プロジェクト名>
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? <git hubユーザー名>
? Version control system: Git
Docker化する
- nodeのバージョンは先ほどローカルで適用したバージョンと合わせたDocker imageを選択
- ENV HOST 0.0.0.0を指定しないとホストから接続できなかった
docker/nuxt/Dockerfile
FROM node:16.15.1-stretch-slim
RUN apt-get update
RUN mkdir -p /app
WORKDIR /app
COPY /package.json /app/package.json
COPY /yarn.lock /app/yarn.lock
ENV HOST 0.0.0.0
EXPOSE 5000
RUN yarn install
docker-compose.yml
version: '3'
services:
nuxt:
container_name: <プロジェクト名>
build:
context: .
dockerfile: ./docker/nuxt/Dockerfile
ports:
- 5000:3000 # コンテナ内部の3000を外部から5000でアクセスする
volumes:
- .:/app ホストOSとコンテナ内でソースコードを共有する
- node_modules_volume:/app/node_modules
entrypoint:
- yarn
- run
- dev
volumes:
node_modules_volume:
Composition API導入
$ docker-compose exec nuxt yarn add @nuxtjs/composition-api
cross-env の導入
$ docker-compose exec nuxt yarn add cross-env
環境構築
$ cd <プロジェクト名>
# コンテナ起動
# - 初回起動時は --build を付ける
# - バックグラウンド起動したい場合は -d を付ける
$ docker-compose up --build
localhost:5000にアクセスするとページ表示
コマンドリファレンス
# モジュールの導入
$ docker-compose exec nuxt yarn add {module_name}
# 構文修正
$ docker-compose exec nuxt yarn run lint --fix