DockerでVue.jsの環境構築

# はじめに
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の中身
```dockerfile
FROM node:18.12.1
WORKDIR /app
```
nodeのバージョンを公式サイトで確認して書きます
#### docker-compose.ymlの中身(参考サイトのほぼコピペです💦)
```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に書いてあるやつ実行されてる？

# ③コンテナの起動
```zsh
.../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

```
# ④プロジェクトを作成
```zsh
.../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
```

# ⑤起動
```zsh
.../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」で抜け出せました


# 参考
* [dockerでVue環境を構築](https://zenn.dev/rihito/articles/30deafe567a564)
* [dockerでvue3系環境を作成する](https://zenn.dev/salvage0707/articles/vue3-settings-using-docker)
* [Docker上にVue.jsの開発環境を構築する方法。docker-composeで簡単に作成する手順](https://prograshi.com/platform/docker/create-vuejs-on-docker/)