ウェブログラム ~学習するな実践せよ~

Dockerで作るNuxt.js開発環境

2019/01/20

ここではDockerでNuxt.js環境を構築する方法を紹介します。

※dockerのインストールは事前に行っておいてください。

Nuxtの画面がブラウザで表示できるところをゴールとします。

環境

OS: alpine
node: v8.11.3
ポート: 9000

Dockerfile記述

まずはDockerfileを記述してコンテナを起動します。

Dockerfile

FROM node:8.11.3-alpine
WORKDIR /app
RUN apk update && \
apk add git && \
npm install -g npm && \
npm install -g vue-cli
EXPOSE 9000
CMD ["/bin/sh"]

Nuxt.jsにブラウザで接続する際に9000番を使用するため、9000番を開放しています。

コンテナを起動します。はじめはOSイメージのダウンロードやインストール等が走るので遅いです。

docker run -v `pwd`:/app -p 9000:9000 --name nuxt_app -it -d nuxt_app_image

コマンドの説明を少しすると、

`pwd`:/app 

ここで、起動時にいるディレクトリを起動するコンテナの/appディレクトリにマウントします。
なので、コンテナ内でNuxtアプリケーションを作成するとき、ホストOS上にファイルが同期され、コンテナを削除したとしてもプロジェクトディレクトリ自体が残ります。

nuxt_app

ここでコンテナの名前をつけています。この名前はコンテナ接続時に使用します。

nuxt_app_image

これはDockerで使用するイメージの名前です。コンテナはこのイメージをもとに起動されます。

 

コンテナ接続

docker exec -it nuxt_app sh

これで接続完了しました。
接続後は/appディレクトリなります。ここでlsを打つと、Dockerfileが表示されているので、無事マウント出来ていることがわかります。

すでにnodeコマンド、npmコマンドが使用できるようになっています。

Nuxt.jsの作成

続いてNuxtのプロジェクトを作成していきましょう。

Nuxtのテンプレートを生成することができるので、ここではNuxtのコミュニティが作成しているテンプレートを使用します。

vue init nuxt-community/starter-template my_nuxt_app

上記コマンドを実行すると、いろいろ聞かれますが、プロジェクト名や、プロジェクトの概要、作成者などを聞かれているだけなので、すべてエンター連打で良いでしょう。

実行が完了すると、my_nuxt_appというディレクトリが作成されます

my_nuxt_app配下を見てみると、以下のようなディレクトリ構成なっています。

.
├── README.md
├── assets
│ └── README.md
├── components
│ ├── AppLogo.vue
│ └── README.md
├── layouts
│ ├── README.md
│ └── default.vue
├── middleware
│ └── README.md
├── nuxt.config.js
├── package.json
├── pages
│ ├── README.md
│ └── index.vue
├── plugins
│ └── README.md
├── static
│ ├── README.md
│ └── favicon.ico
└── store
└── README.md

Nuxtではあらかじめ、どこにどのファイルを置けば良いか決まっているので、その決まりを守って開発をすることで、自分で考えることが減るのでとても楽ちんです。

例えば、Vueにはルーティングの仕組みがありますが、Nuxtではルーティングの記述はいらず、pagesディレクトリに配置したディレクトリパスそのものでルーティングができる仕組みになっています。

Nuxt.jsの起動

npm instal

Nuxtのテンプレートを作成しただけだと、node_modulesが存在しないので、作成して上げる必要があります。

テンプレートにはすでにpackage.jsonが記述されているため、npm installをするだけでOKです。

npm install

これでnode_modulesが作成されます。

起動設定

コンテナ内でnuxtを立ち上げても、ホストOS(Mac等)のブラウザからはアクセスできません。そのため、Nuxtの設定ファイルでポートとホストを指定する必要があります。

nuxt.config.js
module.exports = {
server: {
port: 9000,
host: '0.0.0.0'
},
//以下省略

ここで9000番を指定しています。コンテナ内のNuxtを9000番で立ち上げ、コンテナの9000 <-> ホストOSの9000という風にフォワーディングしています。

これでいよいよ起動できます。

npm run dev

少し時間がかかりますが、

ブラウザからhttps://localhost:9000/にアクセスし、以下の画面が表示されれば終わりです。

お疲れ様でした。

2019/01/20