はじめに
Angulerのチュートリアルをする環境をDev Containersで作ります。
準備
- WindowsでDockerをインストールする。
- WSL2でUbuntuを準備する。
- VS Codeをインストールし、拡張機能のWSLをインストールする。
前提
- Windowを使用する。
- WSL2のUbuntuを使用する。
- Dev Containersを使用する。
概要（全体の流れ）
1. WSL2のUbuntuにログインする。
2. コンテナの元となる.devcontainer/devcontainer.jsonを作成
3. Dev Containersコンテナを作成
4. チュートリアルのプロジェクトをダウンロード
5. プロジェクトフォルダに.devcontainer/devcontainer.jsonを移動し、開きなおす。
6. Anguler CLI のインストール
7. モジュールのインストールとアプリケーションの起動
詳細手順
1. WSL2のUbuntuにログインする。
1. WSL2のUbuntuにログイン
2. フォルダを作成する。
mkdir ~/workspases
cd ~/workspases
3. vscodeを起動
code .
2. コンテナの元となる.devcontainer/devcontainer.jsonを作成
1. F1キー（またはCtrl+Shift+P / Cmd+Shift+P）を押してコマンドパレットを開く
2. Dev Containers: Add Dev Container Configuration Files...」 を選択
3. ワークスペースに構成を追加する。（またはAdd configuration to workspace」 を選択）
4. 全てのテンプレートを表示
5. typescriptやpythonなどで検索する
Node.js & TypeScriptを選択
6. バージョンを選択する
24-trixie（既定）を選択
7. インストールする追加機能を選択する。
特に選択する必要はない
8. OKをクリック
9. 確認
ls -la
.devcontainer/devcontainer.jsonが作成される
3. Dev Containersコンテナを作成
1. F1 キー（または Ctrl+Shift+P / Cmd+Shift+P）を押してコマンドパレットを開く。
2. Dev Containers: Reopen in Container と入力して選択する。
4. チュートリアルのプロジェクトをダウンロード
1. チュートリアルのブランチ取得
特定のブランチ（homes-app-start）を指定してクローンする
git clone -b homes-app-start https://github.com/angular/codelabs.git
5. プロジェクトフォルダに.devcontainer/devcontainer.jsonを移動して開きなおす。
.devcontainerはプロジェクトルートに無いと正しく動作しないため開きなおす必要がある。
1. クローンしたcodelabsディレクトリに.devcontainerをコピーして移動
cp -r .devcontainer/ codelabs/
cd codelabs
2. codelabsディレクトリでvscodを開く
code .
3. コンテナを開きなおす
F1 キーから Dev Containers: Reopen in Container を選んでコンテナに入る
6. Anguler CLI のインストール
1. インストール
-g オプションでグローバルインストールする
npm install -g @angular/cli
2. 確認
--depth=0 は依存関係を表示しないオプション
npm list -g --depth=0
7. モジュールのインストールとアプリケーションの起動
1. 初回はモジュールのインストールを行う
npm install
2. アプリケーションの起動
コンテナ外（Windowsのブラウザ）からアクセスできるように、--host 0.0.0.0 --port 4200をつけて開発サーバーを起動。
npx ng serve --host 0.0.0.0 --port 4200
3. 確認
ブラウザにURLを入力する
http://localhost:4200/
開発を再開する際は
「WSL2（Ubuntu）のターミナルを開いて cd codelabs → code .」 という手順で
VS Codeを開く。