Angular環境構築手順（Docker上に構築する）

はじめに

今回はDocker上にAngularの開発環境構築を行います。
以前投稿したReactの環境構築と手順はほぼ同じです。
React環境構築手順（Docker上に構築する）

Reactの環境構築手順との違いはいくつかありますが、大きく異なるのは下記になります。
この点を注意して作業すると違いがわかりやすいと思います。

デフォルトで立ち上げるサーバのポート番号がReactは3000で、Angularは4200
Angularはngコマンドを使って操作する

本記事でもDockerの環境構築については省略します。Dockerの環境構築手順は以下の記事を参考にしてください。
Docker環境構築：Windows+Virtualbox+Vagrant+Ubuntu上にDocker開発環境構築
※上記記事ではWindowsのVirtualbox上にDocker環境を構築していますが、Windowsではない場合やWSLを使ったDocker環境でも構いません。

全般的な注意点

本記事のコマンド実行例の行先頭の「>」「$」「#」はプロンプト記号なので入力時は不要。
本記事のコマンド実行例の行末にコメントを入れている場合があるが、コピペする際はコメント部分は含まないように注意。

Angular環境構築手順

1.Dockerfile作成＆Dockerイメージ作成

Ubuntu上でDockerfileを作成していく。vagrantユーザで作業しています。

$ cd ~
$ mkdir angular
$ cd angular
$ vi Dockerfile

※今回はAngular環境なので「angular」ディレクトリを作成し、その下にDockerfileを配置します。
※上記はコマンドで操作していますが、GUIで操作してもOK。

次のようにDockerfileを記述。今回はfirebaseもnpmインストールしている例を書いているが、使わない場合は不要。

FROM node:16-alpine3.13 (←Nodeバージョン16をDockerHubから取得。Nodeに合わせたnpmも含まれている)

WORKDIR /app (←以降のコマンドを実行するディレクトリを指定する)

RUN npm install -g @angular/cli (←AngularCLIをインストール。これでngコマンドが使えるようになる)
RUN ng new sample (←sampleディレクトリ配下にAngularプロジェクトをインストール)

2.docker-compose.yml作成＆Dockerコンテナ起動

Dockerfileと同じ場所にdocker-compose.ymlを作成する

version: '3'
services:
  sample-angular: (←サービス名。「docker-compose run」コマンドなどで指定する)
    image: sample-angular-image (←指定しないと自動命名される)
    container_name: sample-angular-container
    build:
      context: . (←カレントディレクトリ配下のDockerfileを指定したいので、「.」)
      dockerfile: Dockerfile (←「docker-compose up -d」コマンドを実行するときにここで指定したDockerfileを見てbuildも行ってくれる)
    command: sh -c "ng serve --host=0.0.0.0" (←コンテナ起動時に実行するコマンド。Angularのサーバを立ち上げる)
    ports:
      - "4200:4200"
    volumes:
      - ./app:/app
    working_dir: /app/sample

※Dockerfileとdocker-compose.ymlは、WinSCPやVSCode Remote Developmentで接続して編集しても構わない。

docker-compose.ymlのあるディレクトリで以下のコマンドを実行

$ docker-compose build

→イメージのビルドが行われ、イメージが生成される。

次にAngularのプロジェクトを作成する。

$ docker-compose run --rm sample-angular sh -c "ng new sample"

→appディレクトリの下にsampleディレクトリが出来上がり、その下にpackage.json等が生成されていることを確認。

Ubuntu上のrootユーザでディレクトリが作成されているので、今後ファイル編集をvagrantユーザでできるように、vagrantユーザに権限を変える。

$ sudo chown -R vagrant:docker app

続けてdocker-compose.ymlのあるディレクトリで以下のコマンドを実行

$ docker-compose up -d

※ただしこの場合も、Docker内のコマンドで作成されたファイルはrootユーザが所有者になってしまい、ホスト側(Vagrant側)で編集ができないので注意が必要。

3.Angular初期画面を表示

Windowsから、ブラウザで
http://192.168.33.10:4200
にアクセス
Angularのデフォルト初期画面が表示されたらOK
※docker-compose.ymlに記載しているng startコマンドがしばらく時間がかかるので、少し待ってからアクセス。