はじめに
以前の記事 Vue.jsプロジェクト開発を始める で、
ルーティング設定を理解するために簡単なサンプルページを作成しました。
次は自分が作成したアプリを外部公開してみたい…けどどうやったらいいんだろう…
と悩んでいたところ、GitHub Pagesという便利な機能があることを教えてもらいましたので
今回はこちらをさわってみます。
環境
OS
- macOS Mojave バージョン10.14.6
事前準備
- GitHubアカウント
- デプロイしたいWebプロジェクト
目標
GitHub Pagesを使ってWebページを外部公開する。
やったこと
まずはGitHub Pagesの概要を学ぶ
GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。
要点としては
-
http(s)://<username>.github.io/<repository>で公開できる - 公開元は master ブランチ
どちらも設定次第で変更することができます。
GitHubから設定する
リポジトリ > Settings > GitHub Pages
 |
|---|
↓ Sourceを選択すると表示項目が増えます。
 |
|---|
今回はカスタムドメインの設定は行いません。
なので、設定はこれだけ。
公開されたURLにアクセスしてみる
 |
|---|
真っ白です
解決したい
Consoleを確認。エラーは出ていません。
 |
|---|
Sourceを確認。
 |
|---|
ローカルではApp.vueファイルの内容を表示できていたのですが、(index)というファイルしかありません。
<!-- built files will be auto injected -->
この辺りに原因がありそうです。
buildする
$ npm run build
> {プロジェクト名}@1.0.0 build {ローカルリポジトリ}
> node build/build.js
Hash: 2faa1744e547d116c616
Version: webpack 3.12.0
Time: 16424ms
Asset Size Chunks Chunk Names
static/js/vendor.096d28cd4f5da166f9ce.js 123 kB 0 [emitted] vendor
static/js/app.d36189bbcccbc977a527.js 1.29 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.86a4513a3e04c0dcb73e6d6aea4580e4.css 237 bytes 1 [emitted] app
static/css/app.86a4513a3e04c0dcb73e6d6aea4580e4.css.map 452 bytes [emitted]
static/js/vendor.096d28cd4f5da166f9ce.js.map 618 kB 0 [emitted] vendor
static/js/app.d36189bbcccbc977a527.js.map 9.71 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 508 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
distディレクトリにファイルが格納されました。
これをpushしてmasterブランチに反映させればいいのかと思ったのですが
.gitignore に /dist/ が含まれています。
$ git status
On branch develop
nothing to commit, working tree clean
.gitignoreから外せばいいんでしょうか？
いや、きっとそんなことしなくてももっといい方法があるはず…
いい方法があった
公式より
プロジェクトサイトは、master ブランチまたは master ブランチ場の /docs フォルダから公開することもできます。これらの公開元からサイトを公開するには、別の公開元を設定する必要があります。
masterブランチに/docsというフォルダがあれば、そこを参照して公開してくれるらしい。
今/distに作成されているbundleファイルを/docsに作られるようにして、そのをpushすればいいのでは…？
/docsを作る
$ mkdir docs
bundleファイルが/docsに格納されるようにする
buildパスをdistからdocsに変更します。
config/index.jsを以下のように修正。
$ git diff config/index.js
diff --git a/config/index.js b/config/index.js
--- a/config/index.js
+++ b/config/index.js
build: {
// Template for index.html
- index: path.resolve(__dirname, '../dist/index.html'),
+ index: path.resolve(__dirname, '../docs/index.html'),
// Paths
- assetsRoot: path.resolve(__dirname, '../dist'),
+ assetsRoot: path.resolve(__dirname, '../docs'),
assetsSubDirectory: 'static',
build
$ npm run build
docs配下にできました。
.gitignoreいじらずにそのままpush
$ git add .
$ git commit -m 'built'
$ git push origin develop
GitHubでdevelop -> master にマージ
GitHub Pagesに/docsをみてもらう
Setting > GitHub Pages
フォルダを作成したことで選択肢が増えました。master branch /docs folderを選択。
URLアクセス
エラーです。
 |
|---|
Pathの設定を修正
先ほどエラーになった画面でsourceをみてみると
<script type=text/javascript src=/static/js/manifest.3ad1d5771e9b13dbdad2.js></script>
<script type=text/javascript src=/static/js/vendor.096d28cd4f5da166f9ce.js></script>
<script type=text/javascript src=/static/js/app.d36189bbcccbc977a527.js></script>
ソースの参照先が絶対パスになっていました。
ここではindex.htmlからみたファイルパスを指定してあげる必要があるので
config/index.jsのassetsPublicPathを以下のように修正します。
$ git diff config/index.js
diff --git a/config/index.js b/config/index.js
--- a/config/index.js
+++ b/config/index.js
// Paths
assetsRoot: path.resolve(__dirname, '../docs'),
assetsSubDirectory: 'static',
- assetsPublicPath: '/',
+ assetsPublicPath: './',
/**
* Source Maps
URLアクセス
できました
 |
|---|
ファイル参照が相対パスに代わり、正しく読み込まれるようになっています
<script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script>
<script type=text/javascript src=./static/js/vendor.096d28cd4f5da166f9ce.js></script>
<script type=text/javascript src=./static/js/app.d36189bbcccbc977a527.js></script>
助けてもらったサイト
GitHub PagesにサクッとSPAをデプロイする
GitHubのmasterブランチをWebページとして公開する手順（GitHub Pages）
vue-cliで作ったアプリをGithub Pagesにデプロイ