Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DockerでAngular開発
Search
rayyyy
January 11, 2019
0
410
DockerでAngular開発
rayyyy
January 11, 2019
Tweet
Share
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
Building Adaptive Systems
keathley
36
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Statistics for Hackers
jakevdp
793
220k
How to name files
jennybc
75
97k
Design by the Numbers
sachag
277
19k
Clear Off the Table
cherdarchuk
90
320k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
42
2k
Building Flexible Design Systems
yeseniaperezcruz
324
37k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.2k
Transcript
DockerでAngular開発 エイチーム新卒2年 ナバロ ライ
ココに立つまで ・いろいろな勉強会に興味あり ・LTも挑戦したい! ・学生の頃、Angular 2をめちゃくちゃ触った (現在のバージョン 7)
Angularをインストールするか
・・・
ローカルを汚したくないな
Docker環境でやろう
Docker環境構築得意な人〜✋
は〜い✋
成果物 GitHub https://github.com/rayyyy/angular-docker
Docker環境 要件 ・Angularや必要なコマンドはコンテナ内で実行 ・動作確認はブラウザでできるように ・コンテナ内のファイルはローカルのエディタで編集
Docker環境構築の流れ 1. Dockerfileの作成 2. docker-compose.ymlの作成 3. 便利なMakefile作成
Dockerfile 作成 FROM node:11.6.0 as build_env RUN npm install -g @angular/cli
WORKDIR /root/my-app # コンテナ内のファイルはローカルのエディタで編集するために # ローカルのファイルをコンテナ内のワーキングスペースにコピー COPY . /root/my-app/
docker-compose.yml 作成 version: '3.7' services: web_dev: build: context: . target: build_env
tty: true # 処理が終わってもコンテナが終了しないように ports: - "4200:4200" # ローカルでの動作確認用 volumes: - .:/root/my-app # コンテナのフォルダをローカルにマウントする
Dockerfile 作成 $ docker-compose up -d $ docker-compose exec web_dev bash
Makefile
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
$ make up イコール $ docker-compose up -d
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/
None
Netlifyでデプロイ&ホスティング 詳しくは書きませんが GitHubと連携するとすぐデプロイできます。 初心者なのでこれぐらいしかまだわかっていませんが 便利そうです
ご清聴ありがとうございました