自己紹介
初めまして。私は都内でwebエンジニアをしています。
今の会社にインターンとして経て、入社しました。
業務では、Nuxtjs, Golang, Kubernetesを用いて日々苦戦している若輩者です。
今回初めてQiitaに投稿をさせて頂くことになりました。
様々なご意見いただけると励みになりますので、よろしくお願い致します。
背景
社内でVue2系のサービスを展開していることが多いものの、Vue2のサポートが来年で終わるとのことなので
Vue3系にリプレイスする話が耳にすることが多くなったので、先駆けて勉強した次第です。
前提
Dockerについて軽く知っているが書き方がよくわからない方や、取り敢えずDockerでNuxt3で環境構築をしたい方を想定しております。
開発環境
MacBook Pro (16-inch, 2019)
MacOS Monterey
node v18.9.0
hogehoge@ nuxt-app % tree
.
├── Dockerfile
├── README.md
├── app.vue
├── docker-compose.yaml
├── nuxt.config.ts
├── package.json
└── tsconfig.json
環境構築
ローカル編
まず、公式の手順に乗っ取り、必要なファイルをローカルにダウンロードします。
npx nuxi init nuxt-app & nuxt-app
次に、依存モジュールをインストールします。
yarn install
以下のコマンドで開発用サーバーをスタートします。
yarn dev -o
localhost:3000で立ち上がります。
Docker編
取り敢えず、ローカルでサーバーを立ち上げることができたので、次にDockerで立ち上げていきます。
FROM node:18.9.0-alpine
WORKDIR /app
COPY package.json .
RUN apk update
RUN yarn install
COPY . .
EXPOSE 3000
CMD yarn run build
FROM node:18.9.0-alpine
今回は、nodeのversion18.9.0を使うので、公式で提供されているイメージをベースとして使用します。
WORKDIR /app
Dockerのコンテナ内処理を行う作業ディレクトリを指定します。
COPY package.json .
ローカルのpackage.jsonを/appにコピーします。
RUN apk update
利用可能パッケージのインデックスを更新します。
RUN yarn install
ローカルからコピーしてきたpackage.jsonをもとに、依存パッケージをインストールします。
COPY . .
ローカルのファイルをDockerイメージにコピーします。
EXPOSE 3000
Docker内のコンテナのポートを公開します。
＊外部に公開する訳ではないので、別途設定が必要です。
CMD yarn run build
コンテナ実行時に実行するデフォルトのコマンドを指定します。
本番環境時にできるだけイメージのサイズの小さくするため、デフォルトではビルドコマンドを指定します。
Docker-Compose編
Docker Imageを作成したら、次にDocker-Composeを作成していきます。
version: '3.9'
services:
frontend:
build: .
ports:
- 3000:3000
volumes:
- .:/app
environment:
- HOST=0.0.0.0
- port=3000
tty: true
working_dir: /app
entrypoint: yarn dev -o
verison
docker-composeで使用するバージョンを定義します。
今回は、最新バージョンを指定します。
services
Docker-Composeで動かすアプリケーションを定義します。
今回は、サクッと環境構築するするだけなので、frontendのみでございます。
build
Docker Imageをビルドを定義します。
直接公式のイメージを指定することもできますが、今回は自作のイメージを使用します。
＊.のようにpathを指定している場合は、そのpathに存在しているDockerfileをビルドします。
ports
Docker内で公開されていない3000portをマッピングすることで外部公開します。
${外部公開先のポート}:${Docker内のポート}のように定義します。
volumes
ローカルのファイルをコンテナ上にマウントする定義をします。
DockerImageを再ビルドする必要がなく、変更がコンテナ上に反映されます。
environment
環境変数を指定します。
こちらの設定で、localhost:3000で公開されます。
tty
ポート待受とかしていないコンテナ起動するとすぐ終了してしまうので起動し続けるために定義します。
working_dir
作業ディレクトリを定義します。
entrypoint
コンテナ実行時に必ず実行したいコマンド定義します。こちらでサーバーを立ち上げます。
実行
DockerImageをビルドし、docker-composeを立ち上げます。
docker-compose up --build
# Stop & Delete Containers
docker-compose down
localhost:3000で立ち上がります。
Nuxt3での開発ライフをお楽しみください！
参考文献
https://v3.nuxtjs.org/
https://docs.docker.jp/
https://docs.docker.jp/compose/toc.html