MSYS2でDocker Toolboxから、AngularCLIを実行するまでの手順についてです！
色々調べてやっと実行するところまで漕ぎ着けることができました……！
- 作業ディレクトリの作成
- Dockerfileの作成
- docker-compose.ymlの作成
- dockerの起動
- docker-composeでコンテナの起動
- Nodeのbashに入る
- 参考
- あとがき
作業ディレクトリの作成
適当な作業ディレクトリを作って移動します。
$ cd ~ $ mkdir docker $ mkdir docker/angular/ $ cd docker/angular/
Dockerfileの作成
Dockerfileを作成します。
FROM node:latest RUN apt update && apt -y install vim RUN npm install -g @angular/cli && ng config -g cli.packageManager yarn WORKDIR /projects
内容は
- FROM: 最新版nodeを使う
- RUN(1): 必要なパッケージをインストール(vim)
- RUN(2): Angule関連をインストール
- WORKDIR: 作業ディレクトリの設定
をしています。
項番2は実際やってたら、vimすら使えなかったので事前に設定しておきました。
単純に起動確認するだけだったら、項番2は不要です。
docker-compose.ymlの作成
docker-compose.ymlを作成します。
version: '3' services: node: build: . ports: - "4200:80" volumes: - ".:/projects" tty: true
dockerの起動
以前起動の流れを書きましたが、dockerをいじくるので、このタイミングでデーモンを起動等をしていないといけません。
起動していないと、こんな感じにコマンド実行時に怒られます。
$ error during connect: Post http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.40/build?buildargs=%7B%7D&cachefrom=%5B%5D&cgroupparent=&cpuperiod=0&cpuquota=0&cpusetcpus=&cpusetmems=&cpushares=0&dockerfile=dockerfile&labels=%7B%7D&memory=0&memswap=0&networkmode=default&rm=1&session=7i4qgoamg48hcfm6okp8dlnpp&shmsize=0&t=docker-angular%3Aangular8&target=&ulimits=null&version=1: open //./pipe/docker_engine: The system cannot find the file specified. In the default daemon configuration on Windows, the docker client must be run elevated to connect. This error may also indicate that the docker daemon is not running
ということでDockerの起動をかけます。
$ docker-machine start default
$ denv default
ちなみにこの2つをshellに書いて実行したら、なぜか「denv」がうまく動作しないみたいで、↑のエラーが出ました……
なんかいい方法ないものだろうか……
Docker起動済みで他のコンソールで実行したいとき
既にDockerの起動をかけた状態で、他のコンソールで作業したい場合
$ denv default
をしないとDocker関連コマンドでエラーします。
起動した状態で、
$ docker-machine start default
をしても、「起動済みだよ！」と言われるだけなので、毎回
$ docker-machine start default
$ denv default
の2つを実行しちゃってもいいかもしれません。
起動の確認分、無駄な時間を食いますが。
docker-composeでコンテナの起動
docker-composeでコンテナの起動をかけます。
$ dc up -d
こんな感じのログが出ます。
表示を開く
$ dc up -d Building node Step 1/3 : FROM node:latest latest: Pulling from library/node 844c33c7e6ea: Pull complete ada5d61ae65d: Pull complete f8427fdf4292: Pull complete f025bafc4ab8: Pull complete 7a9577c07934: Pull complete 9b4289f800f5: Pull complete 76fc26f5b30d: Pull complete c017110d1ab1: Pull complete 82e180c7b451: Pull complete Digest: sha256:7c06c33daa515bd022eda4bafc84c2c71490ac47c51f763d7e21f49a7aeeb8b5 Status: Downloaded newer image for node:latest ---> 8a9f16c06013 Step 2/3 : RUN npm install -g @angular/cli && ng config -g cli.packageManager yarn ---> Running in b4c7990a5fce /usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng > @angular/cli@8.3.20 postinstall /usr/local/lib/node_modules/@angular/cli > node ./bin/postinstall/script.js + @angular/cli@8.3.20 added 251 packages from 186 contributors in 41.473s Removing intermediate container b4c7990a5fce ---> 29966daf2ce8 Step 3/3 : WORKDIR /projects ---> Running in 7dd31b96ed3f Removing intermediate container 7dd31b96ed3f ---> c0885f8a7745 Successfully built c0885f8a7745 Successfully tagged angular-cli2_node:latest WARNING: Image for service node was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`. Creating angular-cli2_node_1 ... done
Nodeのbashに入る
$ dc exec node bash
root@6940488ee936:/projects#
試しにAnguler CLIのバージョン表示をしてみました。
root@6940488ee936:/projects# ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 8.3.20 Node: 13.4.0 OS: linux x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.803.20 @angular-devkit/core 8.3.20 @angular-devkit/schematics 8.3.20 @schematics/angular 8.3.20 @schematics/update 0.803.20 rxjs 6.4.0 root@6940488ee936:/projects#
表示された！
参考
コチラを参考にしました。ありがとうございました！
dev.classmethod.jp qiita.com tech-blog.cloud-config.jp
あとがき
MSYS2でDocker ToolboxからAngularCLIを実行するまでの手順でした！
基本初めてのことに首を突っ込んでいる状態なので、やっと実行まで漕ぎ着けました。
めっちゃ嬉しい……
次はAngularのサーバを立ち上げて、ホストのブラウザから起動します！
MSYS2やDockerについてはコチラをどうぞ！
