差分

このページの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>
@@ 行 115: / 行 117: @@
 (変更後)
 {{:z_blog:2018:pasted:20181125-201853.png}}
+===== Firebaseのセットアップ =====
+Firebase Hostingにデプロイする。
+Googleアカウントがなければ取得しておく。（無料）
+以下のリンクから、「プロジェクトを追加」をクリックして、新しいプロジェクトを作成する。
+https://console.firebase.google.com/
+{{:z_blog:2018:pasted:20181125-204743.png}}
+{{:z_blog:2018:pasted:20181125-204904.png}}
+{{:z_blog:2018:pasted:20181125-204943.png}}
+プロジェクトのページが開いたら、図の　</>　のマークをクリック。
+{{:z_blog:2018:pasted:20181125-205048.png}}
+「ウェブアプリにFirebaseを追加」の画面が出てくるので、出てくるコードをメモ帳などにコピーしておく。
+（後で、index.htmlに貼りつける。）
+{{:z_blog:2018:pasted:20181125-205205.png}}
+index.html
+(変更前)
+{{:z_blog:2018:pasted:20181125-205341.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-205758.png}}
+なお、VisualStudioCodeの画面で、Ctrl+C => Y + Enter を押して、サーバーを止めておく。
+{{:z_blog:2018:pasted:20181125-205904.png}}
+そのまま、VisualStudioCodeのターミナルの画面で、以下を入力（初回のみ）
+<code>
+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関連ドキュメント =====