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/
20. Netlifyでデプロイ&ホスティング 詳しくは書きませんが GitHubと連携するとすぐデプロイできます。 初心者なのでこれぐらいしかまだわかっていませんが 便利そうです
21. ご清聴ありがとうございました