Dockerで作ったNuxt実行環境にGithubからプロジェクトをクローン

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

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使ってます。

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次