lisz-works

プログラミングと興味を貴方に

MSYS2でDocker ToolboxからAngularCLIを実行するまでの手順

【スポンサーリンク】

MSYS2 x Docker x Angular

MSYS2でDocker Toolboxから、AngularCLIを実行するまでの手順についてです!

色々調べてやっと実行するところまで漕ぎ着けることができました……!

作業ディレクトリの作成

適当な作業ディレクトリを作って移動します。

$ 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

内容は

  1. FROM: 最新版nodeを使う
  2. RUN(1): 必要なパッケージをインストール(vim)
  3. RUN(2): Angule関連をインストール
  4. WORKDIR: 作業ディレクトリの設定

をしています。

項番2は実際やってたら、vimすら使えなかったので事前に設定しておきました。

単純に起動確認するだけだったら、項番2は不要です。

docker-compose.ymlの作成

docker-compose.ymlを作成します。

version: '3'

services:
  node:
    build: .
    ports:
      - "4200:80"
    volumes:
      - ".:/projects"
    tty: true

dockerの起動

以前起動の流れを書きましたが、dockerをいじくるので、このタイミングでデーモンを起動等をしていないといけません。

www.lisz-works.com

起動していないと、こんな感じにコマンド実行時に怒られます。

$ 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についてはコチラをどうぞ!

www.lisz-works.com

www.lisz-works.com

www.lisz-works.com