VPS网站搭建

在搬瓦工买了一个VPS只装了一个Shadowsocks用来翻墙,实在是浪费。凑巧我有几个域名,就把搭建网站的简单过程走一遍,学习一下服务端的知识。

刚开始的疑问:

1.一个VPS(单IP)如何部署多个应用程序(不同的端口,且非80端口)?
2.二级域名如何配置?

需要的东西:

一个空间和多个域名

我首先在空间上跑了一个简单的NodeJS程序,端口3000,然后直接用IP + port 可以访问,然后我就到域名服务商的域名管理那里添加域名解析,将域名解析到对应的IP,然后成功访问。刚开始我以为可以直接在那里添加端口,然后映射到不同程序呢。然后搜了一些资料貌似不是这样的,基本是用Nginx、Apache做转发。
这就基本解决了第一个问题:一个VPS(单IP)如何部署多个应用程序(不同的端口,且非80端口)?

具体如何做呢?(centos)

1.首先安装Nginx

sudo yum install epel-release
sudo yum install nginx

2.启动Nginx:

sudo /etc/init.d/nginx start

3.配置Nginx:

http{
    server {
        listen 80;
        server_name a.com;
        location / {
            proxy_pass http://localhost:8080;
        }
    }
    server {
        listen 80;
        server_name b.com;
        location / {
            proxy_pass http://localhost:8081;
        }
    }
}

当请求过来的时候Nginx首先拿到请求,然后根据域名分发到不同的应用服务器(不同端口)

4.重新加载配置

nginx -s reload

二级域名如何玩呢?

本来以为会很难,其实也很简单。类似上面解析域名的操作,添加一个A记录,然后主机名填你想填的比如:blog、mail、bbs等,然后到Nginx配置一下server_name:

server {
    listen 80;
    server_name blog.b.com;
    location / {
        proxy_pass http://localhost:8081;
    }
}

然后就可以访问了!

还有一点如何让NodeJS程序一直跑着?就是我退出终端或程序异常中断等,这里我选择了:PM2,其实还有好多选择 nodemon 、forever 等没有做过对比,有时间在看看区别。

pm2 start app.js

参考资料:

http://www.west.cn/cms/news/domain/2014-10-22/1404.html

https://segmentfault.com/q/1010000003756513

https://segmentfault.com/q/1010000004112942

http://httpd.apache.org/docs/current/vhosts/examples.html

https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-centos-6-with-yum

https://www.npmjs.com/package/pm2

JavaScript Template实现

模板引擎做了两件事:

  1. 拼接字符串
  2. 执行字符串(new Function)

var re = /<%([^%>]+)?%>/g;

这句正则表达式会捕获所有以<%开头,以%>结尾的片段。

dp&sp&dpi&pt

dp

Density-independent Pixels - An abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi (dots per inch) screen, on which 1dp is roughly equal to 1px. When running on a higher density screen, the number of pixels used to draw 1dp is scaled up by a factor appropriate for the screen’s dpi. Likewise, when on a lower density screen, the number of pixels used for 1dp is scaled down. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Using dp units (instead of px units) is a simple solution to making the view dimensions in your layout resize properly for different screen densities. In other words, it provides consistency for the real-world sizes of your UI elements across different devices.

sp

Scale-independent Pixels - This is like the dp unit, but it is also scaled by the user’s font size preference. It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and the user’s preference.

pt

Points - 1/72 of an inch based on the physical size of the screen, assuming a 72dpi density screen.

px

Pixels - Corresponds to actual pixels on the screen. This unit of measure is not recommended because the actual representation can vary across devices; each devices may have a different number of pixels per inch and may have more or fewer total pixels available on the screen.

mm

Millimeters - Based on the physical size of the screen.

in

Inches - Based on the physical size of the screen.

单位换算

https://www.w3.org/Style/Examples/007/units.en.html

1in = 2.54cm = 25.4mm = 72pt = 6pc

ES6的6个小特性(二)

