Nuxtの開発環境をDockerfileとdocker-compose.ymlで構築したので、備忘録も兼ねて、まとめておきます。
Dockerfile
まずは、イメージの元となるDockerfileを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
FROM node:12.5.0-alpine ENV LANG=C.UTF-8 TZ=Asia/Tokyo WORKDIR /app RUN apk update COPY ./package*.json ./ RUN npm install COPY ./ . ENV HOST 0.0.0.0 EXPOSE 3000 |
- FROM命令で、元となるimageを指定(node)
- ENV命令で、環境変数を指定
- WORKDIR命令で、/app内へ移動
- RUN命令で、packageの更新
- COPY命令で、ホストマシンのpackage.jsonとpackage-lock.jsonをコンテナ内にコピー
- RUN命令で、コンテナ内で、npm installを実行し、moduleインストール
- COPY命令で、ホストマシンのファイルをすべてコンテナにコピー
- ENV HOSTでhostを指定
- EXPOSEで公開するport番号を指定しています
ファイルの上から順に以上の命令を実行しています。
docker-compose.yml
次にdocker-compose.ymlを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
version: '3' services: nuxt: build: . ports: - 3000:3000 volumes: - ./:/app - /app/node_modules tty: true working_dir: /app command: npm run dev |
- buildで【.】を指定することで、同一ディレクトリのDockerfileを元にcontainerを作成します
- portsでホストマシンの3000番portとコンテナの3000番portを照合します
- volumesで、ホストマシンのカレントディレクトリをコンテナの/app似マウント
- Dockerfileでinstallしたnode_modulesが消えないように、/app/node_modulesをホストマシンにマウントします
- tty trueで対話モードで実行します
- working_dirでコマンドを実行するディレクトリを指定
- commandでコンテナが立ち上がったタイミングで、
npm run dev命令を実行するように指定
上から順に、上記動作をdocker-compose.ymlで行っています。
Nuxtプロジェクトに配置して、docker-compose up!
あとは、Nuxtのプロジェクトに上記2ファイルを配置して、ターミナルから
|
1 |
docker-compose up |
を実行しましょう！
これで、ローカルでNuxtの開発環境をDockerで構築することができました！！
