Meteor+Vue+Webpack入门到放弃

前一段时间忙完公司的项目开始闲下来，打算自己写个todolist什么的小应用，然后就跑去调研了一下nodejs环境下有那些比较好的框架写后端服务，本打算用express+sequelize写restful风格API的，可惜没找到更方便的工具快速制作，然后就遇到meteor。

##meteor

meteor比起express还是使用restful规范的服务端来得更先进，用起来更舒服。
简单使用，只需要在服务端定义发布数据，在客户订阅的数据并能获得，当然这是归功于基于DDP协议的socket服务。

总结一下特点：

服务端与客户端编码风格一致（全TM是javascript）
极具实时性（数据基于websocket，模板可以动态加载）
集成了开源工具和框架（webpack、vue随意使用）

##快速上手教程

教程坚持使用vue和webpack，所以这里有个问题，怎么才能跟meteor很好地结合一起呢？

答案：使用在meteor安装webpack支持！尤大的证言

先学基础，不喜欢的跳过也可以。
meteor基础教程传送门

###快速开始
请git clone以下

https://github.com/lpreterite/meteor-vue-webpack-example

运行只需

1 2	$ npm i $ meteor

下文要讲的是，那些东西事必须的，比如在package.json这段：

# 设置的客户端与服务端入口文件

"main": "src/server.js",
"browser": "src/client.js",

webpack.config.js需要指定root和热更新设置devServer

"root": "./src",
"devServer":{
  "host": "localhost",
  "hot": true,
  "inline": true,
},

定义你的数据对象

# collections.js

export const Tasks = new Mongo.Collection('tasks')
export const Tags = new Mongo.Collection('tags')

发布

# publications.js

import {Meteor} from 'meteor/meteor';
import {Tasks} from './collections';

Meteor.publish('tasks', function() {
    return Tasks.find();
});

提供数据操作

# methods.js

import {Meteor} from 'meteor/meteor';
import {Tasks, Tags} from './collections';

Meteor.methods({
    'tasks.complete': function(_id, complete){
        Tasks.update({_id: _id}, {
            $set: {
                complete: complete,
                updateAt: new Date()
            }
        })
    },
    'tasks.create': function(title){
        check(title, String);
        let _id = Tasks.insert({
            title,
            createAt: new Date()
        })

        return _id
    },
    'tasks.remove': function(_id){
        check(_id, String);
        Tasks.remove(_id);
    }
})

在客户端取得数据，和操作数据

# index.vue

    import {Meteor} from 'meteor/meteor';
    import {Tasks} from 'server/collections';
    export default{
        data(){
            return{
                tasks: [],
                taskTitle: ""
            }
        },
        methods: {
            create(){
                Meteor.call('tasks.create', this.taskTitle, function(err, _id){
                    if(err){
                        alert('出错了')
                        console.error(err)
                    } else {
                        this.taskTitle = "";
                    }
                }.bind(this))
            },
            remove(task){
                Meteor.call('tasks.remove', task._id)
            }
        },
        route: {
            activate: function(){
                //订阅tasks数据
                this.subscription = Meteor.subscribe('tasks');
            },
            data: function(transition){
                Tracker.autorun(function () {
                    //取得数据
                    this.tasks = Tasks.find().fetch()
                }.bind(this))
            },
            deactivate: function(){
                //取消订阅tasks数据
                this.subscription.shop()
            }
        }
    }

使用docker部署meteor

使用daocloud平台(目前还是免费试用)前需要添加docker配置。

具体配置看例子的.docker目录和Dockerfile
逐步使用daocloud平台发布meteor应用

登录daocloud平台并创建一份代码构建，选择你的仓库（支持github、coding、私有gitlab等），其他默认，点击开始创建。

页面自动进入构建代码，等待一段时间后会显示构建成功。

点击镜像仓库并部署应用，逐步完成至见到环境变量设置，键入ROOT_URL=http://localhost:80、PORT=80、MONGO_URL=Mongo服务地址，然后部署。

mongo访问地址，参考一下公式：

1	MONGO_URL = MONGODB_USERNAME:MONGODB_PASSWORD@MONGODB_PORT_27017_TCP_ADDR:27017/MONGODB_INSTANCE_NAME

注意：目前daocloud平台提供构建的资源是很有限的最终会导致打包meteor应用失败，想免费使用daocloud平台的服务建议还是本地构建再丢上去演示。

具体指南

自定义部署meteor

服务器包含： nodejs、git、mongodb

$ curl https://install.meteor.com/ | sh #安装meteor
$ npm install -g demeteorizer #安装demeteorizer
$ npm install #安装nodejs依赖的包
$ meteor #先保证应用是可以执行运行的
$ demeteorizer #打包(构建nodejs可用)代码
$ cd .demeteorized/bundle/programs/server
$ npm install
$ cd ../../
$ MONGO_URL=mongodb://localhost:27017/test PORT=80 ROOT_URL=http://localhost:80 node main.js

具体指南

值得注意的是用了webpack:webpack的meteor应用部署环境nodejs版本必须0.12.x以上，npm版本必须3.x以上

博主决定完全放弃meteor了，线上部署各种问题难以解决，恶心程度堪比发臭鸡蛋，实在难以下咽。