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 の現在のリリースをインストール

```PowerShell
nvm install latest
```


### 2. WSL

#### Steps

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

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

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

```PowerShell
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 を開き、以下を実行

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

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

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

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

```PowerShell
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 をインストール

```Shell
sudo apt-get install curl
```

- nvm をインストール

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

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

```Shell
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
// 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" ]
```

▼

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

▼

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