MSYS2のDockerで、Angularのサーバを立てて、ホスト側のブラウザで表示する方法についてです！
サーバを立ててから、ホスト側ブラウザで表示するまでに苦戦しましたが、なんとかここまで漕ぎ着けました！
コンテナを起動する
コンテナの起動については、コチラを参考にしてください！
Angulerプロジェクト作成
プロジェクト作成は
$ ng new <アプリ名>
を実行します。
今回は「MyApp」という名前にしました。
# ng new MyApp
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
実行後出てくる質問は
- Yes (Angular routingを追加する？)
- 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」にアクセス。
表示された！
参考
コチラを参考にしました。ありがとうございました！
qiita.com techracho.bpsinc.jp qiita.com kinokoru.jp
あとがき
MSYS2のDockerで、Angularのサーバを立てて、ホスト側のブラウザで表示する方法でした！
地味に長い道のりでした……
しかしココまでいけたので、今度はAngularと向き合えればと思っています！
MSYS2やDockerについてはコチラをどうぞ！
