DockerでAngular開発

Transcript

1. DockerでAngular開発 エイチーム新卒２年　ナバロ ライ

2. ココに立つまで ・いろいろな勉強会に興味あり ・LTも挑戦したい！ ・学生の頃、Angular 2をめちゃくちゃ触った 　（現在のバージョン 7）

3. Angularをインストールするか

4. ・・・

5. ローカルを汚したくないな

6. Docker環境でやろう

7. Docker環境構築得意な人〜✋

8. は〜い✋

9. 成果物 GitHub https://github.com/rayyyy/angular-docker

10. Docker環境　要件 ・Angularや必要なコマンドはコンテナ内で実行 ・動作確認はブラウザでできるように ・コンテナ内のファイルはローカルのエディタで編集

11. Docker環境構築の流れ 1. Dockerfileの作成 2. docker-compose.ymlの作成 3. 便利なMakefile作成

12. Dockerfile　作成 FROM node:11.6.0 as build_env RUN npm install -g @angular/cli

    WORKDIR /root/my-app # コンテナ内のファイルはローカルのエディタで編集するために # ローカルのファイルをコンテナ内のワーキングスペースにコピー COPY . /root/my-app/

13. docker-compose.yml　作成 version: '3.7' services: web_dev: build: context: . target: build_env

    tty: true # 処理が終わってもコンテナが終了しないように ports: - "4200:4200" # ローカルでの動作確認用 volumes: - .:/root/my-app # コンテナのフォルダをローカルにマウントする

14. Dockerfile　作成 $ docker-compose up -d $ docker-compose exec web_dev bash

15. Makefile

16. all: rm build up ps build: docker-compose build --no-cache up:

    docker-compose up -d --build exec: docker-compose exec web_dev bash Makefile　作成 ps: docker ps -a && echo "\n" docker-compose ps rm: docker-compose stop docker-compose rm -f

17. $ make up イコール $ docker-compose up -d

18. Angular環境完成したのでプロジェクト作成 $ docker-compose up -d or make up $ docker-compose

    exec web_dev bash or make exec root@71ca9dfb0e43:~/my-app# ng new myApp root@71ca9dfb0e43:~/my-app# cd myApp/ root@71ca9dfb0e43:~/my-app/myApp# ng serve --host 0.0.0.0 http://localhost:4200/
19. None

20. Netlifyでデプロイ&ホスティング 詳しくは書きませんが GitHubと連携するとすぐデプロイできます。 初心者なのでこれぐらいしかまだわかっていませんが 便利そうです

21. ご清聴ありがとうございました