Building Tool Patterns
- CMD/PowerShell
- WSL(Windows Subsystem for Linux)
- 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のインストール
- インストーラ(Docker Desktop Installer.exe)を Docker Hub から取得
- Docker Desktop Installer.exe をダブルクリックし、インストーラを起動
- 確認画面が出たら、 Enable Hyper-V Windows Features （Hyper V の Windows 機能を有効にする）のオプションが、設定ページで選択されているかどうかを確認
- インストール・ウィザードの指示に従い、利用規約（ライセンス）を承諾し、インストーラに権限を与えてインストール
- ンストールに成功したら、 Close （閉じる）をクリックしてインストールを終了
Step.2 Dockerコンテナの作成・ビルド・起動
- 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