はじめに

DockerでVue.jsの環境を構築を行ったので、記録用に書きます。
色々な方の記事を結構参考にしてやりました。

超初心者の私が欲しかった超初歩的な細かい情報も書いてるので、どこかの誰かの役に立てれば…
「コマンドを実行するディレクトリはどこ？」
→これを間違えて、全工程完了後フォルダ内に何もインストールされないという変なことが起きました。
「ディレクトリ構成図が解読できない😇これファイル？フォルダ？どこに何がインストールされるの？」

環境

PC: MacBook Air 2019
OS: Ventura
Docker 20.10.17
Docker-compose v2.6.1

①フォルダを作成

$ mkdir svtApp　でフォルダ作成
$ cd svtApp　でそのフォルダ内に移動
$ mkdir vueApp,$ touch Dockerfile,$ touch docker-compose.yml

svtApp
├──(file) Dockerfile
├──(file) docker-compose.yaml
└──[folder] vueApp

②Dockerfile & docker-compose.ymlの中身作成

Dockerfileの中身

FROM node:18.12.1
WORKDIR /app

nodeのバージョンを公式サイトで確認して書きます

docker-compose.ymlの中身(参考サイトのほぼコピペです💦)

version: '3.9'
services:
#"vue-app" という名前で「サービス」を定義
  vue-app:
#build...ComposeFileを実行し、ビルドされるときのpath
    build:
      context: .
      dockerfile: Dockerfile

#tty...
    tty: true

#environment...DBについての環境変数設定
    environment:
      - NODE_ENV=development

#volumes...マウントする設定ファイルのパスを指定
    volumes:
    - ./vueApp:/app

#command...
    command: sh -c "cd vue-sample && npm run serve"

#ports...ホストの「ポート番号」とコンテナーの「ポート番号」の対応付けを定義
    ports:
    - "8080:8080"

疑問

「DockerfileのWORKDIR」と「docker-compose.ymlのvolumes」は一緒にする（？）
全部通してやってみて思ったけど、commandに書いてあるやつ実行されてる？

③コンテナの起動

.../svtApp % docker-compose build
-----
[+] Building 2.5s (6/6) FINISHED   
=> 色々
=> 文字が続いて
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them

④プロジェクトを作成

.../svtApp % docker-compose run --rm vue-app sh -c  "npm install -g @vue/cli @vue/cli-init && vue create vue-sample"
-----
# vueのバージョンとパッケージマネージャーを選択
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: NPM

Vue CLI v5.0.8
✨  Creating project in /app/vue-sample.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 856 packages, and audited 857 packages in 3m

91 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
🚀  Invoking generators...
📦  Installing additional dependencies...


added 102 packages, and audited 959 packages in 31s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-sample.
👉  Get started with the following commands:

 $ cd vue-sample
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
 You will need to perform the initial commit yourself.

最後に警告が出てきてるんですが、よく分からなかったので無視しました。（わかる方教えて欲しいです💦)

この時点でのフォルダ構成

※重要そうなところをメインに書きました

svtApp
├──(file) Dockerfile
├──(file) docker-compose.yaml
└──[folder] vueApp
	└──[folder] vue-sample
		├──(file) README.md
		|	    : 色々ファイル
		├──[folder] node_modules
		├──[folder] public
		└──[folder] src
			├──[folder] assets
			|	└──(file)logo.png
			├──[folder] components
    		|	└──(file) HelloWorld.vue
			├──(file) App.vue
			└──(file) main.js

⑤起動

.../svtApp % cd vue-sample
.../svtApp/vue-sample $ npm run serve

---
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.*.*:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

http://localhost:8080/にアクセス
〜作業〜
↓
「^(control) + C」で抜け出せました

参考