Posted at

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

More than 1 year has passed since last update.


結論

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: