ということで現在おいらが使っているサーバーのapacheのwwwディレクトリにリポジトリを作成してクライアントから編集したものを反映できるようにしてみる。
ここでのポイントはリモート側のリポジトリをリモート側でcloneして、そちらを表示用のディレクトリとすることなようだ。さて以下をかっこよく Prism Syntax Highlighter で・・・・。記述方法が面倒で忘れている。そこで更新が新しい（この時点で２ヶ月前までメンテされてる）
「Highlighting Code Block」を導入だ。なんだかいい感じだぞ！
/home/blog/public_html/blogdir$mkdir drvue.git
/home/blog/public_html/blogdir$cd drvue.git
/home/blog/public_html/blogdir/drvue.git$git --bare init --shared
/home/blog/public_html/blogdir/drvue.git$cd ../
/home/blog/public_html/blogdir$git clone drvue.git
/home/blog/public_html/blogdir$cd drvue.git
/home/blog/public_html/blogdir/drvue.git$vi hooks/post-receive●gitのhookで反映させるにはその動作を行わせるpost-receiveファイルを作成する。属性はchmodで775実行形式にしておく。
#!/bin/sh
cd /home/blog/public_html/blogdir/drvue
git --git-dir=.git pullよく考えると上記の意味がわかる。クローンをサーバーに置こうとローカルに置こうと同じことなのだから、サーバーのクローンディレクトリでリモートリポジトリからのpullを行えば当然反映される。おおっ！なんと素晴らしい。
※hookがうまく行かず悩んだ。結果#!bin/sh ではなく #!/bin/sh で「/」が抜けてたからだった。
この辺は・・・久々のというかたまにやるとこういう目にあうということで。
ちなみによく見るとログというかメッセージがpushするときに出ている。
ここまででサーバー側のリモートリポジトリの準備とそれを反映してWEBページの入れ物とするところまでが完了だ。
今回は簡単な例だが、これをvueでもやらねばだ。鉄は熱いうちに打て！打つべし！！
●クライアント側。今回はラズパイ
pi@rasp2:~/vwork$ git clone ssh://blog@makejapan.jp:/home/blog/public_html/blogdir/drvue.git
pi@rasp2:~/vwork$cd drvue
pi@rasp2:~/vwork$vi index.html を作成
pi@rasp2:~/vwork$git add .
pi@rasp2:~/vwork$git commit -m "first commit"
pi@rasp2:~/vwork$git push origin master
passwd:ブラウザに反映されているか見る。見えたおめでとう。
ということでindex.htmlを再度編集してgitで反映されるのを楽しむ。
これでFTPを使用しなくともWEBへの反映ができるしgitのファイル管理ができる。
やはりリーナスさんは凄いな。こんなおいらでも感謝の気持ちがわいてきます。
●考察
vue.jsのCLI環境ならローカルで試してからbuildで上げ、pushでいいけど、通常の作成ではnpm run serve がないから git add と git commit git push ばかりで・・・。XAMP環境で行ってからpushという技が要る。何だか見えなかったが見えてしまった。開発環境の準備は重要です。
ということで家のラズベリーパイでapache2+php7.0環境を構築して/var/wwww/html/下にcloneしてlocalhost/drvue/で動作させみた。
OKだ。これだと編集して動作確認をlocalhostでやってからアップできる。
いいね！
