Open2024/01/24にコメント追加1

wsl+docker+vue手順メモ

Docker

WSL 2

docker-compose

kicchan

wslも，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にもファイル群が生成されていることが確認できる

事前準備

docker関係

docker立ち上げ

vueのプロジェクト新規作成

参照