前回、SPA経県マップをつくろう (3) ～アプリにして編集できるところまでで経県値アプリとして、経県値の表示（経県値別）、経県値の入力をできるようにしました。
今回で最後ですが、Webページをパブリッシングするところをやりたいと思います。
環境
OS: Windows7,10 & CentOS 7.2(VM)
node: v8.9.4
パブリッシング
今回のSPA経県マップは React で作成しました。
React や Angular のいいところの１つに、静的ページなのでどっかにさくっと置くとそのままアプリ化できちゃうところですよね。
APIを叩くようなことは今回していないので、特にそんな感じで自己完結してしまいます。
そこで静的ページをどこにおこうかなぁ・・・って幾つか考えてて、
使ったことなかった GitHub Pages を使ってみることにしました。
Qiitaのアカウントをつくるために作ったアカウントがあるので（笑）
GitHub Pages
以前こちらのGitHub Pages を使った静的サイトの公開方法が、とても簡単になっていたを読んでいて、リポジトリつくればそのブランチを静的ページとして簡単に公開できるのねー
っていう知識は少しだけありました。
今回は作成したアプリをこちらの keikenti へリポジトリとして置いたので、これを静的ページとして公開してみましょう。
Reactで GitHub Pages を公開するのにいい情報ないかなと探していましたら、GitHub ページを React でつくる (基礎編)こちらがヒットして、読んでいたら簡単すぎる・・・(^ ^;
ちょっと本当かなぁって思って半信半疑でやってみました。
リンク先を見ながら npm i gh-pages --save-dev を行い、修正した package.json の差分がこんな感じです。
{
"name": "keikenti",
"version": "0.1.0",
+ "homepage": "https://chai222222.github.io/keikenti",
"private": true,
"devDependencies": {
+ "gh-pages": "^1.1.0",
},
"dependencies": {
+ "deploy": "npm run build && gh-pages -d build",
}
}
関係ないところははしょってますが、
- npm で gh-pages を入れる
- homepage をアカウント+リポジトリ名で追加
- deploy run script を追加
この修正にて、後はリンク先にある通り npm run deploy を行ったところ、
https://chai222222.github.io/keikenti/
公開できました！(^ ^)
デフォルトでは gh-pages ブランチを作成するようなのですが、pull するとローカルが更新されますね。
どうやってるんでしょうね？そのうち調べましょう（笑）
gh-pagesはコマンドラインでも
$ gh-pages --help
Usage: gh-pages [options]
Options:
-V, --version output the version number
-d, --dist <dist> Base directory for all source files
-s, --src <src> Pattern used to select which files to publish
-b, --branch <branch> Name of the branch you are pushing to
-e, --dest <dest> Target directory within the destination branch (relative to the root)
-a, --add Only add, and never remove existing files
-x, --silent Do not output the repository url
-m, --message <message> commit message
-g, --tag <tag> add tag to commit
-t, --dotfiles Include dotfiles
-r, --repo <repo> URL of the repository you are pushing to
-p, --depth <depth> depth for clone
-o, --remote <name> The name of the remote
-v, --remove <pattern> Remove files that match the given pattern (ignored if used together with --add).
-n, --no-push Commit only (with no push)
-h, --help output usage information
いろいろできそうでした。
これでSPA経県マップをつくろうおわりですが、ケータイ国盗りの geojson とかあったら同じルーティンでできますね。
さくっと作成してさくっと公開するのが気軽にできるようになっててよかったです。
javascriptでできることがどんどん増えてきて、お手軽にどんどん進化していってる感じがしました。
久しぶりに React さわったので少し変わっていたのをしれたのがよいのですが、Router は放置しているので取り残されている感じが怖いですが、そちらはまたの機会にさわってみます。