Vue.jsとFirebaseで作るミニWebサービス 2回目
えー前回のVue .js云々の記事からの続きです。
今回はFirebaseを使ってWebページを公開するところまでやってみたいと思います。
Firebaseのアカウント作成
まずはFirebaseのアカウントを作りましょう。
firebase.google.com
↑のリンクからアクセスしてログインしてアカウントを作成しよう。
プロジェクトの作成
下記の画面からお好きなプロジェクト名つけ、プルジェクトを作成する。
プロジェクト作成が完了すれば以下のような画面が表示されます。
クリックするとscriptタグで囲まれた数行のコードが表示されますのでコピーします。
コピーした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 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の画面が表示されました。