lisz-works

技術と興味の集合体

MSYS2 DockerでAngularのサーバを立ててホストで表示する!

【スポンサーリンク】

MSYS2 x Docker x Angular

MSYS2のDockerで、Angularのサーバを立てて、ホスト側のブラウザで表示する方法についてです!

サーバを立ててから、ホスト側ブラウザで表示するまでに苦戦しましたが、なんとかここまで漕ぎ着けました!

コンテナを起動する

コンテナの起動については、コチラを参考にしてください!

www.lisz-works.com

Angulerプロジェクト作成

プロジェクト作成は

$ ng new <アプリ名>

を実行します。

今回は「MyApp」という名前にしました。

# ng new MyApp
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

実行後出てくる質問は

  1. Yes (Angular routingを追加する?)
  2. CSS (スタイルシート何にする?)

と入力しました。

Angular routingについては今はよく分かっていないので、追々調べようかと思います。

表示を開く

# ng new MyApp
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE MyApp/README.md (1023 bytes)
CREATE MyApp/.editorconfig (246 bytes)
CREATE MyApp/.gitignore (631 bytes)
CREATE MyApp/angular.json (3585 bytes)
CREATE MyApp/package.json (1292 bytes)
CREATE MyApp/tsconfig.json (543 bytes)
CREATE MyApp/tslint.json (1953 bytes)
CREATE MyApp/browserslist (429 bytes)
CREATE MyApp/karma.conf.js (1017 bytes)
CREATE MyApp/tsconfig.app.json (270 bytes)
CREATE MyApp/tsconfig.spec.json (270 bytes)
CREATE MyApp/src/favicon.ico (948 bytes)
CREATE MyApp/src/index.html (291 bytes)
CREATE MyApp/src/main.ts (372 bytes)
CREATE MyApp/src/polyfills.ts (2838 bytes)
CREATE MyApp/src/styles.css (80 bytes)
CREATE MyApp/src/test.ts (642 bytes)
CREATE MyApp/src/assets/.gitkeep (0 bytes)
CREATE MyApp/src/environments/environment.prod.ts (51 bytes)
CREATE MyApp/src/environments/environment.ts (662 bytes)
CREATE MyApp/src/app/app-routing.module.ts (246 bytes)
CREATE MyApp/src/app/app.module.ts (393 bytes)
CREATE MyApp/src/app/app.component.css (0 bytes)
CREATE MyApp/src/app/app.component.html (25530 bytes)
CREATE MyApp/src/app/app.component.spec.ts (1095 bytes)
CREATE MyApp/src/app/app.component.ts (209 bytes)
CREATE MyApp/e2e/protractor.conf.js (808 bytes)
CREATE MyApp/e2e/tsconfig.json (214 bytes)
CREATE MyApp/e2e/src/app.e2e-spec.ts (638 bytes)
CREATE MyApp/e2e/src/app.po.ts (262 bytes)
warning @angular-devkit/build-angular > istanbul-instrumenter-loader > istanbul-lib-instrument > babel-generator > ba
bel-runtime > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of i
ssues. Please, upgrade your dependencies to the actual version of core-js@3.
warning karma > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'root@6940488ee936.(none)')

gitの設定をしていないせいか、なんかfatal出てますね……

ひとまず無視です。

プロジェクト自体は、ちゃんと作成されました。

root@6940488ee936:/projects# ls
MyApp

サーバ起動(失敗)

プロジェクトに入って「ng serve」コマンドを叩きます。

serveです。serverではありません。

root@6940488ee936:/projects# cd MyApp/
root@6940488ee936:/projects/MyApp# ng serve
10% building 3/3 modules 0 activeℹ 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 49.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 290 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.69 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.08 MB [initial] [rendered]
Date: 2019-12-19T00:48:50.619Z - Hash: 1d08391e84e2eeb5357f - Time: 47894ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ 「wdm」: Compiled successfully.

完了すると

「localhost:4200」にアクセスしてね!

と言ってきます。

が、Windows側で「localhost:4200」にアクセスしても、ページが見つかりませんと表示され、サーバに到達することができません……

サーバ起動(成功)

色々見て試した結果、起動時に

$ ng serve --host 0.0.0.0

でサーバ起動することで解決しました。

VM「default」のホストオンリーアダプターのIP「10.0.10.101」にアクセス。

Angularのサーバにホスト側ブラウザからアクセス

表示された!

参考

コチラを参考にしました。ありがとうございました!

qiita.com techracho.bpsinc.jp qiita.com kinokoru.jp

あとがき

MSYS2のDockerで、Angularのサーバを立てて、ホスト側のブラウザで表示する方法でした!

地味に長い道のりでした……

しかしココまでいけたので、今度はAngularと向き合えればと思っています!

MSYS2やDockerについてはコチラをどうぞ!

www.lisz-works.com

www.lisz-works.com

www.lisz-works.com