開発環境を作る part3
今回用意したgit
front : https://github.com/dsrice/base-angular/tree/step1
docker: https://github.com/dsrice/base_docker/tree/step3
はじめに
part3もかかってしましましたが、
環境つくりも今回で最後です。
いろいろ触ったときにupdateしていくかもしれませんが、
始めるには必要な環境はとりあえず揃います。
今回はフロントサイドになるAngularを使えるようにしたコンテナの追加です。
今まではいろいろと面倒なことも多かったですが、
今回はシンプルだと思います。
手順1 フロントサイドコンテナの追加
api側今回編集しないので省略しますが、新しくフロント関連のを追記します。
作業ディレクトリ
┣ーーbase_docker
┃ ┣ーーcontents
┃ ┃ ┗ーーmysql
┃ ┃ ┣ーーDockerfile
┃ ┃ ┗ーーconf.d
┃
┗ーーbase-angular(追加しなくてもdocker起動時に追加されます）
docker-compose.ymlの追記内容は以下のようになります。
version: '3'
services:
base_db:
restart: always
environment:
TZ: 'Asia/Tokyo'
volumes:
- ./cache/db/ :/var/lib/mysql
- 33306:3306
# ここから追加
front:
build: ./contents/front
container_name: base-front
- "4200:4200"
volumes:
- "../base-angular :/basefront"
tty: true
# ここまで追加
restart: always
- "8000:8000"
volumes:
- "./contents/server :/code"
depends_on:
- base_db
tty: true
environment:
- PMA_ARBITRARY=1
- PMA_HOSTS=base_mysql
- PMA_USER=blog
- PMA_PASSWORD=blog
- 8080:80
Dockerfileの内容は以下のものになります。
FROM node:12.16.1
RUN npm install -g @angular/cli
RUN mkdir /basefront
WORKDIR /basefront
EXPOSE 4200
*ここではVersion指定しています。
動作確認時はVersion9.1.4が最新でしたが、何をやっても新規作成ができませんでした。
どうにか突破しようとしましたが、厳しい感じでした。
状況を見守って外せればと思っています。
追加ができたら、base_dockerフォルダまで移動して
docker-compose build
を実行してください。
buildが実行出来たら
docker-compose build
を実行して、
新しく「base-front」というコンテナが動いていることを確認しましょう。
手順2 angulerのアプリの作成
次に開発するためのangularプロジェクトを作ります。
base-frontコンテナに入ります。
docker exec -it base-front /bin/bash
コンテナ内に入ったら
ng new front
で新しいAngularアプリを用意しましょう。
アプリ作成時に2つほど質問されます。
私は以下の設定が実行しました。
お好みで実行してもらえればと思います。
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
エラーが発生することがあります。
コンテナを再起動したりすると問題なく作成できるようになったりと
なかなかの謎の状況でした。
無事に作成ができたら
ng serve --host=0.0.0.0
に起動してください。
ホストOSのブラウザで
にアクセスしてください。
成功すると以下のページが表示されます。
ここまで来たらほぼ終了です。
最後にdocker-compose.ymlにcommandを追加して
コンテナを起動したときにアプリを起動するようにしましょう。
version: '3'
services:
base_db:
restart: always
environment:
TZ: 'Asia/Tokyo'
volumes:
- ./cache/db/ :/var/lib/mysql
- 33306:3306
front:
build: ./contents/front
container_name: base-front
- "4200:4200"
command: ng serve --host=0.0.0.0(追加）
volumes:
- "../base-angular/front :/basefront"(修正）
tty: true
restart: always
- "8000:8000"
volumes:
- "./contents/server :/code"
depends_on:
- base_db
tty: true
environment:
- PMA_ARBITRARY=1
- PMA_HOSTS=base_mysql
- PMA_USER=blog
- PMA_PASSWORD=blog
- 8080:80
私の環境だけかもしれませんが、Angularの立ち上がりが遅かったです。
時間がかかるものだとして割り切って使うことにします。
補足(The Schematic workflow failed.See above. エラー)
ng new をしたときになぜかエラーになることがある
動作確認中によく起きたので、対応をまとめておく
出たエラー内容で最も多かったのが、
npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path /basefront/basefront/node_modules/.staging/@schematics/update-b00fae6d
npm ERR! dest /basefront/basefront/node_modules/@schematics/update
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, rename '/basefront/basefront/node_modules/.staging/@schematics/update-b00fae6d' -> '/basefront/basefront/node_modules/@schematics/update'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-05-03T02_08_25_658Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.
エラーがでたあとに状況を確認すると
node_modules / .stagingフォルダの中に対象のエラーを出力したモジュールが残っていた。
対応手順は、
①.stagingフォルダ内に残っているものをすべて削除します。
②コンテナに入り、Angularアプリのフォルダで
（私の場合は、basefront/basefront)
npm i
を実行します。
発生する理由は調べてもよくわかりませんでした。
この方法でもうまくいく時といかない時がありましたので原因が
わからないので完璧な対応にはなりませんでした。
それでもうまくいかないときは
node_modulesフォルダの中身をすべてなくして
npm i
を実行します。
