Vue.jsの学習メモ2
前回の続きから。
GitHub Pagesで公開されない件。npm scriptのbuildコマンドでdocsディレクトリに出力するようにしてdocsを公開するように設定したが、buildコマンドでjsファイルとそのマップファイルと画像だけだったのでPagesのURLにアクセスしても404が帰ってきていた。
試しにvue-cliでvue init webpack-simpleではなくvue init webpackとして生成したところ、buildコマンドでindex.htmlを含むものが出力された。index.htmlを出力に含めるにはwebpackのconfigをいじる必要がありそうだ。うーん、ここからはVueじゃなくてwebpackの学習になりそうなので、おとなしくプロジェクト生成からやり直すことにする。GitHubのリポジトリどうしようかな。
ホストOSからアクセスできない件
前回の記事でホストOSからアクセスするためにdevServerにhostやportの設定を書いた。今回生成しなおしたプロジェクトではそれらの設定としてprocess.env.HOST、process.env.PORTが書かれているので起動時に環境変数に指定してあげればよさそう。
HOST="0.0.0.0" PORT=8000 npm run dev
問題なくアクセスできた。
ついでにhot reloadの件も対応してみた
方法は前回貼った記事の通り。
共有ディレクトリにrsyncの設定をするがエラーで起動できなかった。
C:/HashiCorp/Vagrant/embedded/gems/gems/vagrant-2.0.0/lib/vagrant/util/platform.rb:115:in `cygwin_path': undefined method `gsub!' for nil:NilClass (NoMethodError)
上の記事によると今使ってる2.0.0の問題とのことなのでVagrantを2.0.2にアップデートする。アップデートは公式からWindows版を落としてきてインストール済みのフォルダにインストールするだけ。
vagrant --version Vagrant 2.0.2
アップデートしたらそのままvagrant upして起動を確認。やったぜ。
とかいろいろ弄っていたらSSH接続できなくなった。
vagrant ssh Permission denied (publickey).
絶望感がやばい。調べた結果、homeディレクトリ以下のパーミッションをまるっと変更したのがまずかったようだ。反省。
元に戻そうにもubuntuに入れないしどうしようかなと思っていたところ
こちらの記事のコメントで、GUIを有効にしてコンソールログインできるという情報を得た。Vagrantfileを弄る。
config.vm.provider "virtualbox" do |vb|
# # Display the VirtualBox GUI when booting the machine
vb.gui = true
そしたら~/.ssh/を700、~/.ssh/authorized_keysを600、~/.ssh/id_rsaを400にしてシャットダウン。落ちたらvagrant upする。
……接続できない。
SSHのログを確認する。ググった記事にはログの場所は/var/log/secureと書かれていたが、/var/log/auth.logという名前だった。
Authentication refused: bad ownership or modes for directory /home/vagrant
ホームディレクトリまで豪快にパーミッション変更していたらしい。反省。755にしてみたところ、やっとSSH接続できるようになった。疲れた……。
環境をいじくるのに時間がかかってVue.jsの学習が全く進んでいないが、そういえばhot reloadを試していた途中だったので確認して今日は休憩する。
vagrantのプラグインrsync-backをインストールして再起動。接続してvue-cliでプロジェクトを作成。それからrsync-backすると、ものすごいゆっくり同期した。今も同期中。ちょっと遅すぎるので、同期を除外するディレクトリを増やす等対策する必要があるっぽい。
ちょっと疲れたので休憩。
