4
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

Angularでアプリを作ってGitHub上で公開する点で一瞬ハマった点

結論

ng buildコマンドに-bh <directory>オプションをつければよかったです。

今回やりたかったこと

ng buildコマンドで書き出す際にbaseタグを書き換えたかった

もう少し掘り下げ

angular-cliを使ってAngularアプリを作る練習をしています。
GitHubではmasterブランチの/docsフォルダに入っているものがそのままWebページとして
公開できるみたいなものがあるので、そこにAngularアプリをデプロイしたいというのが今回の目的です。

使っているangular-cliのバージョンはng -vコマンドで確認できます。

Pittan-Mac:PerfumeHub-schedule Pittan$ ng -v
                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
@angular/cli: 1.0.0-beta.32.3
node: 7.2.0
os: darwin x64

今回は1.0.0-beta.32.3を使いました。

通常はng serveを使ってローカル環境で開発を行います。
ブラウザからhttp://localhost:4200にアクセスするとイイカンジに作ったアプリが表示されます。

ある程度完成してきたところで、GitHub上にデプロイをするわけですが…
masterブランチの/docs以下に書き出せばいいとのことなので、何も考えずに
ng build --aot true --target=production -op docsと入れていましたが
GitHub上でアプリを開くと、js/css等のパス指定がおかしくてLoading...から進まない状態でした :innocent:

書き出されたindex.htmlを見ると<base href="/">とあったので、
https://pittan.github.io/PerfumeHub-schedule/hogehoge.jsを見に行きたいのに
https://pittan.github.io/hogehoge.jsを参照しているような状態でした。

開発環境では特に問題なかったので、デプロイ後に気づいたような状態です。

どうしたか

ng buildのオプションに-bh /PerfumeHub-schedule/を追加しました。毎回これ書くのもアレなので、
npmのrun scriptsの中に"deploy:github" : "ng build --aot true --target=production -op docs -bh /PerfumeHub-schedule/"
の記述を追加しています。

masterブランチにプッシュしないといけないので「あっ…」っていう感じになりました。
練習環境なので、何度かプッシュし直しで恥ずかしいなぁ…くらいで済みましたが :sweat_drops:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?