Meteor+AngularJS:超快速Web开发 - 侯振宇 - 博客园

mikel阅读(1023)

来源: Meteor+AngularJS:超快速Web开发 – 侯振宇 – 博客园

    为了更好地描述Meteor和AngularJS为什么值得一谈,我先从个人角度来回顾一下这三年来WEB开发的变化:
    三年前,我已经开始尝试前后端分离,后端使用php的轻量业务逻辑框架。但当时前端还没有成熟且广泛流行的业务逻辑框架。所以在做产品开发时我仍然选用drupal等整体开发框架。开发时常常需要在JavaScript和php间切换,同时还要自己搞定数据库。此时的开发模型图是这样(红色箭头和红色块都表示工作重灾区):
    随着对用户体验的追求,我开始把业务逻辑往前端推移,于是马上遇到了前端数据与页面展示绑定的问题,业务逻辑简单时还能用JQuery搞定。越来越复杂后,开始尝试使用backbone等前框架来规范数据层和做数据与视图的绑定,用requireJS做模块化和延迟加载。同时异步处理等编程模型也都开始进入实战。后端采用RESTful接口规范。此时的开发模型图是这样:
    一年前左右,接触到knockout和AngularJS,感受到数据和视图自动绑定的美妙开发体验后,立即抛弃Backbone。此时的开发已经彻底前后分离、前端业务数据层和视图层分离。接下来又开始陆续使用coffeescript 、jade、less进一步减少代码量。用grunt做自动编译、测试、和检测文件改动自动刷新浏览器。一切都已经比较完美了,除了后端仍然要对数据持久化做不少工作,除了前端要想实时反映数据改变仍然要轮询或者用webSocket连接服务器。这时的开发模型图已经是这样了:
    只差一点就完美了,Meteor就是这一点。Meteor是一个基于nodejs、webSocket、mongoDB的整体开发框架,在它的实现中,前后端的数据模型已经几乎没有差别。
    意思就是,前端对数据模型进行任何改动,只要调用“save”方法,所有数据就自动存到服务器端的mongoDB中了——终于可以忘了主动发送请求给服务器,终于可以忘了服务器要和前端实现几乎一样的数据模型层
    而任何前端“订阅的”后端数据出现改动,前端数据模型也会马上自动得到了更新——终于可以忘了主动轮询,终于可以忘了拿到后端数据再解析成前端模型。除了前后端模型的双向自动绑定,Meteor同时还实现了数据到前端模板的自动更新。
    不过,Meteor的模板在处理视图到模型的改动时扩展性不如AngularJS。因此,将AngularJS和meteor结合是最好的选择。到这里,快速Web开发模型终于完成:
    除了模型的自动绑定与更新,meteor还提供了大量进一步加速开发的机制。如:
  • 前后端载入文件文件的自动化管理。只要将相应的文件扔到前后端相应的目录中,就会自动载入到页面,或者在后端自动运行。
  • “智能包”管理。Meteor提供了模块的机制,让第三方开发者可以写“智能包”来加强前后端的功能。如,加载了“coffeescript”智能包后。无论前后端用coffeescript写的代码都会自动编译成JavaScript后再载入。
  • 内置大量“智能包”,有进一步支持开发的包,如“less”、“underscore”、“coffeescript”,还有通用业务逻辑包。如“账户管理”,而且已经集成主流oauth账号登陆。
  • 自动检测文件改动,自动刷新浏览器。
  • 自动化部署。
    以下马上来看一个实际开发的例子,制作一个为公司录入应聘人员信息的系统。
    需求:
  • 能指派面试官,自动邮件通知。
  • 支持google邮箱登陆。
  • 体验流畅、单页应用。
    开始写业务逻辑之前,我们先开始为准备一些开发工具和环境。首先,我要求能用coffescript代替JavaScript,less代替css。安装完meteor之后,进入项目木文件夹。在命令行中输入如下代码
    meteor create myapp
    meteor add less
    meteor add coffeescript
    然后,我想在前端使用JQuery,和meteor提供的账户系统来支持google oauth授权。继续输入:
    meteor add  jQuery
    meteor add  account-ui
    meteor add  account-google
    最后,将angularJS整合进来:在项目文件夹中创建如下目录层级:
client中的内容会全部自动加载到页面上,具体加载顺序请参考官方文档。server中的文件会在应用启动时自动运行。public中文件将作为静态资源供外部访问。
    因为AngularJS对数据模型改动的检测是通过“dirty check”的方式(见Angular官方文档)。所以要使用插件来让Meteor数据改动能通知到AngularJS,以此触发视图变化。这个插件就是上图中的angular.meteor。
    接下来说用AngularJS的ui-route模块来管理页面路由,将应用变成单页:
    加入“使用google账号”登录的功能:
    当新增一个应聘者时,给面试官发邮件:
    这里应该注意到的是,Meteor对于数据的操作完全是标准的MongoDB语法。剩下的业务逻辑用AngularJS的视图与模型很快就可以实现了,这里不再赘述。
    最后看看系统的效果截图,添加新的应聘人信息:
    面试结果记录:
    总结整个开发过程,可以都看到的是,几乎没有后端开发,只要前端完成,应用基本上就完成了。并且一步就可以使用coffeescript、less等,不再需要自己搭建复杂的开发环境。这样的开发体验,在目前来说,几乎已经到极致了。
    当然,要进入真正产品级开发,Meteor还有一些问题要克服,如“支持多种数据库”,“如何部署到集群”,“实时数据增加了服务器负载”等。好在Meteor目前收到的关注已经特别高,并且有了大量的第三方开发者,进入产品级开发的步伐越来越快。我们完全可以期待,这块拼图成熟之后,将给整个web开发新注入一股强大动力。

