【Angular + SpringBoot】ググりながらアプリを作る02

たけ坊

ここではAngularの実装に入っていくよ！

実際に操作する画面を扱うのでワクワクします！

前提
Dockerを扱う
Angularのインストール
次のステップ

前提

①VSCodeがインストールされている
②WLSがインストールされている

上記の前提がまだの方は下のサイトを参考にしてください。

Dockerを扱う

Dockerとはアプリを自由に動かせるようにできる仮想環境です。自分のPCにいろいろインストールすることなく、アプリケーションを試すことができます。

詳しくはこちらのサイトを参考にしてください！

"Dockerって何？　簡単な言葉で解説するDockerの基本" - Qiita

はじめにDockerを使って開発環境を共有している現場が多くあります。未経験エンジニアで現場に入った際、Dockerについて理解していると、スムーズに作業に入ることができると思います。Dock…

今回はPain Log Appという怪我の内容を記録するアプリを作成しようと考えているので、下記のようなディレクトリ構成でファイルを作っておきます。

ng-pain-log/
└── .devcontainer/
     ├── devcontainer.json
     └── docker-compose.yml

ngとはAngularのことを指します。

devcontainerとはVSCodeで開くDockerことを言います。そのdevcontainer.jsonに以下の内容を記載します。

{
    "name": "angular",
    "dockerComposeFile": ["docker-compose.yml"],
    "service": "angular",
    "workspaceFolder": "/angular"
}

docker-compose.ymlは以下を記載します。

services:
  angular:
    image: node:18
    container_name: angular
    volumes:
      - ../:/angular
    command: bash -c "sleep infinity"
    ports:
      - "4200:4200"

上記ファイルを保存（Ctrl＋S）した後Terminalで、
code ./ng-pain-log
を実行し新しいウインドウでng-pain-logフォルダを開きます。

左下のWSLを左クリックし、表示されたタブから「Reopen in Container」を選択すると、

Docker上でng-pain-logファイルを開くことに成功します！

開いたDevcontainerはピン留め

このDockerのミドルウェアはdocker-compose.ymlに定義されており、node:18がインストールされています。また、4200番ポートが使用できるように指定されています。

Dockerfileやdocker-composeの内容についてはコチラを参照してください！

【初心者向け】手を動かして覚えるDocker入門 - Qiita

はじめに本記は「Dockerをこれから触ろう/学ぼうとしている人向け」の記事になります！Dockerの歴史実際にDockerを動かすハンズオンが記載されています！Dockerとはそもそも…

Angularのインストール

Angularのインストールは、
npm install -g @angular/cli
ng new pain-log
というコマンドを実行すればOKです！（途中にY/nといった選択肢が出ますが、大文字の方を選択しておけば大丈夫です。）

以上がAngularのインストールです。

Angularがちゃんとインストールできているか確認するために、以下のサイトで確認してください！

Angularをインストールする方法（Windows、macOS、Linux別）

Angularは、TypeScriptベースでオープンソースのウェブアプリケーションフレームワークです。主要なオペレーティングシステムにAngularをインストールする手順をご紹介します。

もし、
ng serve
で起動できない場合は、
npx ng serve –host 0.0.0.0 –poll 1
を実行してみてください！

次のステップ

次はAngularのディレクトリ構成とルーティングについてです！