继上一篇的 《Six Tiny But Awesome ES6 Features》,这次我再分享6个可以减少代码和最大化效率的方法。

1.Object Shorthand

新的对象声明方法允许我们可以不声明对象的 key :

var x = 12;
var y = yes;
var z = {one:'1',two:'2'};

// The old way
var obj = {
    x:x,
    y:y,
    z:z
}
// The new way
var obj = {x,y,z};

2.Method Properties

避免 function 关键字声明函数:

var davidwalsh = {
    makeItHappen(param){
        // do stuff
    }
}

必须承认去除掉 function 关键字确实使代码简洁、更好维护。

3.Blocks vs Immediately Executed Functions

下面创建立即执行方法的模式有点难看:

(function(){
    // do stuff
})();

通过ES6我们可以通过 {} 和 let 来创建块级作用于,完成立即执行函数的作用:

{
    let j = 12;
    let divs = document.querySelectorAll('div');

    // do stuff
}

j; // ReferenceError: j is not defined...

如果在 Block 内部声明函数,它将会被外部访问到。但你如果使用 let 关键字声明函数自变量,将不使用括号的情况下实现 IEF 的功能。

4. for loops and let

因为在JS里面会存在变量提升,我们经常会在作用域前面声明一些”无用”的迭代变量,例如(for var x = …)。ES6 使用 let 解决了此恼人的问题:

for(let x = 0; x < len; i++){
    //do stuff
}

x; // ReferenceError: x is not defined

不久以后 let 会被应用的更多。

5.get and set for Classes

class Cart{
    constructor(total){
        this._total = total;
    }
    get total(){return this._total;}
    set total(v){this._total = Number(v);}
}

var cart = new Cart(100);

cart.total // 100

能为属性设置 get、set 是这部分最棒的。不需要使用函数来进行特殊的设定–当执行 obj.prop = {value} 时,一切都会自动执行。

6.startsWith,endsWith and includes

"MooTools".startsWith("Moo"); // true;
"MooTools".startsWith("moo"); // false;

"MooTools".endsWith("Tools"); // true;

"MooTools".includes("oo"); // true;

注:includes 方法兼容性还是很多,曾有一个线上bug,就是因为不支持此方法导致的。

原文:https://davidwalsh.name/es6-features-ii/amp

ES6的6个小特性

JS社区的每个人都喜欢新的API、语法以及一些简单、明了更高效的完成重要任务的新特性。过去一年ES6带来了十足的进步,下面是6个我最喜欢的JS新增特性。

1.Object[key]

有时候不能在对象变量声明时设置所有的key/value,所以得再声明之后添加key/value。

let myKey = 'key3';
let obj = {
    key1: 'One',
    key2: 'Two'
};
obj[myKey] = 'Three';

往好的说这有点不方便,往坏的说这种方式令人疑惑而且有点丑陋。ES6提供给开发者一种更优雅的方式:

let myKey = 'variableKey';
let obj = {
    key1: 'One',
    key2: 'Two',
    [myKey]: 'Three' /* yay! */
};

开发者可以使用[]包裹变量从而使用一条语句完成所有的功能。

2.Arrow Functions

你不需要跟上ES6的所有改变,箭头函数已经是许多讨论的话题并且也给JS开发者带来了一些困惑。即使我可以写很多博文来说箭头函数的特点,但是我想指出箭头函数是如何提供一个为简单函数压缩代码的方法。

// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11

// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);

functionsreturn关键词,有时甚至不需要添加(),箭头函数为写函数提供了一种简短的代码书写方式。

find/findIndex

JS为开发者提供了Array.prototype.indexOf方法来获取数组中的指定元素下标,但是indexOf并没有提供一个根据判断条件来获取指定元素的方法,findfindIndex两个方法提供了取出第一个满足计算条件的元素和下标。

let age = [12,19,6,4];

let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 19); // 1

…扩展修饰符

扩展修饰符表示数组和可迭代对象在调用的时候应该拆分成单个参数:

