Vue-cli + github pages + google domains を使う

1539 ワード
GitHub github-pages GoogleDomains GitHub テキストリンク

忘れてしまったら嫌なので備忘録として書いていきます。
ちょっと前にgithub pagesにmanif-makerというアプリをデプロイしたんですが、ドメイン取得したりなんかしたことが無いので、練習としてやろうと思ったがいろいろ躓きました

google domainsでドメインを取得

google domainsここでドメインを取得してください。

DNSのカスタムリソースレコード

google domainsのサイドバーにあるDNSを押し、下の方にカスタムリソースレコードとあるので、下記を入力していく

白で隠したところには username.github.io と入力

githubのSettingsに行き、ドメインの設定をする

githubのsettingsに行き、github pagesの所を見ます。
そこにCustom domainとあるので、そこに取得したドメインを入力してsaveを押してください。
またEnforce HTTPSを押しhttps化してください

またこの手順を踏むと、vueのdocsフォルダにCNAMEというファイルが自動で作成されて、ドメイン名が書かれていました。

どのサイトもここまで書かれていたのですが 

Failed to load resource: the server responded with a status of 404 ()

というエラーがconsoleに出て、ずっと真っ白画面のままになりました。

真っ白画面を解決した方法

vue.config.jsにpublicPath: './'と書きexportし、ビルドします。真っ白画面じゃなくなり、ちゃんと見れるようになりました。

また進展があったら書いていこうと思います