将meteor部署在自己服务器上的简易方法 - sban - 博客园

mikel阅读(1053)

有meteor-up等众多工具,如果你不喜欢它们,可以尝试如下方法,自由控制。 1,创建及打包项目meteor create newappmeteor build .2,上传将bunder.tar.gz上传至服务器3,运行cd bunder/programs/server/npm installcd bunder env PORT=3000 MONGO_URL=mongodb://localhost:27017/myapp ROOT_URL=http://[IP OR DEMAIN] node main.js需要安装mongodb,可以配合nginx反向代理使用二级域名。

来源: 将meteor部署在自己服务器上的简易方法 – sban – 博客园

有meteor-up等众多工具,如果你不喜欢它们,可以尝试如下方法,自由控制。

 

1,创建及打包项目

meteor create newapp

meteor build .

2,上传

将bunder.tar.gz上传至服务器

3,运行

cd bunder/programs/server/

npm install

cd bunder 

env PORT=3000 MONGO_URL=mongodb://localhost:27017/myapp ROOT_URL=http://[IP OR DEMAIN] node main.js

需要安装mongodb,可以配合nginx反向代理使用二级域名。

Ubuntu下Docker的安装与使用 - 要做一个不断积累的银~ - 博客频道 - CSDN.NET

mikel阅读(1087)

因为一次偶然的原因,在github上下载到了一个大神的代码,源代码并非在windows源代码,所以我在windows下进行编译时,遇到了很多问题,几天之后还是解决不了,所以就向原作者发了邮件,很感谢他回我了,其中就包括了Docker的链接,包含了当时的环境配置等条件,之后就开始了我的Docker之路。本人使用版本及软件:VMwareWorkstation 12 Proubuntu-14

来源: Ubuntu下Docker的安装与使用 – 要做一个不断积累的银~ – 博客频道 – CSDN.NET

因为一次偶然的原因,在github上下载到了一个大神的代码,源代码并非在windows源代码,所以我在windows下进行编译时,遇到了很多问题,几天之后还是解决不了,所以就向原作者发了邮件,很感谢他回我了,其中就包括了Docker的链接,包含了当时的环境配置等条件,之后就开始了我的Docker之路。

本人使用版本及软件:

VMwareWorkstation 12 Pro

ubuntu-14.04-desktop-amd64.iso

具体Ubuntu的安装与配置在此不详细描述,但是建议大家安装VMware Tools,可以随意在两个系统间切换并交换文件,同时可以调整Ubuntu的屏幕大小。

我在安装时主要借鉴的两个网址如下:

点击打开链接

点击打开链接

一、安装前须知:

Ubuntu 发行版中,LTS(Long-Term-Support)长期支持版本,会获得 5 年的升级维护支持,这样的版本会更稳定,因此在生产环境中推荐使用 LTS 版本。
Docker 目前支持的 Ubuntu 版本最低为 12.04 LTS,但从稳定性上考虑,推荐使用14.04 LTS 或更高的版本。

Docker 需要安装在 64 位的 x86 平台或 ARM 平台上(如树莓派),并且要求内核版本不低于 3.10。但实际上内核越新越好,过低的内核版本可能会出现部分功能无
法使用,或者不稳定。用户可以通过如下命令检查自己的内核版本详细信息:

  1. <span style=”white-space:pre”>  </span>hh@Ubuntu-x64:~$ uname -r
  2. <span style=”white-space:pre”>  </span>3.13.0-105-generic

二、升级内核
如果内核版本过低,可以用下面的命令升级系统内核。如果并不低,可直接跳过。

Ubuntu 12.04 LTS

  1. sudo apt-get install -y –install-recommends linux-generic-lts-trusty

Ubuntu 14.04 LTS

  1. sudo apt-get install -y –install-recommends linux-generic-lts-xenial

 

三、安装过程

1、使用脚本安装

Docker 官方为了简化安装流程,提供了一套安装脚本,Ubuntu 和 Debian 系统可以使用这套脚本安装行,这个命令后,脚本就会自动的将一切准备工作做好,并且把

Docker 安装在系统中。

  1. curl -sSL https://get.docker.com/ | sh

国内的一些云服务商提供了这个脚本的修改版本,使其使用国内的 Docker软件源镜像安装,这样就避免了墙的干扰。阿里云的安装脚本

  1. curl -sSL http://acs-public-mirror.oss-cn-hangzhou.aliyuncs.com/docker-engine/internet | sh –

DaoCloud 的安装脚本

  1. curl -sSL https://get.daocloud.io/docker | sh

 

2、手动安装

添加 APT 镜像源,添加使用 HTTPS 传输的软件包以及 CA 证书。

  1. $ sudo apt-get update
  2. $ sudo apt-get install apt-transport-https ca-certificates

为了确认所下载软件包的合法性,需要添加 Docker 官方软件源的 GPG 密钥。

  1. $ sudo apt-key adv –keyserver hkp://p80.pool.sks-keyservers.net:80 –recv-keys 58118E89F3A912897C070ADBF76221572C52609D

向 source.list 中添加 Docker 软件源

  1. $ echo “deb https://apt.dockerproject.org/repo ubuntutrusty main” | sudo tee /etc/apt/sources.list.d/docker.list

不同Ubuntu 和 Debian 版本对应的 APT 源

添加成功后,更新 apt 软件包缓存

  1. $ sudo apt-get update
核对APT源
  1. $ apt-cache policy docker-engine

安装一些安装Docker前的包

  1. $ sudo apt-get install linux-image-extra-$(uname -r) linux-image-extra-virtual

安装apparmor(有人说会提示已安装,但是我的没有提示已安装,所以我就选择还是先装上吧。)

  1. $ sudo apt-get install apparmor

安装Docker

  1. $ sudo apt-get install docker-engine

