DockerでAngular開発

Transcript

1. 1.

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

2. 2.

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

3. 3.

   Angularをインストールするか

4. 4.

   ・・・

5. 5.

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

6. 6.

   Docker環境でやろう

7. 7.

   Docker環境構築得意な人〜✋

8. 8.

   は〜い✋

9. 9.

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

10. 10.

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

11. 11.

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

12. 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. 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. 14.

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

15. 15.

    Makefile

16. 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. 17.

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

18. 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. 19.

    None
20. 20.

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

21. 21.

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