Githubで公開されている様々なイケてるNuxt.jsプロジェクトを、クローンして試したいなというケースは多いでしょう。
私も他人のコードを拝借拝見するのが好きで勉強がてらクローンするのですが、いろんなライブラリやバージョン違いのNodeなどをローカルに構築してしまうのが苦痛で、こういうときこそDockerをうまく使いたいなと思ってました。
やり方はいくつかあると思うのですが、Dockerで作ったNuxt実行環境に、Githubからクローンしてきたプロジェクトを展開する方法が確立できたので備忘録として残します。
もっといいやり方あるよ！って方はぜひ教えて下さいm(_ _)m
DockeでのNuxt実行環境構築
まずはDockerでNuxt実行環境をサクッと作っちゃいます。
このあたりは、ほぼ定形です。
FROM node:12.13.0-alpine
RUN apk update && \
apk add --no-cache git curl && \
curl -o- -L https://yarnpkg.com/install.sh | sh &&\
npm install -g npm && \
npm install -g @vue/cli && \
npm install -g nuxt
ENV PATH $HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH
ENV HOST 0.0.0.0
WORKDIR /app※OSは軽量のalpineを選定しています。
※パッケージ管理にはYarnを入れます。
version: '3.8'
services:
web:
build: .
volumes:
- './:/app'
ports:
- 3000:3000
container_name: 'nuxt'
tty: tru同一ディレクトリに上記Dockerfileとdocker-compose.ymlを作成し、
docker-compose upすることで、ひとまずNuxt.jsの実行環境がDockerコンテナとして立ち上がります。
DockerコンテナにGithubのプロジェクトをクローン
1.githubプロジェクトのクローン
上記で構築したNuxtコンテナ上でGithubのNuxtプロジェクトをクローンします。
docker-compose.ymlのあるディレクトリで
docker-compose exec web shとしてコンテナのシェルに入ります。
git clone <Project Repository>目的のプロジェクトをクローンします。
cd <Project Directory>クローンが完了したら、コンテナ上にできたプロジェクトのディレクトリに移動
yarnとしてプロジェクトのpackage.jsonに書かれているモジュール・ライブラリ等をセットアップします。
Dockerコンテナでnuxtの開発用サーバーを起動するには、もうひと手間必要です。下記のおまじないコードを追記します。
DockerコンテナでNuxtプロジェクトを動かすおまじない
上記でクローン、セットアップが完了したNuxtプロジェクト内のnuxt.config.jsファイルに次のおまじないコードを追記します。
これを書かないと、Dockerコンテナ上の開発サーバーがうまく起動しません。つまり「yarn dev」してもlocalhost:3000でプレビューできないのです。
export default {
server: {
port: 3000,
host: '0.0.0.0',
},
}ポートとホストの設定ですね。明示的に書かないとDockerfileやdocker-compose.ymlで設定したポート・ホストと接続できないようです。
これですべての準備が整いました。お疲れさまですm(_ _)m
では、いざ尋常に「yarn dev」してみましょう。
yarn devの手順
docker-compose.ymlのあるディレクトリにて
docker-compose exec web shとしてDockerコンテナに入り、
cd <Project Directory>でNuxtプロジェクトディレクトリに移動。
yarn devすれば、晴れてlocalhost:3000に開発用サーバーが立ち上がっているでしょう！！
ポイントはDockerコンテナ上で作業することです。
作成しているDockerコンテナは「実行環境はDocker」「開発コードはローカル（とdockerコンテナで共有）」となっています。
ついつい忘れてローカルで「yarn dev」してしまいがちですが、nuxtの実行環境はあくまでもDockerコンテナ上にあるため、nuxtのコマンドもコンテナに入って実行します。
ソースコードの編集は、ローカルのnuxtプロジェクトをVSCodeなどで編集すればそのままDockerコンテナに反映されますから、まるでローカル内で開発しているような快適感があります。
Dockerも使い所がわかってくると、各種コマンドの煩わしさもそれほど感じなくなるので不思議です・・・。
さいごに
githubで公開されている素晴らしいプログラムをクローンして自分で動かしてみたい！
って場合に、どうしても自分のPCの環境を汚してしまうんですよね。nodeのライブラリ・モジュール系の依存関係はなかなかに手強いです＾＾；
Dockerでテスト専用のコンテナを立てて、不要になったら破棄していけば、ローカルストレージの容量もnode系の環境も切り離すことでき、無用な悩みが消えます。
Dockerfileやdocker-compose.ymlを扱うのは少し難儀しますが、ほぼ定形ですので、「PCのローカル環境をきれいに保つため」と割り切って覚えてしまえるといいですね。
私はそんな感じでDocker使ってます。
コメント