dockerでnuxtの開発環境作ってみた

atma株式会社インターン生のizumiです。

advent calendarという折角の機会なので、今までチキってやっていなかったqiitaに初投稿してみます。

似たような記事は沢山あると思いますが、とりあえずアウトプットしてみよう！を個人的な目標に書いていきたいと思います笑

概要

dockerのコンテナ上にnuxtの開発環境を作ります。

必要最小限の環境のため、さくっとwebアプリのフロント側を作ってみたい、vueやnuxtを動かしながら理解したい、という人向けです。

今回はざっくりとした流れだけご紹介していきたいと思います。

環境構築の流れ

1. dockerをインストール
   
2. Dockerfileを書く
3. docker-compose.ymlを書く
4. dockerのコンテナ作成&起動
5. コンテナ内部でnuxtの開発環境を立ち上げる
   

dockerをインストール

まずはDocker Desktopをインストールします。
インストールできたら、プロジェクト用のディレクトリを作成してプロジェクトに移動しておきましょう。

mkdir sample-app
cd sample-app

Dockerfileを書く

vscodeなどのコードエディタ上で、次のようなDockerfileを作成します。

FROM node:10

ENV APP_ROOT /home/node/app

WORKDIR ${APP_ROOT}
COPY . ${APP_ROOT}

EXPOSE 3000

docker-compose.ymlを書く

続いてdocker-compose.ymlを作ります。

version: '3'
services:
  node-app:
    build: ./
    tty: true
    container_name: "sample-app"
    volumes: 
      - ./:/home/node/app
    environment:
      - NUXT_HOST=0.0.0.0
    ports:
      - "3020:3000"

この2つのファイルを用意できれば、dockerのimageおよびcontainerの作成と起動ができるようになります。

dockerのコンテナ作成&起動

まずはdockerのコンテナを立ち上げてみましょう！

docker-compose up -d 

コンテナが起動できているかは、次のコマンドで確認できます。

docker-compose ps

コンテナのStateがUpになっていたら、無事にコンテナの作成と起動ができています ;)

   Name               Command            State           Ports         
-----------------------------------------------------------------------
sample-app   docker-entrypoint.sh node   Up      0.0.0.0:3020->3000/tcp

コンテナ内部でnuxtの開発環境を立ち上げる

次にコンテナ内部でnuxtの開発環境を立ち上げていきます。

まずは作ったコンテナに潜り込みます。

docker exec -it sample-app sh

nuxtにはプロジェクトを簡単に始められるcreate nuxt-appという足場ツールが用意されているので、今回はそれを使って、カレントディレクトリ.にnuxtプロジェクトを作ります。

yarn create nuxt-app .

そうするといくつか質問されて、それに答えるだけでプロジェクトの設定ができます。

それが終わったら自動的にpackage.jsonに基づいてnuxtに必要なパッケージをインストールしてくれるでしょう。

そして最後に、、!

yarn dev

と打ち込んでやります。そうすると緑と黄色のプログレスバー(これめっちゃカッコ良くないですか？)が表示され、完了したらnuxtの開発環境が無事立ち上がってます;)

docker-compose.ymlに記述したポート番号(今回の例では3020)のサイトにアクセスしてみましょう。

nuxtの雛形のサイトが表示されたと思います。

以上で環境構築完了です。お疲れ様でした！

ひとこと

Dockerfileやdocker-compose.ymlの書き方や意味するところなどは現段階では割愛してますが、必要なところは追記するか、別の記事で書いてみようと思います。

間違ってる点やもっとこうした方がいいよ！っていうのがあればぜひご助言もらえると幸いです！

それでは。