kz’s blog

興味のあることについて書いていきます。

Github Pages に Vue.js の SPA サイトを公開して運営するまで

はじめに

基本的に以前の記事に書いてある通りに実行すれば Github Pages で SPA サイトを公開することができると思います。

今回は特にハマった点や、サイトを運営するために必要なことを記述していきます。

Github リポジトリ作成

通常通りに作成します。特に変わった操作はしません。

Github Pages の設定

f:id:kz62:20181029213325p:plain

ソース

master branch

本当は/docsフォルダのみ公開することができるmaster branch /docs folderにしたかったのですが、これにすると/docsフォルダにCNAMEファイルが作成されてしまいます。

CNAMEファイルには後述するカスタムドメインの設定値が入るのですが、 Vue アプリをビルドした際、CNAMEファイルが削除されてしまい、 Github Pages のカスタムドメインの設定が初期化されてしまったため断念しました。

後日談

CNAMEpublic直下に入れることで、ビルドした際にdocsフォルダに自動的にコピーされるので、次回からはこの方法で作成しようと思います。

カスタムドメイン

独自ドメインにしない場合は空欄で大丈夫です。

独自ドメインにする場合は取得したドメインを設定します。

ドメインサービス側の設定

f:id:kz62:20181029214155p:plain

私はムームードメインで独自ドメインを取得しているので、ムームードメインでの設定例になります。

  • サブドメイン: 任意の値
  • 種類: CNAME
  • 内容: [Github アカウント] + .github.io

Vue プロジェクトの作成

バージョン情報

vue-cli 3

依存(package.json)

"buefy": "^0.7.0",   // UI コンポーネント
"vue": "^2.5.17",   // Vue 本体
"vue-analytics": "^5.16.0", // Google Analytics で解析するために使用
"vue-head": "^2.0.12",  // タイトル、meta タグをページごとに設定するために使用
"vue-router": "^3.0.1", // ページ遷移
"vue-web-storage": "^3.0.0" // データ永続化

その他設定(vue.config.js)

baseUrl: '/docs/',   // docs フォルダに出力するため
outputDir: 'docs',  // ビルドしたファイルの出力先

サイトを運営するために必要なこと

Google Search Console で解析できるようにする

指定されたmetaタグをpublic/index.htmlheadタグ内に貼るだけです。

Google Analytics で解析できるようにする

src/main.jsに下記コードを記述します。

import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics, {
  id: 'UA-xxxxxxxxx-x',
  router
})

xxxxxxxxx-xの部分にはご自身に割り当てられたIDを入れてください。

Twitter に URL を張り付けた際、いい感じに表示されるようにする

これがすごくハマりました。 vue-head で各ページのmetaタグを設定しても反映されなかったのです。 理由としては、Twitter のクローラーは HTML は解析してくれますが、 JavaScript の読み込みまでは実行してくれないみたいです。

仕方がないので、以下7種類のmetaタグをpublic/index.htmlheadタグ内に貼りました。

<meta name="og:title" content="サイトのタイトルを入れる">
<meta name="og:description" content="サイトの概要を入れる">
<meta name="og:url" content="サイトのURLを入れる">
<meta name="og:image" content="URLを貼られたときに表示したい画像のURLを入れる(http~)">
<meta name="og:type" content="website">   // 固定値
<meta name="twitter:card" content="summary">  // 固定値(何種類かあるので適宜選択)
<meta name="twitter:site" content="Twitter のアカウントIDを入れる(@~)">

ひとまずこれで、Twitter に URL を貼ったときに画像が表示されるようになりました。こちらから確認できます。

問題点としては、public/index.htmlに貼っているため、 どのページの URL を貼っても同じ表示内容になってしまうことです。 (リンク先については、しっかりと貼られた URL に飛びます)

SPA サイトでページごとに切り替える方法はないのか?

SSR(サーバサイドレンダリング)という技術を使用すれば可能みたいです。

ただ、今回は Github Pages を使用して SPA サイトを公開するということなので SSR は使用しておりません。

sitemap.xml の設置

public/sitemap.xmlを作成します。

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
  <url>
    <loc>サイトのURL</loc>
  </url>
</urlset>

publicフォルダ直下に作成することで、ビルド後に作成されるdocsフォルダ直下に作成されます。

こうすることでドメイン/docs/sitemap.xmlにアクセスできるようになります。

これを Google Search Console に読み込ませたらうまく行きました。

アイコンの設定

Vue プロジェクトではデフォルトの状態でpublic/index.htmlに以下の記述がされています。

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

なので、public/favicon.icoを変更すれば簡単にアイコンが変更されると思いましたがうまく行きませんでした。(localhost ではしっかりと変更されていた。)

原因はよくわかりませんが、URL 指定にしたらうまく行きました。

利用規約の作成

念のため作成しました。

おわりに

サーバサイドの処理がいらないような、簡単なツール類や、自己紹介的なホームページであれば簡単に作れるので、Github Pages は非常に有用ですね。

Google の解析ツールを入れることで、アクセス数等も知ることができるので、これから何かサービスを立ち上げる場合は練習にもなっていいかも知れません。