差分

このページの2つのバージョン間の差分を表示します。

--- z_blog:2018:181125_vue_install [2018/11/25] – [App.vueを変更] adash333
+++ z_blog:2018:181125_vue_install [2018/11/25] (現在) – [今回写経した本] adash333
@@ 行 1: / 行 1: @@
 ====== 181125 WindowsでVue.jsを始める ======
 Ionic4がいつまでたってもbeta版のままなので、Vue.jsを触ってみたくなり、以下の本を衝動買い。
+[[https://amzn.to/2SeJXxX|改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) Kindle版]]
 <html>
@@ 行 157: / 行 159: @@
 npm install -g firebase-tools
 firebase login
-// ブラウザが自動的に開くので、「許可」をクリック
+// ブラウザが自動的に開くので、「許可」をクリック。
+// 過去にログインしている場合は、already logged in as ... と表示される。
 </code>
+{{:z_blog:2018:pasted:20181125-210540.png}}
+{{:z_blog:2018:pasted:20181125-210619.png}}
+===== Firebase Hostingにデプロイ（アップロード） =====
+そのまま、VisualStudioCodeのターミナルの画面で、以下を入力
+<code>
+firebase init
+</code>
+{{:z_blog:2018:pasted:20181125-211039.png}}
+Hosting を選択して「スペース(Space)キー」を押してから、Enter
+{{:z_blog:2018:pasted:20181125-211221.png}}
+今回作成したFirebaseプロジェクトを選択。
+{{:z_blog:2018:pasted:20181125-211339.png}}
+public directoryを聞かれるので、 dist と入力してEnter
+{{:z_blog:2018:pasted:20181125-211614.png}}
+Configure as a single-page app?と聞かれるので、N + Enter(そのままEnterでも自動的にNが選択される。)
+{{:z_blog:2018:pasted:20181125-211852.png}}
+すると、自動的に、以下の２つのファイルが作成される。
+<code>
+.firebaserc
+firebase.json
+</code>
+==== webpack.config.jsの修正 ====
+(変更前)
+{{:z_blog:2018:pasted:20181125-212244.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-212504.png}}
+==== index.htmlの移動と修正 ====
+dist/index.htmlを削除する。
+{{:z_blog:2018:pasted:20181125-212942.png}}
+index.html　を、dist/ フォルダに移動し、さらに以下のように修正
+{{:z_blog:2018:pasted:20181125-213032.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-213205.png}}
+==== .gitignoreの修正 ====
+今回移動したindex.htmlを、.gitignoreから除外しておく。
+(変更前)
+{{:z_blog:2018:pasted:20181125-213335.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-213412.png}}
+==== buildとdeploy ====
+ターミナルで以下を入力。
+<code>
+npm run build
+firebase deploy
+</code>
+表示されたURLを、Ctrlを押しながらクリックすると、ブラウザで開く。
+{{:z_blog:2018:pasted:20181125-213914.png}}
+しかし、今回、残念なことに、画像がうまく表示されなかった。。。原因は不明。。。
+{{:z_blog:2018:pasted:20181125-214005.png}}
+写経元の本をもう一度読み直したら、webpack.config.js　の8行目を変更し忘れていました。
+<code>
+//(変更前)
+publicPath: '/dist/',
+//(変更後)
+publicPath: '/',
+</code>
+webpack.config.js
+(変更前)
+{{:z_blog:2018:pasted:20181125-223644.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-223723.png}}
+もう一度、ターミナルで以下を入力。
+<code>
+npm run build
+firebase deploy
+</code>
+{{:z_blog:2018:pasted:20181125-225815.png}}
+これで、ちゃんと、画像も表示された。
+{{:z_blog:2018:pasted:20181125-225852.png}}
 ===== 今回写経した本 =====
+[[https://amzn.to/2SeJXxX|改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) Kindle版]]
 <html>
 <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07HXMHQQK&linkId=0e00aed7bf793408cd3bbaf34c8bad45"></iframe>
 </html>
 ===== Vue.js関連ドキュメント =====