実施環境
・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-alpineWORKDIR /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 コマンドをつけています。
$docekr-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のプロジェクトを立ち上げることができました。
次は、このプロジェクトを使って実装していきます。
最後までご覧いただきありがとうございました。