Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DockerでAngular開発

0efeeaefa58435c513886e372cc63575?s=47 rayyyy
January 11, 2019
240

 DockerでAngular開発

0efeeaefa58435c513886e372cc63575?s=128

rayyyy

January 11, 2019
Tweet

Transcript

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

  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. ご清聴ありがとうございました