葛のメモ帳

自分で調べたことを忘れないためにメモっておきます

葛のメモ帳

自分で調べたことを忘れないためにメモっておきます

Vue.js の開発環境をDockerComposeで用意する

手順

  1. Node.jsのバージョンを確認
  2. docker hub の Node.js を確認する
    • Alpine Linux について
  3. Dockerfileの作成
  4. docker-compose.ymlの作成
  5. コンテナ内でVueプロジェクトの作成
  6. 動作確認

今回のファイル構成

$ tree -L 2
.
├── Dockerfile
├── GettingStarted.md
├── docker-compose.yml
└── todo
    ├── README.md
    ├── babel.config.js
    ├── node_modules
    ├── package.json
    ├── public
    ├── src
    ├── tsconfig.json
    ├── vue.config.js
    └── yarn.lock

4 directories, 9 files

Node.js 公式サイトを確認

docker hub の Node.js を確認する

  • https://hub.docker.com/_/node/?tab=tags&page=1&ordering=last_updated

  • Node.js の docker-Image について翻訳node: < version >-alpine

    • このイメージは、人気のある Alpine Linux プロジェクトに基づいており、alpine 公式イメージで利用可能です。Alpine Linux はほとんどのディストリビューションの基本イメージよりずっと小さく (~5MB) 、したがって一般にもっとスリムなイメージになります。

    • 最終的なイメージのサイズをできるだけ小さくすることが第一の関心事である場合、この変種は有用です。注意すべき主な注意点は、glibc とその仲間たちの代わりに musl libc を使っていることで、ソフトウェアが libc の要件や前提条件の深さに応じてしばしば問題に遭遇します。Hacker News のコメントスレッドで、発生しうる問題や、Alpine ベースの画像を使用することの賛否両論について、より詳しく議論しています。

    • イメージのサイズを最小にするため、Alpine ベースのイメージに関連するツール (git や bash など) を追加で含めることは一般的でありません。このイメージをベースに、必要なものを自分のDockerfileに追加してください（よくわからない場合は、パッケージのインストール方法の例として、alpineイメージの説明を参照してください）。

Alpine Linux について

  • Alpine Linuxについて

    • https://www.alpinelinux.org/about/
    • Alpine Linuxは、セキュリティ、シンプルさ、リソース効率を重視するパワーユーザー向けに設計された、独立系、非商用、汎用Linuxディストリビューションです。
    • Small
      • Alpine Linuxは、musl libcとbusyboxを中心に構築されています。そのため、小さく、非常に高いリソース効率を実現しています。コンテナは8MB以下、ディスクへの最小限のインストールで130MB程度のストレージしか必要としません。本格的なLinux環境だけでなく、リポジトリから多くのパッケージを選択することができます。
      • バイナリパッケージは間引きされ、分割されるため、インストールするものをより細かく制御でき、環境を可能な限り小さく、効率的に保つことができます。
    • Simple
      • Alpine Linuxは非常にシンプルなディストリビューションで、あなたの邪魔をしないように努めています。apkと呼ばれる独自のパッケージマネージャ、OpenRC initシステム、スクリプト駆動のセットアップ、これだけです! これによって、ノイズのない、シンプルでクリアな Linux 環境を手に入れることができます。家庭用PVR、iSCSIストレージコントローラ、薄型メールサーバコンテナ、堅牢な組み込みスイッチなど、あなたのプロジェクトに必要なパッケージだけを追加することが可能です。

    • Secure

      • Alpine Linuxは、セキュリティに配慮して設計されています。すべてのユーザランドバイナリは、スタック破壊保護機能付きのPIE（Position Independent Executables）としてコンパイルされています。このような積極的なセキュリティ機能により、ゼロデイ脆弱性などの悪用が防止されます。

  • 今回は node.js lts-alpineを利用します。

    • Dockerfileの作成

    FROM node:lts-alpine
