実施環境
・macOS 10.15.4
・Docker Desktop Community 2.2.0.5
この記事ではDockerのインストール方法は記述していません。
各自インストールした状態で記事を読み進めてください。
Dockerの準備
アプリを作成したい、好みのディレクトリに移動します。
私はMyNuxtAppとしました。
まず、Docker関連のファイルを作成します。
% mkdir MyNuxtApp
% cd MyNuxtApp
% touch Dockerfile docker-compose.yml
Dockerfile
FROM node:12.4.0-alpine
WORKDIR /app
# コマンド実行
# linux 最新化、gitインストール、npm最新化、vue-cliインストール
RUN apk update && \
apk add git && \
npm install -g npm && \
npm install -g vue-cli
EXPOSE 9000
ブラウザで接続する時に9000番を使用するために、9000番を開放しています。
docker-compose.yml
# Dockerのバージョン
version: '3'
services:
nuxt:
container_name: nuxt_app
build: .
# イメージ名
image: nuxt_app_image
# ホストOSとコンテナ内でソースコードを共有
volumes:
- ./my_nuxt_app:/app
tty: true
# コンテナ内部の9000を外部から9000でアクセス
ports:
- "9000:9000"
vue-cliをインストールしている時に、「非推奨です」と怒られたので、他の方法を検討する必要がありそうです。
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
コンテナ起動
まず、dockerイメージを構築するため、ビルドします。
バックグラウンドで起動するため、-d コマンドをつけています。
$ docker-compose build
$ docker-compose up -d
一番最初はインストールが必要で時間がかかります。しばらく待ちましょう。
インストールが完了したら、イメージがあるか、コンテナが起動しているかを確認します。
% docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
nuxt_app_image latest ee8b24df4da9 15 minutes ago 155MB
% docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
bf8510d55dc2 nuxt_app_image "docker-entrypoint.s…" 19 minutes ago Up 4 minutes 0.0.0.0:9000->9000/tcp nuxt_app
docker-compose.ymlで指定したイメージ名・コンテナ名になっているはずです。
コンテナ接続
% docker exec -it nuxt_app sh
/app #
接続に成功すれば、/appディレクトリに入ります。
Nuxt.jsのプロジェクトの作成・起動
最後に、Nuxtのプロジェクトを作成します。
ここではNuxtのコミュニティが作成しているテンプレートを使用します。
/app # vue init nuxt-community/starter-template my_nuxt_app
プロジェクト名や説明、作者などを質問されます。面倒な場合はEnter連打で問題ないです。
完了すると、my_nuxt_appディレクトリが作成されるので、こちらに移動します。
このテンプレートにはまだnode_modulesが存在しないので、インストールしてあげます。
/app # cd my_nuxt_app
/app/my_nuxt_app # npm install
起動設定
コンテナ内でNuxt.jsを立ち上げるだけでは、ブラウザからはアクセスできません。
設定ファイルでポートとホストを指定する必要があります。
作成したmy_nuxt_app直下にあるnuxt.config.jsを編集します。
module.exports = {
// ここから追記
server: {
port: 9000,
host: '0.0.0.0'
},
// ここまで
......
ここで9000番を指定します。
docker-compose.ymlで指定したポート番号と揃えましょう。
これでいよいよ起動できます。
/app/my_nuxt_app # npm run dev
コンパイルが完了すると、
ℹ Listening on: http://172.20.0.2:9000/
などと表示されます。
Google Chromeでhttp://localhost:9000/を表示させると、、、
おめでとうございます！
ひとまずNuxt.jsのプロジェクトを立ち上げることができました。
次は、このプロジェクトを使って実装していきます。
最後までご覧いただきありがとうございました。