GitHub では Git を使ったソースコードの管理のほか、html/css/js 等で作成した Web アプリケーションを公開することもできます。Vue オンリーで作成したプロジェクトはこの条件を満たすので GitHub で公開できます。
前回、vue-cli を使用してプロジェクトの作成から GitHub への Push までを行いました。
www.shookuro.com
今回はこの Web アプリ(といっても vue create で作成される初期のアプリ)を Git Pages で公開する手順をメモしておきたいと思います。
GitHub Pages の 2 つの公開方法
アカウントに紐づくページ
アカウントごとに作成するページです。URL は「https://username.github.io」のようになります。(username はアカウント名)
開発者の自己紹介ページに利用されることが多いようです。
プロジェクトに紐づくページ
アカウントは複数のプロジェクト(=リポジトリ)を持つことができます。
そのプロジェクトごとに作成するページです。URL は「https://username.github.io/repository」のようになります。(repository はリポジトリ名)
この記事ではこの「プロジェクトに紐づくページ」を公開したいと思います。
ビルド設定の変更
参考になりました。
vue-cliで作ったアプリをGithub Pagesにデプロイ - Qiita
ただこちらの記事は vue-cli2 用の記事です。vue-cli3 系では設定ファイル vue.config.js を新規で作成してあげる必要があります(最初設定ファイルが見つからなくってあせったw)。また、プロパティ名なども変わっているようなので注意してください。
まず、ビルド後のモジュールの出力フォルダですが、デフォルトだと /dist になります。
GitHub Pages の仕様として、プロジェクトフォルダ直下もしくは /docs フォルダにビルド後の index.html が置かれている必要があります。
したがって、出力フォルダを /dist から /docs に変更します。
もう一点、デフォルトだと js/css などリソースへのリンクが絶対パスで指定されてしまいます。これを相対パスに変更してやる必要があります。
上記を踏まえ新規作成した vue.config.js です。
module.exports = { outputDir: 'docs', assetsDir: './', publicPath: './' }
ビルドします。成功しました。
C:\yyama\sample>npm run build > sample@0.1.0 build C:\yyama\sample > vue-cli-service build - Building for production... DONE Compiled successfully in 4845ms File Size Gzipped docs\js\chunk-vendors.e85c779c.js 81.07 KiB 29.21 KiB docs\js\app.5288779e.js 5.40 KiB 1.93 KiB docs\service-worker.js 0.94 KiB 0.53 KiB docs\precache-manifest.c171b4841613173 0.54 KiB 0.27 KiB 6ba5eb952bf4094a4.js docs\css\app.de1079fa.css 0.33 KiB 0.23 KiB Images and other types of assets omitted. DONE Build complete. The docs directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
GitHub に Push する
では commit して push しましょう。次のコマンドを打ちます。
- git add .
- git commit -m "docsフォルダへデプロイ先を変更。およびビルドした。"
- git push
コマンド実行および出力結果はこのようになりました。
C:\yyama\sample>git add . C:\yyama\sample>git commit -m "docsフォルダへデプロイ先を変更。およびビルドした。" [master b97858e] docsフォルダへデプロイ先を変更。およびビルドした。 26 files changed, 244 insertions(+) create mode 100644 docs/css/app.de1079fa.css create mode 100644 docs/favicon.ico create mode 100644 docs/img/icons/android-chrome-192x192.png create mode 100644 docs/img/icons/android-chrome-512x512.png create mode 100644 docs/img/icons/apple-touch-icon-120x120.png create mode 100644 docs/img/icons/apple-touch-icon-152x152.png create mode 100644 docs/img/icons/apple-touch-icon-180x180.png create mode 100644 docs/img/icons/apple-touch-icon-60x60.png create mode 100644 docs/img/icons/apple-touch-icon-76x76.png create mode 100644 docs/img/icons/apple-touch-icon.png create mode 100644 docs/img/icons/favicon-16x16.png create mode 100644 docs/img/icons/favicon-32x32.png create mode 100644 docs/img/icons/msapplication-icon-144x144.png create mode 100644 docs/img/icons/mstile-150x150.png create mode 100644 docs/img/icons/safari-pinned-tab.svg create mode 100644 docs/img/logo.82b9c7a5.png create mode 100644 docs/index.html create mode 100644 docs/js/app.5288779e.js create mode 100644 docs/js/app.5288779e.js.map create mode 100644 docs/js/chunk-vendors.e85c779c.js create mode 100644 docs/js/chunk-vendors.e85c779c.js.map create mode 100644 docs/manifest.json create mode 100644 docs/precache-manifest.c171b48416131736ba5eb952bf4094a4.js create mode 100644 docs/robots.txt create mode 100644 docs/service-worker.js create mode 100644 vue.config.js Warning: Your console font probably doesn't support Unicode. If you experience strange characters in the output, consider switching to a TrueType font such as Consolas! C:\yyama\sample>git push Username for 'https://github.com': yyama694 Password for 'https://yyama694@github.com': Counting objects: 15, done. Delta compression using up to 4 threads. Compressing objects: 100% (14/14), done. Writing objects: 100% (15/15), 157.40 KiB | 0 bytes/s, done. Total 15 (delta 1), reused 0 (delta 0) remote: Resolving deltas: 100% (1/1), completed with 1 local object. To https://github.com/yyama694/sample 2a3ecc8..b97858e master -> master
GitHub プロジェクトの設定変更
公開するプロジェクト(リポジトリ)のトップページで「Settings」を選択します。
Settings のページに移動するので、タイトルが GitHub Pages のところまで下にスクロールします。Source のところがデフォルトでは None になっています。公開するために変更します。
選択肢として、master プランチ直下か master ブランチの /docs ディレクトリ配下が選べます。
今回は master ブランチの /docs ディレクトリを選択します。これで master ブランチ /docs 配下の index.html が (ソースだけでなく)Web ページとして公開されるはずです。選択したら Save ボタンを押しましょう。
動作確認
画面がリフレッシュされますので、再度スクロールして GitHub Pages のところを表示すると、ページの URL が表示されています。
その URL にブラウザでアクセスすると、Web アプリとして公開されていることが確認できました。
Vue で作成した Web アプリを GitHub Pages で公開する方法まとめ
かんたんに言うと、
「ビルド設定を少し変更してビルドする。GitHub に Push。GitHub 側で公開設定にする」。
これからも Vue 作った Web アプリをどんどん公開していきましょう!
それでは!
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発
- 作者: 花谷拓磨
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/10/17
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
いちばんやさしいGit&GitHubの教本 人気講師が教えるバージョン管理&共有入門 (「いちばんやさしい教本」シリーズ)
- 作者: 横田紋奈,宇賀神みずき
- 出版社/メーカー: インプレス
- 発売日: 2018/12/14
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る