自分のホスト環境(自分のPC)にNode.jsをインストールしていて、npmやyarnなどのパッケージ管理ツールをいれているのであれば、vue-cliかcreate-nuxt-app等を使ってつくるのが手っ取り早いかと思います。Dockerをつかうので、自分のホスト環境にはNode.js等はなるべくいれないで、コンテナ内で完結するようにしてみます。そこで今回は、vue-cliで引っ張ってくるスターターテンプレートをgitで直接もってきて、それをもとにプロジェクトを作成することにします。cloneし、srcディレクトリに格納します。srcスターターテンプレートのリポジトリをもってきたら、すこし作業が必要です。リポジトリ内のtemplate配下のファイルを作成したsrc配下にもってきます。このへんの作業を毎回やるのは面倒なので、githubに作業後の状態をあげています。この段落の最後に貼ってます。template/また、package.jsonのname、description、authorを適宜修正しておきます。"tohu",これで準備が整いました。以下は、スターターテンプレートの内容を修正した後の状態になります。srcDockerを準備する次に、Nuxt.jsを動かすための環境をDockerでつくっていきます。自分のホスト環境にDockerとdocker-composeを用意しておく必要があります。Dockerfile最初に用意したoskae配下のディレクトリに用意したDockerfileを以下のように編集します。--no-cacheやっていることを、上から簡単に見ていきます。ベースとなるOSですが、非常に軽いAlpineと呼ばれるOSイメージを使います。下記は、AlpineにNode.jsのver9.11がインストールされた状態のイメージになります。node:9.11-alpine続いて、shadowと呼ばれるパッケージをインストールし、Nuxt.jsを実行するユーザーappをつくります。Alpineは軽量なんですが、それだけにuseraddとかのコマンドがデフォルトでないみたいなので、shadowをインストールしてます。appテスト環境なのでrootユーザーで実行しても問題はなさそうですが、コンテナをフルで活用して本番環境でもがんがんつかっていくかもしれない未来のことを考えてユーザー作成を習慣化しておきます。したら環境変数HOMEに、appユーザーのホームディレクトリを指定し、ホスト環境のpackage.jsonをコンテナ内にコピーします。ファイルの権限もappユーザーにしときます。--no-cachedocker-compose.ymlDockerfileの準備ができたら、docker-compose.ymlも用意します。コンテナはひとつしかないので、docker-composeは使わなくてもいいような気がしますが、何かと便利で、こっちに慣れてしまったので、積極的に使っていきます。最初に作成したoskaeディレクトリ直下にdocker-compose.ymlを作成します。dokcer-compose.yml念のためですが、ディレクトリ構成はこんな感じになってます。srcdocker-compose.ymlを以下の内容に修正します。個別でみていく余力がなくなったので、内容をコメントに書いています。/home/app/nuxt/node_modules起動する長くなりましたが、もうそろそろ終わります。dokcer-compose.ymlが置いてあるディレクトリに移動して、以下のコマンドを叩きます。すると、Dockerfileに記載されている内容で、イメージが作成されていきます。installを行なっているので、イメージにNuxt.jsに必要なパッケージもイメージに含まれることになります。--no-cache最後にコンテナを起動し、ログにOPENの内容が表示されたら、「http://localhost:3000」にアクセスしてみましょう。こんな感じの内容が見ることができたら無事完了です!起動したNuxt.js本体にまったく触れることができませんでしたが、次回さわっていこうと思います。16:563連休だしDocker環境でNuxt.jsをさわってみよう関連記事2019-01-022018年の振り返りあけましておめでとうございます。»プロフィール30歳からWebやらなんやらを学び始めた人のブログです。(4)検索はてなブログをはじめよう!konoemarioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。