如果系统中存在旧版本的 Docker ( lxc-docker , docker.io ),会提示是否先删除,选择是即可。

也可在安装之前进行删除命令

  1. $ apt-get purge lxc-docker

启动 Docker 引擎

  1. $ sudo service docker start

验证

  1. $ sudo docker run hello-world

系统会在本地查找hello-world,若没有,会去服务器下载一个测试镜像,安装成功如图。

还可查看版本

  1. $ sudo docker version

建立 docker 用户组

建立 docker 组:

  1. $ sudo groupadd docker

将当前用户加入 docker 组:

  1. $ sudo usermod -aG docker hh
注销重新登录,并检查是否可以不用sudo运行docker
卸载
  1. $ sudo apt-get purge docker-engine
卸载Docker包
  1. $ sudo apt-get autoremove –purge docker-engine
以上命令不会删除文件、容器、卷和系统建立的用户配置文件,如果要删除所有镜像文件、容器、卷,使用如下命令:
  1. $ rm -rf /var/lib/docker
用户设置的关于Docker的配置文件需要自己手动删除。

用 mup 部署 meteor app 到阿里云 ECS 上怎么填写配置文件 mup.js ? - 简书

mikel阅读(1115)

来源: 用 mup 部署 meteor app 到阿里云 ECS 上怎么填写配置文件 mup.js ? – 简书

本文主要是介绍用 mup 部署 meteor app 到云端服务器的过程已经如何配置 mup.js。像国外Galaxy,Modulus 和 Heroku 这种高级自动化的 PaaS 云部署平台在国内都无法正常访问。目前国内又没有同类产品,所以只能自己手动买服务器部署。还好 mup 工具极大的简化了这个过程,它会把服务器和 MongoDB 数据库分别以两个分开的 docker container 形式部署,非常高效。而且整个过程只用执行 mup setup 和 mup deploy 两个命令就够了(国外网络畅通的情况下)。

原文可见我在知乎上的自问自答,这里做一下重述。

我用的是阿里云ECS上1核2G的Ubuntu 14.04 64位服务器。我的 Meteor 版本是1.4.2.1,React 做前端。由于服务器在国内,颇经历了一些波折,才部署成功,以下是我的流程。

我一开始的 mup.js 配置文件是这样的:

刚执行 mup setup 等了一会儿,就遇到的第一个问题,下载docker太慢报错:

解决方案是直接通过阿里云连接进入主机,手动执行 apt-get install -y -q docker-engine (错误信息中有提示),手动进去安装的速度还挺快,安装好再执行 mup setup 成功:

紧接着执行 mup deploy,遇到第二个错误,装不了npm:

继续远程进入主机,手动执行 apt-get install npm,又安装成功:

之后再执行 mup deploy,遇到第三个错误,AssertionError: “undefined” === “function”:

