Open1
wsl+docker+vue手順メモ
kicchanwslも，dockerも，vueも初心者な私の記録．
2024/01/24時点での取り組みであることに注意
事前準備
以下は省略
- wsl立ち上げ
- プロジェクト用にディレクトリを作成
- 以下のように準備
docker関係
Dockerfileには以下のように記述
Dockerfile
FROM node:lts-alpine
# vue-cliをインストール
RUN apk update && \
apk add --no-cache npm && \
npm install --location=global @vue/cli
WORKDIR /app
lts-alpineでnodeの安定版（=lst）でかつ，Dockerのように限られた環境軽量で最小限の構成（=alpine）で導入できるらしい
docker-compose.yamlの記述は以下
docker-compose.yaml
version: '3'
services:
vue-app:
build:
context: "./frontend"
dockerfile: "Dockerfile"
ports:
- 8080:8080
volumes:
- ./frontend/app:/app
tty: true
environment:
- NODE_ENV=development
サービスはひとまずvue-appだけ立ち上げ．volumesは，「Dockerの外にある，./frontend/appと，Dockerの中にあるappでデータを共有しますよ」という意味らしい．これによって，Dockerを閉じても，ソースコードと環境を記述したファイルが残せることになる．
docker立ち上げ
ここまでかけたら，プロジェクトディレクトリの直下で以下を実行してdocker立ち上げ
docker-compose up
そうすると，何やかんやが走り，nodeやvueがdocker内で構築され，以下のように表示される
docker desktopでも立ち上がっていることが確認できる
で，このあとdokcer内にアクセスするのだが，このターミナルで追加のコマンドを走らせられないことに注意．別のターミナルを立ち上げて，以下のコマンドでアクセスする必要がある
docker-compose exec vue-app sh
すると サービス名 vue-app で示したディレクトリ内に入ることができる．
vueのプロジェクト新規作成
あとは以下でvueのプロジェクトを立ち上げるだけ．
vue create my-app
これで諸々のファイルが作成されて，Docker外のfrontend/appにもファイル群が生成されていることが確認できる
参照