Getting Ready for Vue on Windows

Building Tool Patterns

1. CMD/PowerShell
2. WSL(Windows Subsystem for Linux)
3. Docker

Getting Ready

1. CMD/PowerShell

Steps

Node.jsのインストール

https://docs.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows
https://github.com/coreybutler/nvm-windows

• Node.jsは固定のバージョンをインストールせずにバージョンマネージャーを介してインストール

• 最新リリースの nvm-setup.zip をダウンロード

• ZIP ファイルを開いて、nvm-setup.exe ファイルを開く

• Setup-NVM-for-Windows インストール ウィザードの指示に従って、セットアップ手順を行う

• PowerShell を開き、windows-nvm を使用して、Node.js の現在のリリースをインストール

nvm install latest

2. WSL

Steps

Optional WSL用コマンドラインツールのインストール

• ex. Windows ターミナル
• https://docs.microsoft.com/ja-jp/windows/terminal/get-started

Step.1 Linux 用 Windows サブシステムを有効にする

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

Step.2 WSL 2 の実行に関する要件を確認する

• x64 システムの場合:バージョン 1903 以降、ビルド 18362 以上
• ARM64 システムの場合:バージョン 2004 以降、ビルド 19041 以上
• 18362 より前のビルドは WSL 2 をサポートしていません

Step.3 仮想マシンの機能を有効にする

管理者として PowerShell を開き、以下を実行

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Step.4 Linux カーネル更新プログラム パッケージをダウンロードする

• 最新のパッケージをダウンロードします
• 前の手順でダウンロードした更新プログラム パッケージを実行します

Step.5 WSL 2 を既定のバージョンとして設定する

wsl --set-default-version 2

Step.6 選択した Linux ディストリビューションをインストールする

• Microsoft Store を開き、希望する Linux ディストリビューションを選択します
• ディストリビューションのページで、[入手] を選択します
• 新しい Linux ディストリビューションのユーザー アカウントとパスワードを作成する

Step.7 Node.jsのインストール

https://docs.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl

• Node.jsは固定のバージョンをインストールせずにバージョンマネージャーを介してインストール

• cURL をインストール

sudo apt-get install curl

• nvm をインストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

• Node.js の最新の安定した LTS リリースをインストール

nvm install --lts

3. Docker

Steps

Optional WSL用コマンドラインツールのインストール

• ex. Windows ターミナル
• https://docs.microsoft.com/ja-jp/windows/terminal/get-started

Step.1 Node.jsのインストール

• WSLを参照 (PowerShellでは後続の作業にてエラーが発生)

Step.2 Dockerのインストール

https://docs.docker.jp/docker-for-windows/install.html

• インストーラ(Docker Desktop Installer.exe)を Docker Hub から取得
• Docker Desktop Installer.exe をダブルクリックし、インストーラを起動
• 確認画面が出たら、 Enable Hyper-V Windows Features （Hyper V の Windows 機能を有効にする）のオプションが、設定ページで選択されているかどうかを確認
• インストール・ウィザードの指示に従い、利用規約（ライセンス）を承諾し、インストーラに権限を与えてインストール
• ンストールに成功したら、 Close （閉じる）をクリックしてインストールを終了

Step.2 Dockerコンテナの作成・ビルド・起動

https://jp.vuejs.org/v2/cookbook/dockerize-vuejs-app.html

• shellコマンドはUbunts上で実行

// Dockerfile
FROM node:lts-alpine

# 静的コンテンツを配信するシンプルな http サーバをインストールする
RUN npm install -g http-server

# カレントワーキングディレクトリとして 'app' フォルダを指定する
WORKDIR /app

# `package.json` と `package-lock.json` （あれば）を両方コピーする
COPY package*.json ./

# プロジェクトの依存ライブラリをインストールする
RUN npm install

# カレントワーキングディレクトリ(つまり 'app' フォルダ)にプロジェクトのファイルやフォルダをコピーする
COPY . .

# 本番向けに圧縮しながらアプリケーションをビルドする
RUN npm run build

EXPOSE 8080
CMD [ "http-server", "dist" ]

▼

docker build -t vuejs-cookbook/dockerize-vuejs-app .

▼

docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app