docker-composeで Nuxt TypeScript + Vuetify 環境を構築
はじめに
普段Laravelを触ることが多く、イチからフロントエンドの環境をDockerで構築したことがなかったので挑戦してみました。
docker-composeでNuxt TypeScript+Vuetifyなフロントエンド環境を構築します。
最終的に、モノリポでバックエンドとしてlaravelも同じリポジトリに載せる予定です。
Dockerとdocker-composeがインストールされているものとします。
実行環境
- macOS Catalina ver 10.15.6
- Docker ver 2.4.0
- docker-compose ver 1.27.4
ディレクトリ構成
docker-compose.yml
nuxt/
docker/
└ app/
└ Dockerfile
docker-compose
version: "3"
services:
app:
build:
context: ./
dockerfile: ./docker/app/Dockerfile
ports:
- "3000:3000"
command: yarn run dev
volumes:
- ./nuxt:/nuxt
Dockerfile
FROM node:14.4.0-alpine
ENV HOME=/nuxt \
LANG=C.UTF-8 \
TZ=Asia/Tokyo \
HOST=0.0.0.0
# Vuetifyのインストールに必要
RUN apk update && \
apk upgrade && \
apk add --no-cache make gcc g++ python
WORKDIR /nuxt
EXPOSE 3000
ビルド
$ docker-compose build
Nuxt、Vuetifyのインストール
$ docker-compose run --rm app yarn create nuxt-app nuxt
...
...
create-nuxt-app v3.4.0
✨ Generating Nuxt.js project in nuxt
? Project name: `nuxt`
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios (<= スペースキーを押さないと選択されないので注意)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: None
各種質問が出てくるので、上記のようにUI frameworkの欄でVuetify.jsを選ぶ。
スペースを押さないと選択されない項目があるので注意。
インストールが終わるとnuxtディレクトリが以下のようになる
nuxt
┣ .config/
┗ nuxt/
┣ asset/
┣ ...
┣ ...
┣ package.json
┗ yarn.loc
ので、nuxt/nuxt/* をnuxt/に移動して以下のようにする
nuxt
┣ .config/
┣ asset/
┣ ...
┣ ...
┣ package.json
┗ yarn.loc
起動
$ docker-compose up -d
http://localhost:3000/
にアクセスして下の画像のように表示されればとりあえず完了!
tsconfig.jsonの設定などあるかもしれませんが、次はLaravelのSanctumとSPA認証の記事で書く予定…
Author And Source
この問題について(docker-composeで Nuxt TypeScript + Vuetify 環境を構築), 我々は、より多くの情報をここで見つけました https://qiita.com/HideM/items/cc776c0c48c001e834cc著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .