Vue.jsとFirebaseで作るミニWebサービス 2回目

えー前回のVue .js云々の記事からの続きです。
今回はFirebaseを使ってWebページを公開するところまでやってみたいと思います。

Firebaseのアカウント作成

まずはFirebaseのアカウントを作りましょう。
firebase.google.com
↑のリンクからアクセスしてログインしてアカウントを作成しよう。

プロジェクトの作成

下記の画面からお好きなプロジェクト名つけ、プルジェクトを作成する。
f:id:kyamisama:20190203101728p:plain

プロジェクト作成が完了すれば以下のような画面が表示されます。
f:id:kyamisama:20190203102525p:plain

クリックするとscriptタグで囲まれた数行のコードが表示されますのでコピーします。
f:id:kyamisama:20190203103008p:plain

コピーしたscriptをmymarkdown直下のindex.html内に貼り付けます。
貼り付け後のindex.htmlです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test_markdown</title>
  </head>
  <body>
    <div id="app"></div>
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCUQ5gnAAi4TCXikx****************",
    authDomain: "mymarkdown-50743.firebaseapp.com",
    databaseURL: "https://mymarkdown-50743.firebaseio.com",
    projectId: "mymarkdown-50743",
    storageBucket: "",
    messagingSenderId: "908132487349"
  };
  firebase.initializeApp(config);
</script>
    <script src="./build.js"></script>
  </body>
</html>

firebase-toolsのインストール

npm install -g firebase-tools

firebaseにログイン

firebase login

実行後、ブラウザが開きFreibase CLIにアクセスを許可しますか?と聞かれるので「許可」します。

firebase initの実行

firebase init

init時には初めにどの機能を利用するか聞かれるので、カーソルをHostingに合わせスペースキーを押して選択状態にし、エンターをおす。

? What do you want to use as your public directory? dist

↑のように聞かれるのでdistと入力する。

? Configure as a single-page app (rewrite all urls to /index.html)? No

その後また↑のように聞かれるのでエンターを押す。そのままのエンターは「No」の意味である。

設定ファイルの修正(webpack.config.js)

下記3箇所を修正する。

1箇所目

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/', #★ここのパスを変更
    filename: 'build.js'
  },

2、3箇所目

  devServer: {
    contentBase: 'dist', #★追加
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false, #★falseに変更
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

設定ファイルの修正(dist.index.html)

まずはdist/index.htmlがfirebase_cliで自動生成されたので削除します。

 rm dist/index.html

その後mymarkdown直下のindex.htmlをdistディレクトリに移動させる。

mv index.html dist/

移動後、index.htmlの修正

  firebase.initializeApp(config);
</script>
    <script src="./build.js"></script> #★このように変更する
  </body>
</html>

設定ファイルの修正(gitignore)

index.htmlをgit管理する為に以下のように修正する。

.DS_Store
node_modules/
dist/
!dist/index.html  #★追加
npm-debug.log
yarn-error.log

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

buildの実行

npm run build

特段エラーなど表示されなければOK

デプロイの実行

firebase deploy

私はここでエラーが表示されました。

Error: No project active. Run with --project <projectId> or define an alias by
running firebase use --add

なのでエラーの指示通りに下記コマンドを実行

$  firebase use --add
? Which project do you want to add? mymarkdown-50743
? What alias do you want to use for this project? (e.g. staging) mast

Created alias mast for mymarkdown-50743.
Now using alias mast (mymarkdown-50743)

その後再度デプロイすると「Deploy complete!」と表示され、公開用のURLが表示されましたのでブラウザでアクセスするとmacから実行していた「npm run dev」と同じようにブラウザ上でVue.jsの画面が表示されました。

f:id:kyamisama:20190203112553p:plain