标签:NodeJS,Heroku


0

这里是这个伪系列的第一篇,因为我也不知道自己能不能做完,然后到底能做成什么样子。总之,尽力而为吧,加油。

1 Heroku App 的构成

Heroku 所谓的 NodeJS App ,看起来像一个npm模块,需要一个package.json,语法也跟npm模块的语法几乎一样。

需要在里面写明运行的Node版本及npm版本,以及需要的其他模块依赖及版本。

必须的几个文件:

  • package.json //定义引擎及依赖
  • Procfile //告诉Heroku,App所需要的权限(网络什么的),运行什么命令启动你的App
  • server.js //总得有个JS文件才能跑吧,不过不限制名字

package.json

{
"name": "blog-node",
"version": "1.0.0",
"description": "rocka's node blog",
"engines": {
"node": "6.3.1",
"npm": "3.10.3"
},
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Rocket1184/NodeServerTest.git"
},
"author": "r0cka",
"license": "MIT"
}

Procfile

web: node server.js

1 开始写服务器

我对这个服务器没什么大要求,只要能返回个404页面就行。相当于一个HelloWorld。

所以我们先需要一个404页面,404.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Error: Not Found</title>
<style>
h1,
p {
text-align: center;
}
</style>
</head>
<body>
<h1>Error: 404 Not Found</h1>
<p>File not exist, please check your url.</p>
<hr>
<p>Node.js - v6.3.1</p>
</body>
</html>

没啥好说的,一个随随便便的404就好。

然后开始接收请求,准备返回404页面了~~~

这里贴上我的 server.js

'use strict';

var http = require('http');
var fs = require('fs'); var server = http.createServer((request, response) => {
console.log(request.method + ': ' + request.url);
if (request.method === 'GET') {
if (request.url === '/favicon.ico') {
fs.createReadStream('./favicon.ico').pipe(response);
} else {
response.writeHead(200, { 'Content-Type': 'text/html' });
fs.createReadStream('./404.html').pipe(response);
}
}
}); var serverPort = process.env.PORT || 5000; server.listen(serverPort); console.log(`[Rocka Node Server] Running at http://127.0.0.1:${serverPort}/`);

用自带的http API创建服务器,处理请求:

如果是GET请求,而且想要拿到 /favicon.ico ,那么用 fs 模块把文件读出来,通过管道传给响应。

否则读取 404.html,把他传出去。

值得注意的一点是,Heroku会为你的App动态分配,端口。如果把服务器监听的端口写死

server.listen(8080);

构建成功,但几乎肯定会出现这个错误:

Web process failed to bind to $PORT within 60 seconds of launch

所以,把端口的值改成Heroku API提供的动态值 process.env.PORT 就好了~~

2 package.json 的一个坑

因为缺乏对npm的了解,我在这一步犯了一个看起来非常小白的错误:

由于我在使用node写服务器时,引用了node自带的fshttp模块,就以为写依赖的时候要把这些也写进去。于是Heroku构建时就各种报错,构建失败:

   npm ERR! Linux 3.13.0-91-generic
npm ERR! argv "/tmp/build_7f369635973e963166afa93b918df0b4/Rocket1184-NodeServerTest-8575934/.heroku/node/bin/node" "/tmp/build_7f369635973e963166afa93b918df0b4/Rocket1184-NodeServerTest-8575934/.heroku/node/bin/npm" "install" "--unsafe-perm" "--userconfig" "/tmp/build_7f369635973e963166afa93b918df0b4/Rocket1184-NodeServerTest-8575934/.npmrc"
npm ERR! node v6.3.1
npm ERR! npm v3.10.3
npm ERR! No compatible version found: fs@3.10.3
npm ERR! Valid install targets:
npm ERR! 0.0.2, 0.0.0
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! /tmp/build_7f369635973e963166afa93b918df0b4/Rocket1184-NodeServerTest-8575934/npm-debug.log

起初我以为是自己的版本写的不对,就一再的修改fshttp的版本号,从3.10.33.x再到>=0.0.1,依旧构建失败。

一直构建不过,肯定是哪里出了问题。于是来看看自己本地的这些模块的版本号:

