概要
Nuxtをdocker composeを使って構築します。
vuetifyも導入して、本番用にpm2とNGINXを使っていきます！
最終的なコードのリポジトリは以下ですね。
https://github.com/gaitou2048/nuxt3-vuetify-template
前提
- Docker, Docker Composeインストール済み
- 実行環境はMac + Docker for Desktop(Mac) ですが、Windows(WSL)やLinuxでもできるはず。
環境構築
Dockerfileとdocker-compose.yml用意します。
以前書いた記事のnodeコンテナとほぼ同じですね。
.
├── docker-compose.yml
└── front
└── Dockerfile
FROM node:19.6-slim
WORKDIR /app
ENV LANG=C.UTF-8 \
TZ=Asia/Tokyo
version: '3'
services:
front:
build:
context: ./front
dockerfile: Dockerfile
ports:
- 3001:3000
volumes:
- ./front/app:/app
- front_node_modules:/app/node_modules
tty: true
#restart: on-failure
working_dir: /app
volumes:
front_node_modules:
コンテナを作成+起動していきます。
立ち上がったら、コンテナ内にイン。
$ docker compose up -d --build
$ docker compose exec front bash
ここからお待ちかねのNuxt3環境構築。
公式通りにいきましょう！
https://nuxt.com/docs/getting-started/installation
英語は中学文法すら怪しいですが、Google大先生の翻訳力に全てを委ねます。
何とかなります。本当に助かる。
コンテナ内でNuxtプロジェクト作成。
する前に、/appをプロジェクトにしたいのに、working_dirとしてしまいました。
移動します。移動してからNuxtプロジェクト作成。
cd /
npx nuxi init app --force
cd /app
yarn install
インストールが完了したらコンテナ内で以下を叩きます。
yarn dev
で、http://localhost:3001 にアクセスしてみましょう。
ページが表示されたら、とりあえずOKです。
ポートが3001なのは、docker-compose.ymlでホスト側のポートの3001にマウントしているからですね。
3000はよく使うので、少しずらしました。
以前の記事でも3000は使ってますね。
Nuxtプロジェクトの作成で、package.jsonが出力されています。
コンテナビルド時に、パッケージインストールできるようにDockerfileを書き換えます。
FROM node:19.6-slim
WORKDIR /app
ENV LANG=C.UTF-8 \
TZ=Asia/Tokyo
COPY app/package.json app/yarn.lock ./
RUN yarn install
これでコンテナ内で yarn addでパッケージを加えても大丈夫です。
vuetify3 インストール
こちらに記事を大いに参考にしています。
というか、こちらの方法です。
https://qiita.com/MS-0610/items/a16670713de929a5b9b1
1. コンテナ内に入り、ライブラリインストール
$ docker compose exec front bash
yarn add vuetify@next
yarn add sass
2. 設定ファイル記載
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
components
})
nuxtApp.vueApp.use(vuetify)
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
css: ['vuetify/lib/styles/main.sass'],
build: {
transpile: ['vuetify'],
},
})
3. Vueitfyのワイヤーフレームページ
- 以下のワイヤーフレームを動かすために、app.vueを修正します。
https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/wireframes/three-column.vue
<template>
<v-app id="inspire">
<v-app-bar
class="px-3"
color="white"
flat
density="compact"
>
<v-avatar
color="grey-darken-1"
size="32"
></v-avatar>
<v-spacer></v-spacer>
<v-tabs
centered
color="grey-darken-2"
>
<v-tab
v-for="link in links"
:key="link"
>
{{ link }}
</v-tab>
</v-tabs>
<v-spacer></v-spacer>
<v-avatar
class="hidden-sm-and-down"
color="grey-darken-1"
size="32"
></v-avatar>
</v-app-bar>
<v-main class="bg-grey-lighten-3">
<v-container>
<v-row>
<v-col
cols="12"
sm="2"
>
<v-sheet
rounded="lg"
min-height="268"
>
<!-- -->
</v-sheet>
</v-col>
<v-col
cols="12"
sm="8"
>
<v-sheet
min-height="70vh"
rounded="lg"
>
<!-- -->
</v-sheet>
</v-col>
<v-col
cols="12"
sm="2"
>
<v-sheet
rounded="lg"
min-height="268"
>
<!-- -->
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<script setup>
const links = [
'Dashboard',
'Messages',
'Profile',
'Updates',
]
</script>
4. ページの表示
http://localhost:3001 にアクセス。
以下のようなページが表示されたら、OKです。
PM2
Nuxtサーバを常時起動するためにPM2を導入します。
yarn devで起動しているアプリを止めておきましょう。Ctrl+Cとかで。
止めたらコンテナ内でインストール。
yarn add pm2
次は設定ファイルを作成します。
scriptに指定しているファイルは、これからのビルドで生成されるものですね。
module.exports = {
apps: [
{
name: 'app',
cwd: '/app',
exec_mode: 'cluster',
instances: 1,
script: './.output/server/index.mjs',
env: {
NODE_ENV: 'production'
}
}
]
}
ということで、Nuxtのビルド。
色々と.outputに出力されます。
yarn build
できたらPM2を使って動かしてみましょう。
yarn pm2 start
ここまでできたら、またｍた http://localhost:3001 にアクセス。
yarn dev していないのに起動しています。やったね！
確認できたら、次のNGINX導入確認のために、止めておきましょう。
0はPM2で起動しているアプリのIDです。
0しか起動していないので、0で止めます。
yarn pm2 stop 0
NGINX
新しくコンテナを追加します。こちらも以前書いた記事と同じですね。
serverディレクトリと、Dockerfileを作ります。
nginxの設定ファイルも作るので、こんな感じになります。
.
├── README.md
├── docker-compose.yml
├── front/
└── server/
├── Dockerfile
├── conf.d/
│ └── server.conf
└── nginx.conf
ひとまずDockerfileから作りましょう。
FROM nginx:latest
ENV TZ=Asia/Tokyo
ほぼ変更のないnginxのDockerfileです。
docker-compose.ymlでimageを指定するのもありです。
が、後から何か(NGINX用モジュールとか)を追加したくなるときも踏まえて作ってあります。
次は設定ファイル。
worker_processes auto;
events {
worker_connections 512;
multi_accept on;
}
http {
include /etc/nginx/conf.d/server.conf;
server_tokens off;
send_timeout 60; # タイムアウト60秒
}
server{
listen 5000;
location / {
proxy_pass http://front:3000/;
}
}
ここまで作成したら、docker-compose.ymlにNGINXコンテナの設定を追加していきます。
version: '3'
services:
front:
build:
context: ./front
dockerfile: Dockerfile
ports:
- 3001:3000
volumes:
- ./front/app:/app
- front_node_modules:/app/node_modules
tty: true
#restart: on-failure
working_dir: /app
server:
build:
context: ./server
dockerfile: Dockerfile
ports:
- 5001:5000
volumes:
- ./server/nginx.conf:/etc/nginx/nginx.conf
- ./server/conf.d:/etc/nginx/conf.d
- ./server/log:/var/log/nginx
tty: true
#restart: on-failure
volumes:
front_node_modules:
あとはコンテナを起動して、pm2起動するだけです。
docker compose up -d --build
dokcer compose exec yarn pm2 start
Nuxtのサーバ起動コマンドを毎回打つのが面倒であれば、
docker-compose.ymlのcommandに yarn devやyarn pm2 startを書くのもありですね。
ともかく、ここまでできたら http://localhost:5001 にアクセスしてみましょう。
正常にページが表示できればOKです！
お疲れ様でした。