起源

在移动web调试时经常使用jsconsole工具，最近该工具线上地址挂了，网上查询了下，发现了jsconsole的源码：
https://github.com/remy/jsconsole 根据文档的指引，只需要两个命令npm install及node .就能在本机新建一个jsconsole的调试网站，于是就想着把项目从本地迁移至云上，以方便使用。

前期准备

• 云服务器一台 买了阿里云的一台低配服务器，系统安装的是linux的Ubuntu。

• 域名 同样在阿里云上买的，域名叫leonddup.com，取意day day up。

域名解析

• 什么是域名解析 域名解析就是将域名指向云服务器的ip，这样就能通过域名访问云上的内容。ip会在购买服务器后提供。

• 具体操作 阿里云提供了非常友好的域名解析操作界面

基本小白都能搞定，同时我们发现左侧还有其他服务网站监控、负载均衡、CDN加速等等，都是前端范畴的一些功能及优化，后面再一一尝试。

linux系统初学

云服务器安装的是linux系统，因此需要学习下linux的常用命令。

• 远程连接服务器

• 阿里云提供的web版终端

• mac终端远程连接sudo ssh root@[ip]。

• 创建本人用户云服务器

默认是root用户，每次登陆root不仅不安全还别扭，因此创建本人用户:

useradd -d /home/leon -m leon

为新用户添加sudo权限:

• 打开sudoers配置文件:visudo

• 在root ALL=(ALL:ALL) ALL下添加当前用户 leon ALL=(ALL:ALL) ALL。

现在可以直接远程连接leon用户了

sudo ssh leon@[ip]。

• 安装node及git

项目中需要用到node及git，可能的场景包括git代码管理、node服务开启、项目打包等。

linux的安装指令为apt-get，

安装node:

sudo apt-get install nodejs、

sudo apt-get install npm，

安装git:

sudo apt-get install git

• 服务进程的开启与关闭

显示网络信息：netstat，-a显示所有端口，-l显示所有监听中的端口，

查看进程信息：ps -ef|grep [name]，

终止服务：`kill [进程号]，

• 本地文件上传到服务器

由于一般是在本地coding，然后将最终的代码上传到云上，因此需要copy文件到云上。

• 通过git管理 代码push到码云上，服务器中再pull下来。可以选择gitlab管理项目代码，也可以直接将代码上传到github托管，云服务器直接从github上pull代码。

• linux指令scp [参数] [原路径] [目标路径]。

反向代理

实际应用中会开启很多个服务，每个服务独立开来，此时需要反向代理，代理不同端口的服务。

• 什么是反向代理

客户端向代理服务器发送请求，代理服务器向其他服务器获取资源返回给客户端。

• node方案

引用express及express-http-proxy两个包搭建:

app.use('/jsconsole', proxy('localhost:8000'))

• Nginx方案

1.安装Nginx

Ubuntu系统下安装 sudo apt-get install nginx

2.Nginx 基础命令

• 开启 nginx

• 停止 nginx -s stop

• 重启 nginx -s reload

3.Nginx反向代理配置在/etc/nginx/nginx.conf文件中修改

• 问题 在实际应用中发现代理访问的页面报很多资源访问不到的error，经查是因为这些资源的请求路径是相对于根目录的/，需要修改为相对于当前目录或者使用绝对路径。

node服务永久开启

• 需求 本地开启远程服务器的node服务时，当关闭终端或断开远程连接，node服务也会终止，这不是我们想要的，我们希望node服务是永久开启的。

• 解决 linux有个nohup命令，该命令可以 让远程服务器不受本地关闭终端或者断开连接的影响继续运行服务，只需要在node命令前添加该指令就行nohup node 。

http升级为https

https（超文本传输安全协议）是一种网络安全传输协议，相对于http更加安全

• 获取证书

• 服务商提供

阿里云可以申请免费1年的SSL证书，教程传送门：
https://bbs.aliyun.com/read/303413.html?spm=5176.100241.0.0.zQHYoq

• 使用openssl指令生成证书

$ openssl genrsa -out yourkey.pem 1024

$ openssl req -new -key yourkey.pem -out yourcsr.csr

$ openssl x509 -req -in yourcsr.csr -signkey yourkey.pem -out yourcert.pem

本人用的是阿里云的免费证书，成功申请后会获得以下文件

在node服务中需要用到的是前两个文件.key及.pem

• 安装

由于使用的是node服务，这里介绍node的安装

• https模块

• restify框架

jsconsole简介及安装

• 资源

https://jsconsole.com/（jsconsole项目源作者提供的线上版，目前502无法访问）
https://github.com/remy/jsconsole （jsconsole项目源码）
https://leonddup.com:8000/ （本文作者提供的线上版本）

• 简介jsconsole是一款web移动开发的调试工具，可以在PC上显示移动页面的控制台，可以打印console的信息及报错信息，也可以输入指令。

• 安装并开启服务

1.下载源码git clone
https://github.com/remy/jsconsole.git

2.安装

切换到jsconsole项目目录cd jsconsole，安装node依赖npm install。

3.开启服务node .，默认端口为8000，可设置端口PORT=8080 node .。

4.使用打开首页，看到如下界面

• 创建新的监听在输入框输入指令:listen，获得需要插入页面的js文件url

• 插入js在需要调试的页面里插入js引用

• 开始监听打开页面，此时页面中console的信息会显示在jsconsole控制台上

结语

建站的过程遇到了很多问题，每次问题的解决都是一次知识的补充，收获很多。然而目前依旧有很多未解决的问题，需要进一步深入研究。

本文作者：周磊（点融黑帮），高级前端开发工程师，目前在点融cashloan项目组从事前端开发工作。