$ npm ls
node-server-test@1.0.0 D:\Documents\GitHub\NodeServerTest
`-- (empty)

这里面的模块是空的!!!

废话,什么都没装,当然是空的。

我立马在package.json里面注释掉了这些东西(VSCode里面潇洒的一个Ctrl+/):

// "dependencies": {
// "fs": "3.x",
// "http": "3.x"
// },

好了,commitpushdeploy,纳尼!!居然又报错了!!!

-----> Node.js app detected
parse error: Invalid numeric literal at line 12, column 5
! Unable to parse package.json
-----> Build failed

啊,JSON里面不能加注释啊。。。。好了,删掉,重跑,总算成功了。

仓库地址

GitHub仓库:BlogNode

主仓库,以后的代码都在这里更新。

HerokuApp:rocka-blog-node

上面GitHub仓库的实时构建结果。

从零开始,做一个NodeJS博客(一):Heroku上的最简NodeJS服务器的更多相关文章

  1. 这几天有django和python做了一个多用户博客系统(可选择模板)

    这几天有django和python做了一个多用户博客系统(可选择模板) 没完成,先分享下 断断续续2周时间吧,用django做了一个多用户博客系统,现在还没有做完,做分享下,以后等完善了再慢慢说 做的 ...

  2. 基于hexo+github搭建一个独立博客

    一直听说用hexo搭建一个拥有自己域名的博客是很酷炫的事情~,在这十一花上半个小时整个hexo博客岂不美哉. 使用Hexo吸引我的是,其简单优雅, 而且风格多变, 适合程序员搭建个人博客,而且支持多平 ...

  3. 前端设计师也有必要学习seo,推荐一个seo博客

    做前端设计师有一段时间了,现在越来越觉得作为一个前端设计师,必须要懂一些seo的知识. 因为公司的seo们,总是在网站做好以后,提出各种各样的网站修改的需求. 如果前端设计师,能够了解一些基本的seo ...

  4. 如何搭建一个独立博客——简明Github Pages与Hexo教程

    摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册.DNS设置.github和Hexo设置等过程,这是我写得最长的一篇教程.我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来,希望能给后 ...

  5. 使用前端技术和MySQL+PHP制作自己的一个个人博客网站

    源代码地址:https://github.com/YauCheun/BlogCode 我的博客网站地址:http://www.yublog.fun/ 制作前景: 想拥有一个自己独自开发的一个小型博客网 ...

  6. 怎么在阿里云搭建一个WordPress博客(超详细教程)

    想以正确的方式启动一个 WordPress 博客吗?我知道,这可能是一个令人恐惧的想法 -- 其实你并不孤单.但是,在帮助很多用户创建博客之后,我决定编写一份详细的指南,让任何没有技术知识的人都能拥有 ...

  7. 做个开源博客学习Vite2 + Vue3 (一)搭建项目

    前言 不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢. 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳. 现在vite2 ...

  8. Vue.js 入门:从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  9. 使用GitHub-Pages创建博客和图片上传问题解决

    title: 使用GitHub Pages创建博客和图片上传问题解决 date: 2017-10-22 20:44:11 tags: IT 技术 toc: true 搭建博客 博客的搭建过程完全参照小 ...

随机推荐

  1. SQL*Loader之CASE9

    CASE9 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase9.sql set termout off rem host write sys$output &quo ...

  2. Deep learning:四十一(Dropout简单理解)

    前言 训练神经网络模型时,如果训练样本较少,为了防止模型过拟合,Dropout可以作为一种trikc供选择.Dropout是hintion最近2年提出的,源于其文章Improving neural n ...

  3. Linux菜鸟级重点

    这是本人自学Linux所做的笔记,以及实现一些功能作的总结.乐意与各位喜欢linux的朋友交流学习,共同进步.这篇文章只是简单介绍一些linux比较常用的或者说是最基础的也是最重要的知识,有些在模块后 ...

  4. 纯Shading Language绘制HTML5时钟

    今天是2014年的最后一天,这个时刻总会让人想起时钟,再过几个小时地球人都要再老了一岁,于是搞个HTML5版的时钟就是我们今天要完成的任务,实现HTML5的时钟绘制一般会采用三种方式,第一种采用CSS ...

  5. 分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库:ExcelUtility

    1. ExcelUtility功能:  1.将数据导出到EXCEL(支持XLS,XLSX,支持多种类型模板,支持列宽自适应)  类名:ExcelUtility. Export  2.将EXCEL ...

  6. 相同版本的CDH集群间迁移hdfs以及hbase

    前言 由于项目数据安全的需要,这段时间看了下hadoop的distcp的命令使用,不断的纠结的问度娘,度娘告诉我的结果也让我很纠结,都是抄来抄去, 还好在牺牲大量的时间的基础上还终于搞出来了,顺便写这 ...

  7. winform中ComboBox利用AutoComplete属性实现模糊查询(有缺陷)

    上一篇文章是用ComboBox里面的原生事件实现模糊查询,操作比较灵活一些,但是收到评论说,利用AutoComplete属性就可以实现模糊查询,但是据本人所了解,AutoComplete虽然能够方便的 ...

  8. 创建html元素

    如果我要创建一个div元素. 1.使用DOM对象创建: 使用document.createElement('div')方法创建元素. 2.使用JQuery创建: 使用$('<div>通过J ...

  9. C#利用浏览按钮获得文件路径和文件夹路径

    生成文件夹路径 private void btnChoose_Click(object sender, EventArgs e) {            using (OpenFileDialog ...

  10. cefglue埋坑记录

    很少写博客,写的不好,请多多包含,主要是记录工作中的一些问题,和园子里朋友一起讨论学习. 写埋坑记录之前,我先介绍下为什么会使用这个webkit内核的浏览器组件,我是wpf项目使用富文本编辑器,话说w ...