// Pass to function that expects separate multiple arguments
// Much like Function.prototype.apply() does
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

// Convert NodeList to Array
let divsArray = [...document.querySelectorAll('div')];

// Convert Arguments to Array
let argsArray = [...arguments];

这个特定的另一个红利可以把可迭代对象(NodeListarguments)变成真的数组,以前我们经常使用Array.from或其他方法实现的。

Template Literals

JS里多行字符起初通过+\来完成的,但是都很难维护。许多开发者甚至一些框架使用<script>标签来容纳模板,然后使用DOM方法的outerHTML来获取HTML字符。

ES6提供了Template Literals使用反引号来容易的创建多行字符串:

// Multiline String
let myString = `Hello

I'm a new line`;

//Basic interpolations
let obj = {x:1,y:2};

console.log(`Your total is: ${obj.x + obj.y}`); // Your total is 3

Default Argument Values

为函数参数提供默认值在服务端语言已经提供(python、php),现在JS也有此能力:

//Basic usage

function great( name = 'Anon' ){
    console.log(`Hello ${name}`);
}

great(); // Hello Anon!

//You can have a function too!

function greet( name = 'Anon',callback = function(){} ){
    console.log(`Hello ${name}!`);
    // No more "callback && callback()" (no conditional)
    callback();
}

// Only set a default for one parameter
function greet(name, callback = function(){}) {}

以上列出的6个特性就是ES6提供给开发者,当然还有许多特性。

评论里提供的:

1 .

const isRequired = () => {throw new Error('param is required');};

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

2 .

const is = {
    get required(){
        throw new Error('Required argument')
    }
}

import {is} from 'utils'

const foo(name = is.required) => Array.from(name)

原文:https://davidwalsh.name/es6-features

静默一切console.log和alert

开发的时候可以打开静默,上线可以静默:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 备份以备后用
var __log = console.log;
var __alert = window.alert;
//静默 console.log alert
function mute() {
console.log = function(){};
window.alert = function(){};
}
//打开静默
function unmute() {
console.log = __log;
window.alert = __alert;
}

移动端调试

PC端调试两大利器:Firefox的Firebug和Chrome的devtools,有这两个东西PC端的调试基本没有什么问题。但是随着前端的移动开发需求越来越多,移动端的调试也渐渐被大家重视。可是移动端没有像PC那样方便,但是解决方法还是有的。

我大体分三种移动端调试需求:

1.浏览器的页面调试(mobile web page)

1.1 iOS的Safari

手机端:设置 → Safari → 高级 → Web 检查器 → 开。

mac端:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。

ios-debugger
ios-debugger
ios-debugger

最后数据线连接电脑和手机或者打开模拟器,Mac里的Safari(如下图)都可以看到连接的设备,点到对应的页面就可以调试:

ios-debugger

1.2 iOS设备模拟器

ios-debugger
ios-debugger
ios-debugger

注:iOS模拟设备里的Safari打开调试模式和上面一样。

以前搞Swift开发时,遇到模拟器无法弹起键盘:

ios-debugger

1.2 Android

直接复制官网的一些调试条件:

  • Chrome 32 or later installed on your development machine.
  • A USB cable to connect your Android device.
  • For browser debugging: Android 4.0+ and Chrome for Android.
  • For app debugging: Android 4.4+ and a WebView configured for debugging.

以上可知不能调试低版本Android或者安装的其它浏览器,解决版本和微信里面相同。

2.微信内嵌页面

调试微信内嵌页和低版本安卓使用weinre

npm -g install weinre

控制台使用下面方法启动:

weinre –boundHost -all-

具体调试方法看官网。

参考:

  1. https://www.smashingmagazine.com/2014/09/testing-mobile-emulators-simulators-remote-debugging/
  2. https://github.com/nupthale/weinre
  3. https://github.com/jieyou/remote_inspect_web_on_real_device
  4. https://segmentfault.com/a/1190000000459296