查了一下发现Github([meteor 1.4] AssertionError: “undefined” === “function” · Issue #1091 · arunoda/meteor-up · GitHub)上很多人有同样的问题,是 mup 支持 meteor 1.4 需要 docker image 用 abernix/meteord:base 格式,所以只要把 mup.js 里面相关的字段改掉就好:

再来一次 mup deploy,这个错过去了,但是新错又出现了!

mup 验证部署的时候 curl 服务器没有响应,它认为是部署失败了,检查 mup logs 发现原来配置文件里的 ROOT_URL: ‘oneshot.io’ 格式错误,需要加上http或者https,但 mup 默认的可没有加啊!但是改成 ROOT_URL: ‘http://oneshot.io’ 终于可以了!以下是我最终的 mup.js 配置文件内容。

之后其实又 mup deploy 又报了一个 curl 没响应的错,但这可能是因为它默认60秒以后检测部署,但这个时候服务器还没有准备好。因为我又看了一下 mup logs,刚才的 ROOT_URL 错误已经消失。再打开浏览器,app已经部署上去了!

希望本篇对后来者有所帮助!

Ubuntu 16.04 64位 搭建 Node.js NodeJS 环境_Linux教程_Linux公社-Linux系统门户网站

mikel阅读(953)

Ubuntu 16.04 64位 搭建 Node.js NodeJS 环境

来源: Ubuntu 16.04 64位 搭建 Node.js NodeJS 环境_Linux教程_Linux公社-Linux系统门户网站

我的系统环境:
Ubuntu 16.04 64位

本文内容亲测可用, 请放心食用

使用淘宝镜像

淘宝镜像官网是https://npm.taobao.org/

使用淘宝镜像前请自行安装好 npm 和 node

node 和 npm 的安装

node可以在这里下载
今天是2016-7-01,官方推荐v4.4.4长期支持版

下载并解压 node-v4.4.4-linux-x64.tar.xz
tar -xJf node-v4.4.4-linux-x64.tar.xz
移到通用的软件安装目录 /opt/
sudo mv node-v4.4.4-linux-x64 /opt/

安装 npm 和 node 命令到系统命令
sudo ln -s /opt/node-v4.4.4-linux-x64/bin/node /usr/local/bin/node
sudo ln -s /opt/node-v4.4.4-linux-x64/bin/npm /usr/local/bin/npm

验证:
node -v

v4.4.4

npm -v

2.15.1

设置 npm 使用淘宝源

~/.bashrc 中添加(请先备份 cp ~/.bashrc ~/.bashrc.bak

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

使修改立即生效,输入,回车
source ~/.bashrc

使用淘宝镜像安装 npm 包

终端输入
cnpm install [name]

附录A – npm命令

全局安装

npm install -g 软件包名

全局安装的路径可以通过下面的命令查看

npm config get prefix

全局安装的路径可以通过下面的命令修改

npm config set prefix "目录"

局部安装(将模块下载到当前命令行所在目录),不推荐

npm install 软件包名

下面关于Node.js的内容你可能也喜欢

在 Ubuntu 14.04/15.04 上安装配置 Node.js v4.0.0  http://www.linuxidc.com/Linux/2015-10/123951.htm

如何在CentOS 7安装Node.js http://www.linuxidc.com/Linux/2015-02/113554.htm

Ubuntu 14.04下搭建Node.js开发环境  http://www.linuxidc.com/Linux/2014-12/110983.htm

Ubunru 12.04 下Node.js开发环境的安装配置 http://www.linuxidc.com/Linux/2014-05/101418.htm

Node.Js入门[PDF+相关代码] http://www.linuxidc.com/Linux/2013-06/85462.htm

Node.js开发指南 高清PDF中文版 +源码 http://www.linuxidc.com/Linux/2014-09/106494.htm

Node.js入门开发指南中文版 http://www.linuxidc.com/Linux/2012-11/73363.htm

Ubuntu 编译安装Node.js http://www.linuxidc.com/Linux/2013-10/91321.htm

Node.js 的详细介绍请点这里
Node.js 的下载地址请点这里

Meteor Docker部署详解 - 简书

mikel阅读(1645)

来源: Meteor Docker部署详解 – 简书

很早以前,就有读者要求我详细讲讲Meteor的部署,虽然我在极客学院的视频中讲解过个大概,但是实际操作中大家还是遇到了不少问题。如果大家曾经试图在国内部署Meteor的程序或者应用的话,会感到非常沮丧,因为GFW的原因,很多东西都不明不白地「挂了」。尤其是国外已经有一系列自动化部署工具(如Docker image)的时候,却怎么用都用不了,或者没办法改(或懒得改),只得手动一步步部署,这对于我们使用Meteor的热情还是打击很大的。

所以,这里我也花了几天,研究了一下部署Meteor应用的简便方式,以供大家参考。

0. 遇到问题

之前在视频中有讲到过,部署meteor应用最方便的方法就是使用meteor-up这个项目的mupx分支。这是一种基于Docker的自动化部署方式,只需要在本地写一些配置文件,我们就可以自动把本地的代码库部署到远程服务器上了。

但在国内,我们却经常失败,主要原因有三:

  1. Docker Hub被墙,我们无法直接使用Docker官方镜像源
  2. NPM被墙,我们无法下载安装npm相应扩展包
  3. meteor本身不稳定,有时候国内packages下载较慢

不瞒大家说,当初选择meteor的一大主要原因就是meteor的官方扩展包源没有被墙,meteor add添加扩展包的时候速度还行,做prototype开发比较方便。但是,随着meteor越来越受到关注,又开始拥抱NPM,如何科学获得官方包就提上了议事日程。

这里插一句,人大咋从来没有程序员代表,问问这么多编程必备的网站被墙的问题。天朝封锁最厉害的互联网居然是天朝唯一能拿的出手和美帝比肩的领域,不得不说是一种讽刺。

1. Docker和NPM

1.1 Docker 和 DaoCloud

DaoCloud

Docker翻墙一般使用DaoCloud提供的加速器服务,我们来看一下它的描述:

DaoCloud 加速器是广受欢迎的 Docker 工具,解决了国内用户访问 Docker Hub 缓慢的问题。DaoCloud 加速器经历了两个版本,1.0 版本主要采用了 Docker Registry Mirror 的功能,结合国内的 CDN 服务,为用户提升镜像下载的速度;2.0 版本加入了 DaoCloud 大量自主研发的协议层优化,并提供了可以替代 Docker Pull 的客户端,完美解决国内获取 Docker 镜像 metadata 的问题,并再次成倍提升下载速度。

至于如何安装并使用dao,可以看一下我之前写的文章使用DaoCloud安装Docker和镜像

首先,肯定是注册DaoCloud账户,然后进入Dashboard,点击「加速器」,然后点击「立即开始」,这里进入选择界面,选择你的主机,这里以Ubuntu为例。

Ubuntu

然后我们可以看到,使用这个命令进行Docker的安装:

curl -sSL https://get.daocloud.io/docker | sh

安装过程结束后,可执行下面命令验证安装结果。如果看到输出 docker start/running 就表示安装成功。

sudo service docker status

点击「安装好了」,接着安装我们的主机监控程序:

curl -sSL https://get.daocloud.io/daomonit/install.sh | sh -s 72346df3cbe80你自己的token8bcc77d434518

这样,我们的Docker和dao就全部安装完成。

2. NPM

由于众所周知的网络原因,npm install命令行从npm官方源拖代码时会遇上麻烦。一般的方法是将npm仓库源替换为国内镜像:

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

但是由于我们是在Docker中进行部署,所以我们需要在相应的Docker image中加入这两条修改镜像源的命令。至于在哪里修改,我们则需要看看mupx的内容了。

3. meteor-up with docker

首先,需要说明的是,这里的mupx指的是一种基于Docker部署meteor应用的工具,采用node.js和shell script编写,等mupx稳定之后,将合并到mup分支中。

可以看到,实际上有两个采用Docker的meteor-up项目:

arunoda mupx

kadirahq mup

其中,第二个是mupx的新项目地址,从更新上也可以看出,第一个repo已经停止更新,迁移到第二个kadirahq下面了。但是由于mupmupx重复的问题,第二个repo的命令需要自己编译一下,我们clone这个项目,然后来自己编译它:

git clone https://github.com/kadirahq/meteor-up
cd meteor-up
npm install
npm link

这里,如果你之前安装过(npm install -g mup)mup的话,需要删除mup和它的link,不然这里npm link会出错。

在新的meteor-up项目中,这里我们使用mup.js代替之前的mup.json。原因是我们可以在这里面写JavaScript代码,来处理例如读写ssh key文件等事情。一个示例的mup.js文件如下:

module.exports = {
  servers: {
    one: {
      host: '1.2.3.4',
      username: 'root'
      // pem:
      // password:
      // or leave blank for authenticate from ssh-agent
    }
  },

  meteor: {
    name: 'app',
    path: '../app',
    servers: {
      one: {}, two: {}, three: {} //list of servers to deploy, from the 'servers' list
    },
    env: {
      ROOT_URL: 'app.com',
      MONGO_URL: 'mongodb://localhost/meteor'
    },
    logs: { //optional
      driver: 'syslog',
      opts: {
        url:'udp://syslogserverurl.com:1234'
      }
    }
    dockerImage: 'madushan1000/meteord-test', //optional
    deployCheckWaitTime: 60 //default 10
  },

  mongo: { //optional
    oplog: true,
    port: 27017,
    servers: {
      one: {},
    },
  },
};

4. mup详解

下面,我们就来看一下这个repo的结构和内容,它到底干了些什么。

├── index.js
├── lib
│   ├── execute.js
│   ├── modules
│   │   ├── default
│   │   │   ├── __tests__
│   │   │   │   └── index.js
│   │   │   ├── index.js
│   │   │   └── template
│   │   │       ├── mup.js
│   │   │       └── settings.json
│   │   ├── docker
│   │   │   ├── __tests__
│   │   │   │   └── index.js
│   │   │   ├── assets
│   │   │   │   └── docker-setup.sh
│   │   │   └── index.js
│   │   ├── index.js
│   │   ├── meteor
│   │   │   ├── __tests__
│   │   │   │   └── index.js
│   │   │   ├── assets
│   │   │   │   ├── meteor-deploy-check.sh
│   │   │   │   ├── meteor-setup.sh
│   │   │   │   ├── meteor-start.sh
│   │   │   │   ├── meteor-stop.sh
│   │   │   │   ├── templates
│   │   │   │   │   ├── env.list
│   │   │   │   │   └── start.sh
│   │   │   │   └── verify-ssl-config.sh
│   │   │   ├── build.js
│   │   │   └── index.js
│   │   ├── mongo
│   │   │   ├── __tests__
│   │   │   │   └── index.js
│   │   │   ├── assets
│   │   │   │   ├── mongo-setup.sh
│   │   │   │   ├── mongo-start.sh
│   │   │   │   ├── mongo-stop.sh
│   │   │   │   └── mongodb.conf
│   │   │   └── index.js
│   │   ├── proxy
│   │   │   ├── __tests__
│   │   │   │   └── index.js
│   │   │   └── index.js
│   │   └── utils.js
│   ├── mup-api.js
│   └── updates.js
├── package.json
├── scripts
│   └── mocha-bootload.js
└── tests

可以看到,我们的主要模块有这五个default, docker, meteor, mongo, proxy。我们来分别讲解一下:

4.1 default

default里面定义了一些mup的基本命令,包括deploy,help,init,logs,reconfig,restart,setup,start,stop等。

4.2 docker

使用mup setup命令时,执行的是assets/docker-setup.sh这个脚本,这个脚本里的内容就是安装Docker。当然,由于墙的原因,在国内是安装不了Docker的,所以我们可以通过1.1讲述的那样,采用DaoCloud手动安装Docker。注意,这里setup命令会首先检测是否安装过Docker,如果安装过,那么不会重复安装了。

4.3 mongo

可以看到,在mongo/assets/mongo-start.sh中,我们看到这样一行,获取官方的mongodb最新镜像,然后运行:

sudo docker pull mongo:latest

sudo docker run \
  -d \
  --restart=always \
  --publish=127.0.0.1:27017:27017 \
  --volume=/var/lib/mongodb:/data/db \
  --volume=/opt/mongodb/mongodb.conf:/mongodb.conf \
  --name=mongodb \
  mongo mongod -f /mongodb.conf

使用docker pull肯定是不行的,会被墙,所以这里我们把docker pull改为dao pull

4.4 meteor

index.js中,我们定义了start.sh中image的名字,也就是我们使用的基础Docker镜像。

list.copy('Pushing the Startup Script', {
  src: path.resolve(__dirname, 'assets/templates/start.sh'),
  dest: '/opt/' + config.name + '/config/start.sh',
  vars: {
    appName: config.name,
    useLocalMongo: api.getConfig().mongo ? 1 : 0,
    port: config.env.PORT || 80,
    sslConfig: config.ssl,
    logConfig: config.log,
    image: config.dockerImage || 'meteorhacks/meteord:base'
  }
});

可以看到,假如我们没有在mup.js中另外指定image的话,默认image则是meteorhacks/meteord:base。这里我们改成loongmxbt/meteord:base,你也可以修改成自己的meteord base image。

然后我们看一下meteor/assets/templates/start.sh这个文件,其中有这几行:

set +e
docker pull <%= image %>
set -e

这里和上面一样,将docker pull改为dao pull。这里的<%= image %>就是我们之前指定的image,默认为meteorhacks/meteord:base。在下一个部分里,我们详细看看这个image做了些啥。

接着,我们会运行这个meteorhacks/meteord:base

docker run \
  -d \
  --restart=always \
  --publish=$PORT:80 \
  --volume=$BUNDLE_PATH:/bundle \
  --hostname="$HOSTNAME-$APPNAME" \
  --env-file=$ENV_FILE \
  <% if(useLocalMongo)  { %>--link=mongodb:mongodb --env=MONGO_URL=mongodb://mongodb:27017/$APPNAME <% } %>\
  <% if(logConfig && logConfig.driver)  { %>--log-driver=<%= logConfig.driver %> <% } %>\
  <% for(var option in logConfig.opts) { %>--log-opt <%= option %>=<%= logConfig.opts[option] %> <% } %>\
  --name=$APPNAME \
  <%= image %>

如果还设置了SSL的话,我们会多运行一个meteorhacks/mup-frontend-server作为前端反代,之后,我们也会看看这个前端反代服务器是什么:

<% if(typeof sslConfig === "object")  { %>
  # We don't need to fail the deployment because of a docker hub downtime
  set +e
  dao pull meteorhacks/mup-frontend-server:latest
  set -e
  docker run \
    -d \
    --restart=always \
    --volume=/opt/$APPNAME/config/bundle.crt:/bundle.crt \
    --volume=/opt/$APPNAME/config/private.key:/private.key \
    --link=$APPNAME:backend \
    --publish=<%= sslConfig.port %>:443 \
    --name=$APPNAME-frontend \
    meteorhacks/mup-frontend-server /start.sh
<% } %>

小贴士:这里你可能会看到诸如set +eset -e的情况。set -e告诉bash一但有任何一个语句返回非真的值,则退出bash。使用-e的好处是避免错误滚雪球般的变成严重错误,能尽早的捕获错误。如果你必须使用返回非0值的命令,或者你对返回值并不感兴趣,或者你需要暂时关闭错误检查功能,就可以用set +eset -e包裹命令:
set +e
command1
command2
set -e
这样,如果docker hub挂了,我们的deploy也不会因此中断。

4.5 lib/updates.js

lib/updates.js中,我们看到有一行定义const uri的,我们依旧将它改成淘宝的uri:

const uri = 'https://registry.npm.taobao.org/npm';

可以看到,这里用到了silent-npm-registry-client这个包,具体的API可以查看npm-registry-client的文档

5. meteorhacks/meteord:base

5.1 Dockerfile

首先看这个Dockerfile,它主要运行了两个shell script:

RUN bash $METEORD_DIR/init.sh

EXPOSE 80
ENTRYPOINT bash $METEORD_DIR/run_app.sh

接着看看这个init.sh

5.2 init.sh

可以看到,主要有以下这四个脚本构成,它们都在scripts/lib目录下:

bash $METEORD_DIR/lib/install_base.sh
bash $METEORD_DIR/lib/install_node.sh
bash $METEORD_DIR/lib/install_phantomjs.sh
bash $METEORD_DIR/lib/cleanup.sh

其中,install_base安装了curl命令,install_node安装node和npm,install_phantomjs安装了phantomjs,cleanup删除了一些临时文件。

5.3 install_node

可以看到这里的scripts/lib/install_node.sh中,下载了现在meteor所使用的node版本,也就是0.10.41,当然,这是个比较古老的版本,据说1.3要换一个比较新的版本。

cd /tmp
curl -O -L http://nodejs.org/dist/v${NODE_VERSION}/${NODE_DIST}.tar.gz
tar xvzf ${NODE_DIST}.tar.gz
rm -rf /opt/nodejs
mv ${NODE_DIST} /opt/nodejs

ln -sf /opt/nodejs/bin/node /usr/bin/node
ln -sf /opt/nodejs/bin/npm /usr/bin/npm

这里我测试了一下,curl命令下载node在国内是可以成功的,只不过速度有点慢,为方便起见,这里还是更换下载地址为淘宝node源

curl -O -L http://npm.taobao.org/mirrors/node/v${NODE_VERSION}/${NODE_DIST}.tar.gz

当然,npm也是用不了的,所以这里还要修改npm的registry到淘宝镜像:

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

这样,我们就大功告成了吗?显然还没有,我们继续看看install_phantomjs这个文件。

5.4 install_phantomjs

我们可以看到这一行

curl -L -O https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-${PHANTOMJS_VERSION}-linux-${ARCH}.tar.bz2

显然,既有https,又是bitbucket,撞墙概率大大增加。幸运的是,淘宝也给我们提供了phantomjs镜像源。我们修改这个命令:

curl -L -O http://npm.taobao.org/mirrors/phantomjs/phantomjs-${PHANTOMJS_VERSION}-linux-${ARCH}.tar.bz2

安装phantomjs能够帮助你的站点被爬虫爬到。

小贴士:phantomjs是什么?PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于页面自动化 ,网络监测,网页截屏,以及无界面测试等。它和meteor的spiderable这个扩展包有关,如果你使用meteor bundle部署应用,你必须安装phantomjs。如果你是部署在galaxy上,那么MDG已经帮你搞定了一切。

5.5 Docker Hub Automated Build

当然,如果不是在本地(国内)服务器上自行构建image的话,我们只需要添加这两行,发布到Docker Hub上构建即可。

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

这里插入一点Docker Hub的自动构建使用方法,以便你今后自己的image发布。

我们fork了meteorhacks/meteord这个仓库之后,git clone到本地,然后创建一个新的分支,名为npm-taobao

git checkout -b npm-taobao

创建自动构建镜像

连接Github帐号

选择meteord项目

Build Settings中设置Docker file路径和tag

成功构建镜像

6. meteorhacks/mup-frontend-server

之前我们也提到过,如果你需要使用SSL证书,则需要添加一个Nginx前端的代理,也就是mup-frontend-server

lib/install_nginx.sh中,我们有这么一行下载nginx安装包。

wget http://nginx.org/download/nginx-$NGINX_VERSION.tar.gz

当然,这个目前没有被墙,所以我们暂时不用担心哈。

7. 综合

综上所述,我们主要修改了两个repo,分别是mup命令的repo和meteord这个镜像的repo。

修改完成后的两个repo分别在这里:

所以我们的部署步骤变成了:

  1. 在服务器上,使用DaoCloud安装Docker和DaoCloud Toolbox加速器
  2. 使用mup init初始化配置
  3. 使用mup setup部署服务器环境
  4. 使用mup deploy部署本地应用至服务器

mup setup命令结果:

Started TaskList: Setup Docker
[www.meteorain.com] - setup docker
[www.meteorain.com] - setup docker: SUCCESS

Started TaskList: Setup Meteor
[www.meteorain.com] - Setup Environment

Started TaskList: Setup Mongo
[www.meteorain.com] - setup environment
[www.meteorain.com] - setup environment: SUCCESS
[www.meteorain.com] - copying mongodb.conf
[www.meteorain.com] - Setup Environment: SUCCESS
[www.meteorain.com] - copying mongodb.conf: SUCCESS

Started TaskList: Start Mongo
[www.meteorain.com] - start mongo
[www.meteorain.com] - start mongo: SUCCESS

服务器端docker ps结果:

CONTAINER ID        IMAGE                    COMMAND                  CREATED             STATUS              PORTS                        NAMES
9b87110206f8        loongmxbt/meteord:base   "/bin/sh -c 'bash $ME"   21 minutes ago      Up 21 minutes       0.0.0.0:80->80/tcp           meteorain
832f2cd61298        mongo                    "/entrypoint.sh mongo"   24 hours ago        Up 24 hours         127.0.0.1:27017->27017/tcp   mongodb

8. TODO List

  1. 你可能会发现,我们并没有改变安装Docker的步骤,那是因为daocloud加速器需要通过一个key来安装,这个key是网站产生的,后期考虑如果能轻松获取key的话做一下自动化的部署。
  2. 每次mup setup时,mongo都会重新安装,还是挺费时费流量的,考虑后期修改成Docker那样,检测是否已经有image。
  3. 使用meteord:base镜像重新deploy时,会重新pull镜像并构建,对于原型项目来说比较浪费时间。可以测试一下devbuild。
  4. SSL测试,使用Let’s Encrypt.

9. MeteoRain

部署成功后的Meteor1.3项目: http://www.meteorain.com/

Meteor全栈开发

参考资料

ionic打包apk - 博客频道 - CSDN.NET

mikel阅读(1104)

来源: ionic打包apk – 博客频道 – CSDN.NET

以下是以项目文件在D:\project\xuanGu文件夹下,项目文件名就叫xuanGu

1.ionic platform ls   //查看有哪些平台
2.ionic platform add Android/ios   //添加安卓/ios平台
3.ionic platform remove Android/ios   //移除安卓/ios平台
4.ionic resources  //创建平台的icon.png图标以及启动页面
5.ionic build Android/ios   //编译 生成.apk

然后安装到手机上就可以测试啦

adb devices //查看和电脑连接的设备    adb是android studio 的命令
找到apk的文件位置,直接安装到手机上,当然你也可以将这个apk文件拷贝到手机上,在手机上运行apk文件进行安装。
D:\project\xuanGu\platforms\android\build\outputs\apk>adb install -r android-Debug.apk//直接强制安装 apk 到手机上

npm install -g ios-deploy 失败问题的解决方法 - cooldragon的专栏 - 博客频道 - CSDN.NET

mikel阅读(1425)

当使用Cordova或ionic命令行时,npm install -g ios-deploy 或sudo npm install -g ios-deploy 都报错,如:npm WARN lifecycle ios-deploy@1.8.5~preinstall: cannot run in wd %s %s (wd=%s) ios-deploy@1.8.5 ./src/scr

来源: npm install -g ios-deploy 失败问题的解决方法 – cooldragon的专栏 – 博客频道 – CSDN.NET

当使用Cordova或ionic命令行时,

npm install -g iOS-deploy

或sudo npm install -g ios-deploy 都报错,

如:

npm WARN lifecycle ios-deploy@1.8.5~preinstall: cannot run in wd %s %s (wd=%s) ios-deploy@1.8.5 ./src/scripts/check_reqs.js && xcodebuild /usr/local/lib/node_modules/.staging/ios-deploy-298c9491
npm ERR! Darwin 15.3.0
npm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” “install” “-g” “ios-deploy”
npm ERR! node v5.8.0
npm ERR! npm  v3.7.3
npm ERR! path /usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod

npm ERR! enoent ENOENT: no such file or directory, chmod ‘/usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy’
npm ERR! enoent ENOENT: no such file or directory, chmod ‘/usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy’
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent
解决问题方法在 https://github.com/phonegap/ios-deploy/issues/188 可以找到,其实就是:

sudo npm install -g ios-deploy –unsafe-perm=true

这次倒给出了提示:

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!! WARNING: You are on OS X 10.11 El Capitan, you may need to add the
!!!! WARNING:   `–unsafe-perm=true` flag when running `npm install`
!!!! WARNING:   or else it will fail.
!!!! WARNING: link:
!!!! WARNING:   https://github.com/phonegap/ios-deploy#os-x-1011-el-capitan
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

ionic常用命令记录 - 前端客 - 博客园

mikel阅读(957)

来源: ionic常用命令记录 – 前端客 – 博客园

npm install -g ionic

//安装ionic

ionic lib update

//更新www/lib/ionic 目录的文件,如有项目中有bower,此命令会运行bower update ionic, 否则则会从CDN上下载文件并替换。

ionic start your_app_name [template]

//创建一个项目,其中template可以是内置的模板类型:blank/sidemenu/tabs(default)三种,也可以是github地址:https://github.com/driftyco/ionic-starter-tabs (这叫ionoic-starter),或者是Codepen starter地址:http://codepen.io/ionic/pen/odqCz

//可选的参数: -a your_app_name -i com.yourcompany.youapp -w (不要用cordova)

ionic serve [options]

//启动一个本地的server,在浏览器中打开,并可监视文件变化,随时刷新浏览器。// 可以在主目录下的ionic.project文件的watchPatterns中配置要监视的文件夹。如:

{
  "name": "myApp",
  "app_id": "",
  "watchPatterns": [
    "www/js/*",
    "!www/css/**/*"
  ]
}
ionic setup sass

//增加一个watchPatterns到ionic.project中。

ionic serve --lab

//在浏览器中打开ios和andriod的显示界面

ionic serv --address 68.52.96.10

//指明一个外部的ip地址,可以让外部用户查看。

ionic platform ios android

//添加目标平台

ionic build ios

//构建ios平台

ionic emulate ios [options]

//使用模拟器模拟ios

//该命令等价于: ionic run ios –emulator

ionic run ios [options]

//使用设备运行应用,如果无设备可用将自动使用模拟器。

//options的选项包括:

-l livereload, 实时刷新变化。

-c 打印app里的console

-s 打印设备的console

-p 指定设备的端口

-i 指定livereload的重刷端口

Debug|–release

//当处于livereload模式时,使用r重启客户端,使用 g your_url 跳转到指定url, 使用c启动或关闭console,使用s启动或关闭设备的console, 使用q退出。

ionic resources [--splash] [--icon]

//ionic会将本地的资源文件(支持png、psd和ai,尺寸越大越好)上传到它的服务器进行处理。本地资源文件放到resources目录下,如果是某个平台单独的资源,可以放到对应平台下,比如resources/Android/icon.png,这样就会把处理好的资源自动放到该平台下,而不是所有平台都放。

ionic upload

//该命令上传自己的项目到ionic服务器,上传完成后会有一个项目编号。

//安装Ionic View的app,使用ionic的账号登录进去,可以查看自己的项目。

//也可以直接登录ionic的app网站,下载其他平台的app,比如安卓。

ionic info

//查看系统情况

ionic browser add crosswalk

//安卓自带浏览器性能不好,可以强行安装一个壳,这将安装一个Chromium内核。

ionic browser list

//查看可用的browser

ionic browser revert android

// 删除安装的browser

Ionic2:创建App启动页滑动欢迎界面 - K_Men的博客 - 博客频道 - CSDN.NET

mikel阅读(829)

摘要: 每个有逼格的App在第一次启动时都有一个欢迎界面,通常是几个单页面或者带动画的单页面滑动到最后一页有个启动的按钮,本文将使用Ionic2来创建,So easy!效果如下,图片来自网络本文例子和上图稍有不同,主要功能如下:每滑动一下展示一张全屏图片;滑动到最后一页才出现启动按钮;欢迎界面只在第一次安装启动时出现。下面就让我们一步一步实现这个功能:1.创建应

来源: Ionic2:创建App启动页滑动欢迎界面 – K_Men的博客 – 博客频道 – CSDN.NET

摘要: 每个有逼格的App在第一次启动时都有一个欢迎界面,通常是几个单页面或者带动画的单页面滑动到最后一页有个启动的按钮,本文将使用Ionic2来创建,So easy!

效果如下,图片来自网络

本文例子和上图稍有不同,主要功能如下:

  • 每滑动一下展示一张全屏图片;
  • 滑动到最后一页才出现启动按钮;
  • 欢迎界面只在第一次安装启动时出现。

下面就让我们一步一步实现这个功能:

1.创建应用:

使用Ionic2创建应用非常简单,只需在V1的命令后跟上–v2即可,如下:

ionic start ionic2-welcome --v2

2.创建Component

使用命令行创建页面或者自行在创建文件

ionic g page welcome

然后打开应用跟组件app.component.ts,导入组件,app.module.ts也一样并配置


import { WelcomePage } from '../pages/welcome/welcome';

3.创建模板文件welcome.html

<ion-slides pager>
 
  <ion-slide>
    <img src="images/slide1.png" />
  </ion-slide>
 
  <ion-slide>
    <img src="images/slide2.png" />
  </ion-slide>
 
  <ion-slide>
    <img src="images/slide3.png" />
  </ion-slide>
 
  <ion-slide>
    <ion-row>
        <ion-col>
            <img src="images/slide4.png" />
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <button light (click)="goToHome()">立即启动</button>
        </ion-col>
    </ion-row>
  </ion-slide>
 
</ion-slides>

通过ionic自带的ion-slides可以很方便的创建一个欢迎页面
4.创建welcome.scss

ion-slide {
    background-color: #eeeeee;
}
 
ion-slide img {
    height: 70vh !important;
    width: auto !important;
}

5.创建welcome.ts

import { Component } from '@angular/core';
import {NavController} from 'ionic-angular';
import {HomePage} from '../home/home';  
 
@Component({
    templateUrl: 'welcome.html'
})
export class WelcomePage {
    constructor(public navCtr: NavController){ 
    }
 
    goToHome(){
        this.navCtr.setRoot(HomePage);
    }
}

6.在根组件导入welcome组件,编辑app.moudle.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HomePage } from '../pages/home/home';
import { WelcomePage } from '../pages/welcome/welcome';
import { Storage } from '@ionic/storage';
@Component({
  template: `<ion-nav &#91;root&#93;="rootPage"></ion-nav>`,
   
})
export class MyApp { 
  rootPage: any; 

  constructor(platform: Platform, public storage: Storage) {

    this.storage.get('firstIn').then((result) => { 
             
      if(result){  
        this.rootPage = HomePage; 
      } 
      else{
        this.storage.set('firstIn', true);
        this.rootPage = WelcomePage;
      }
            
    }
    );  

  	
 
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault(); 
    });
  } 
}

这里判断是否是第一次开启app采用的是native的storage组件,第一次启动会写入storage一个变量firstIn,下次启动时如果读取到这个变量则直接跳过欢迎页,注意ionic2开始storage默认使用的是IndexedDB,而不是LocalStorage