【Docker】Nuxtの開発環境をDockerfileとdocker-compose.ymlで構築してみた!

Nuxtの開発環境をDockerfileとdocker-compose.ymlで構築したので、備忘録も兼ねて、まとめておきます。

Dockerfile

まずは、イメージの元となるDockerfileを作成します。

  • 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を作成します。

  • 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ファイルを配置して、ターミナルから

を実行しましょう!

これで、ローカルでNuxtの開発環境をDockerで構築することができました!!

ABOUTこの記事をかいた人

新卒でノマドワーカー(webデザイナー)として独立し、半年で月収100万円を達成する。その後、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んできました。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは、お金のことを考えずに、様々な企業でエンジニア修行をさせていただきながら、複数のメディアやアプリとweb制作事務所を運営しています。 趣味は株式投資(米国・日本株メイン)で、トレードを楽しむ日も多いです!