WORKDIR /src
RUN yarn global add @vue/cli
    • FROM
      • コンテナで使うimageを指定する
    • WORKDIR
      • Dockerファイル内で以降に続く、RUNなどの命令の処理時にコマンド実行する場所として使う作業ディレクトリを指定する。
    • RUN
      • shell 形式でコマンド内で実行される
      • vue-cliのinstallを行っている
    • コマンドについて
      • yarn: Facebookが開発したJavaScriptのパッケージマネージャ。npmと互換性があり、インストールが早いことがある。yarn.lockによるバージョン固定化が行われる。（yarnでインストール後に自動生成される）
      • yarn global add: OSにグローバルにパッケージをインストールする

    docker-compose.ymlの作成

    • Docker Compose は複数のコンテナを管理するツール
      • 今回は単体のコンテナだけですが、docker-compose upで起動できるようにします
    version: '3'
services:
  app:
    build: .
    container_name: vue-project
    ports:
      - '8080:8080'
    volumes:
      - ./:/src
    stdin_open: true
    tty: true
    • volumes:
      • ボリュームのマウントを行います。データを永続化したいときは、コンテナの外にデータを置く必要があります。
      • volumesの指定は、コロンを堺に左にホストのパスを、右にコンテナのパスを指定します。
        • ホストのパス:コンテナパス

    コンテナ内でVueプロジェクトの作成

    • DockerDesktopの起動
      • きどうしていない場合は次のエラー出ます
        • docker.errors.DockerException: Error while fetching server API version:

    • コンテナの起動

        $ docker-compose up -d

    • コンテナ内に入る

        $ docker exec -it vue-project /bin/sh

    • Vueの雛形を形成する

        > vue create todo
  ? Please pick a preset: Manually select features
  → Manuallyを選択
  ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Linter
  → TypeScript, Routerを追加
  ? Choose a version of Vue.js that you want to start the project with
  → 2.x
  ? Use class-style component syntax? No
  → Noに変更
  ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
  → そのまま。Babelは、ES6に対応していないブラウザ用にES5に変換してれる。
  ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
  → そのまま。
  ? Pick a linter / formatter config: Prettier
  → Prettierを選択。ESLintだけでも整形できるが、Prettierを入れたほうが強力。
  ? Pick additional lint features: Lint on save
  → そのまま。保存時にLint(ソースコードチェック)を行う。
  ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
  → そのまま。
  ? Save this as a preset for future projects? No
  → そのまま。上記の設定を保存するかどうか。
  ? Pick the package manager to use when installing dependancies: Yarn
  -> Use Yarn

  > cd todo
  > vue add vuetify
  → Defaultのまま。

      • このときコンポーネントネームのエラーが出るが無視する

          yarn install v1.22.19
  [1/4] Resolving packages...
  [2/4] Fetching packages...
  [3/4] Linking dependencies...
  [4/4] Building fresh packages...
  success Saved lockfile.
  Done in 34.27s.
  ⠙  Running completion hooks...
  /src/todo/src/views/HomeView.vue
  10:9  error  Component name "Home" should always be multi-word  vue/multi-word-component-names

  ✖ 1 problem (1 error, 0 warnings)

      • またこのまま yarn serve するとエラーがでる

          $ vue-cli-service serve
  INFO  Starting development server...


  ERROR  Failed to compile with 1 error                                                     6:30:37 PM

  [eslint]
  /src/todo/src/views/HomeView.vue
  10:9  error  Component name "Home" should always be multi-word  vue/multi-word-component-names

  ✖ 1 problem (1 error, 0 warnings)


  You may use special comments to disable some warnings.
  Use // eslint-disable-next-line to ignore the next line.
  Use /* eslint-disable */ to ignore all warnings in a file.
  ERROR in [eslint]
  /src/todo/src/views/HomeView.vue
  10:9  error  Component name "Home" should always be multi-word  vue/multi-word-component-names

  ✖ 1 problem (1 error, 0 warnings)

  webpack compiled with 1 error
  No issues found.

      • todo/.eslintrc.jsに以下を追加する

            rules: {
      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  +   "vue/multi-word-component-names": 0,
    },

        動作確認

    • Vueプロジェクトの立ち上げ

        > yarn serve
    • localhost:8080にアクセス

    localhost:8080

    まとめと次回予告

    • 環境構築で、dockerでNode.jsのコンテナを用意した。
    • Vue CLIを利用してプロジェクトを作成した
    • プロジェクトにvuetifyを追加した
    • 次回 Vue.js + TypeScript Hello World をやっていきたい

    参考