Nuxt.jsをdockerで動かしてみる

【動作環境】
macOS

【使用するツール】
Docker
Docker Compose

 

作業ディレクトリを作成

$ mkdir nuxt_app
$ cd nuxt_app

 

 

Dockerfileの作成

$ touch Dockerfile
$ vi Dockerfile

Dockerfileの中身は以下の通り

FROM node:10-alpine
RUN npm install -g vue-cli
WORKDIR /src
ENV HOST 0.0.0.0
EXPOSE 3000

・ベースとなるOSは、軽いAlpineと呼ばれるOSイメージを使う。

・イメージにvue-cliをインストール

・コンテナ内の作業用ディレクトリをsrcとして定義

 

 

docker-compose.ymlを作成

version: '3'
services:
src:
build: .
tty: true
volumes:
- "./src:/src"
ports:
- "3000:3000"

・Volumes
ホストマシンとDockerコンテナ内のファイルをSyncする。
[ホストのパス]:[Dockerコンテナ内のパス]

・ports
コンテナ外部からport3000でアクセス可能にする

 

Nuxtの作成

$ git clone https://github.com/nuxt-community/starter-template src

 

ここまでのディレクトリ構成

└── nuxt_app
   ├── Dockerfile
   ├── docker-compose.yml
   └── src
      ├── [Nuxtテンプレート群]

 

 

ビルドとコンテナ起動
docker-compose.yml、Dockerfileと同じディレクトリで以下のコマンドを実行

// イメージをビルド
$ docker-compose build
// コンテナを起動(オプション-dで、バックグラウンドでコンテナを起動)
$ docker-compose up -d
// dockerコンテナに入る
$ docker-compose exec src sh

 

 

dockerコンテナ内での操作

lsコマンドでsrc配下にローカルで作成したNuxtテンプレートがSyncしていることがわかると思います。

/src # ls

 

そして、以下のコマンドで起動します。

/src # yarn install
/src # yarn run dev

 

以下のurlでブラウザからアクセスできればOKです。
http://localhost:3000

 

参考記事
https://qiita.com/FrozenVoice/items/2ae89ce820cade84924e

コメント