LoginSignup
0
1

More than 5 years have passed since last update.

@SOhtsu(Shuichi Ohtsu)

Angular CLIでGitHub-Pagesを作成する際の注意点

Last updated at Posted at 2016-12-02

Angular CLIでGitHub-Pagesを作成する際の注意点

Angular CLIを利用して、サーバプログラムがローカルで起動できるようになったので、ディプロイ機能を使ってGitHub Pagesに表示してみたくなりました。1コマンドで配布できるような解説でしたので、簡単と思いきやいろいろな落とし穴があって、予想外に時間をとられてしまいました。以下は、私がはまってしまった落とし穴です。

GitHub Pagesで表示しようとしたプロジェクト,
https://github.com/Ohtsu/o2-chart/

落とし穴

  • ng buildでのコンパイルエラー

  • ng github-pages:deploy を実行するディレクトリ

  • Package.jsonでのプロジェクト名

  • ローカルデータの参照

ng buildでのコンパイルエラー

Angular CLIのng serveを利用して、プログラムの稼働をチェックしていた場合は、ローカルサーバ上で全く問題はなくとも、Webpackによるコンパイル（トランスパイル）中にエラーが発生している場合があります。この場合には、ディプロイ用のdistディレクトリがうまく生成されません。

例えば、以下のソースは、d3.jsの記法に基づくものであり、ローカルサーバ上では全く問題なく稼働するものですが、コンパイル中に型定義エラーが発生します。

    let simulation = d3.forceSimulation()
        .force("link", d3.forceLink().id((d) => { 
            return d.id; 
        }))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(_graphWidth/2, _graphHeight/2));

問題は、return d.idの部分で、jsonファイルの中で定義されているidは、参照できないとしてエラーとなります。
したがって、上記のソースは、以下のように(d) =>の部分を(d:any) =>のように書き換えて、コンパイルエラーを回避する必要があります。

    let simulation = d3.forceSimulation()
        .force("link", d3.forceLink().id((d:any) => { 
            return d.id; 
        }))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(_graphWidth/2, _graphHeight/2));

ng github-pages:deploy を実行するディレクトリ

Angular CLIの解説ビデオなどを参照していると、ng serveをsrcディレクトリ内で実行している場合があるのですが、この流れでsrcディレクトリ内でng github-pages:deployを実行すると、パーミッション・エラーが発生し、ディプロイに失敗します。この原因は、ローカルにgithub-pagesブランチを生成し、そこからremoteにpushしようとする際に、そのブランチ内でsrcディレクトリを削除するプロセスがあるようで、起動ディレクトリであるため削除できないようです。したがって、ng github-pages:deployは、プロジェクトのルートディレクトリで実行する必要があります。

Package.jsonでのプロジェクト名

上記の問題点をクリアした後、GitHubにディプロイできるようになったのですが、loadはしても実際に表示ができませんでした。そこでエラー箇所を参照してみたところ、index.html内で参照している以下のファイルなどがないというものでした。

  • "inline.js"
  • "styles.365fde027791cdac098a.bundle.js"
  • "main.378e5a4bc8a4ffbc0f17.bundle.js"

実際には、ディプロイされているので、起動ディレクトリの認識がおかしいということになりました。そこで判明したのが、Package.jsonで定義しているプロジェクト名とディプロイ先を一致させなければならない、という点です。当初私は、以下のようにPackage.json内でのプロジェクト名をtest01としていました。そして、o2-chartというリポジトリのgithub-pageを作成しようとしていました。

{
  "name": "test01",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  ...

そこで、以下のようにディプロイ先とPackage.json内でのプロジェクト名を一致させることにより、やっとロードできるようになりました。

{
  "name": "o2-chart",
  "version": "2.0.0",
  "license": "MIT",
  "angular-cli": {},
  ...

ローカルデータの参照

上記の修正により、プログラムは起動するようになったのですが、サーバプログラムと一緒に配布予定であったデータを読み込んでくれません。ローカルサーバでテストした際は、問題なく読み込んでいました。
例えば、以下のようにdataディレクトリを作成しておき、そこのデータを相対指定して読み込んでいたのですが、github-pageではうまく読み込んでくれません。

this.geoMapDataJson = 
{
    "map":{
            "baseGeoDataUrl":"data/world.geojson",
            "scale":75,
            "keyDataName":"features",
            "targetPropertyName":"properties.name",
    },

そこでやむを得ず、GitHub上に別のリポジトリ（data)を作成し、以下のようにＵＲＬを変更することにより、参照できるようにしました。
これについては、たぶんコンパイル後のサーバ上のディレクトリを参照する方法があると思います。

this.geoMapDataJson = 
{
    "map":{
            "baseGeoDataUrl":"https://raw.githubusercontent.com/Ohtsu/data/master/o2-chart/world.geojson",
            "scale":75,
            "keyDataName":"features",
            "targetPropertyName":"properties.name",
    },

やっとGitHub Pagesに表示可能に

上記の修正を経て、以下のようにやっとGitHub Pagesを利用できるようになりました。

GitHub Pagesで表示,
https://ohtsu.github.io/o2-chart/

環境

上記の内容は、以下の環境の中でのものですので、今後改善等される可能性があります。

  • angular-cli: 1.0.0-beta.19-3
  • node: 6.9.1
  • os: win32 x64

補足 ng github-pages:deployを利用しない方法

ng github-pages:deploy はまだバグがあるようなので、ng build で生成される dist以下のプログラムを直接pushする方法を採用したくなります。ただし、そのままアップロードしても、表示してくれません。配布先用にindex.htmlを修正する必要があります。

自動で生成されるindex.htmlのHead部分は、以下のようにbase hrefが設定されていると思います。


<head>
  <meta charset="utf-8">
  <title>ProjectName</title>
  <base href="/">

これを配布先のアドレスに応じて、変更します。例えば、https://yourname.github.io/xxxxxx/で表示されるページとして配布するのであれば、以下のように変更する必要があります。


<html>
<head>
  <meta charset="utf-8">
  <title>ProjectName</title>
  <base href="/xxxxxx/">

これにより、アップロードされたjsファイルなどが読み込めるようになり、表示されるようになります。

参考文献

　Angular CLIによるGitHub Pagesの作成については、以下が大変参考になりました。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1