Node with React: Fullstack Web Development 课程手记（-）——环境搭建和项目框架

环境搭建和项目框架

prequisites

• 本篇笔记主要是来自Udemy课程 full-stack-react-redux，这是Udemy中我最喜欢的讲师之一，感觉讲课风趣、干货十足，有兴趣同学可以参考原课程学习，在笔记中除了第一张搭建环境外，会尽可能包含课程中讲到的所有点，欢迎评论、指正。
• node推荐版本v8.1.1及以上
• 需要安装git
• 想要安装多个node版本，推荐使用nvm管理
• 想要在npm中使用多个registry，推荐使用nrm管理。
• Google OAuth部分可能需要科学上网。免费的可以去github搜索lantern。或者有兴趣的可以用微信OAuth实现一下，只需要将passport-google-oauth换成passport-wechat，基本使用方法相同。

  项目概览

• 这个项目要做的是一个邮件调查服务系统。用户使用这个应用可以向一堆人发送邮件调查的方式获取人们的反馈，用以对日后业务的改进。使用流程如下图所示。
  

• 关于这个app更详细的信息，可以参考下图。包括授权验证、支付、用户定制信息、发送邮件、收集问卷反馈、向用户展示反馈结果。
  

• 下面这张图描述的是这个项目使用的技术栈。大致上前端采用React+Redux，后端采用Node+Express+MonogoDB，验证授权采用的是passport，支付采用的是Stripe。
  

  server端基本框架

  搭建开发环境

• 创建工程目录，控制台cd到这个目录
• npm init -y && npm install --save express
• 上面的命令会产生两个文件，package.json和package-lock.json，只有npm版本大于5才有package-lock.json

  Server端代码框架

• 在根目录下创建index.js文件，以下各步骤如无特殊声明，均为在该文件中添加代码
• 引入express，express是一个运行在node环境中的包，用以帮助创建处理http请求

  const express = require('express');
  // node仅支持这种CommonJS的规范，不支持es2015的import方式导入包复制代码

• 使用express创建app，通过该app处理各种各样的请求，产生响应，注意一个project可以包含多个app

const app = express();复制代码

• 监听工作是由node完成的，node将监听到的请求转发给express，express再把请求转发到对应的route handler
  

• 创建route handler，定义对于某种类型的请求，做何种处理，产生什么样的响应

  app.get('/', (req, res) => {
    res.send({ hi: 'there' });
  });
  // 处理路由为根目录的GET请求
  // =>function: 处理这个route的handler，一旦express app接到route为'/'，method为GET的请求，这个函数就会执行
  // req: 传入代表请求的参数，携带有关请求的所有信息
  // res: 返回响应的参数，通过res可以定制这个route的响应
  // res.send 返回响应的内容，立即执行（返回）复制代码

• 让express app告诉node去监听服务器上的某个端口

  app.listen(5000);
  // express告诉node去监听5000端口，也就是浏览器只有在访问5000端口时，上述的一切才会发生 (see diagram)复制代码

• 启动server

  node index.js复制代码

  将应用部署到heroku中

• 动态绑定端口，之前我们在代码中指定监听端口为5000，在heroku中，可能会动态分配端口，因此我们需要使app能够监听动态分配的端口，因此修改监听部分的代码如下

  const PORT = process.env.PORT || 5000;
  app.listen(PORT);
  // 如果不是heroku运行我们的app，也就是说在开发环境下，process.env.PORT是undefined复制代码

• 配置package.json，让heroku知道node和npm的版本

  "engines": {
    "node": "^8.1.1",
    "npm": "^5.0.3"
  },复制代码

• 配置package.json，让heroku知道如何启动app

  "scripts": {
    "start": "node index.js"
  },复制代码

• 创建.gitignore，确保node_modules不会被git提交
• git commit -am 'some msg'
• 创建heroku账户 www.heroku.com
• 安装heroku cli

  ## 对于MAC OS用户
  ## 如果没有安装homebrew
  /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  ## 安装heroku
  brew install heroku复制代码

• 对于其他操作系统，devcenter.heroku.com/articles/he… 提供了对应的安装方法
• 如果是第一次在命令行 中使用heroku，需要命令heroku login输入刚才创建的账户邮箱和密码
• 在工程根目录下输入命令heroku create创建heroku app，命令运行成功后，控制台会输出两个链接（如下），第一个是访问我们app的域名，第二个是一个git远程仓库地址，我们app的代码以后就push到这个仓库中

  https://peaceful-crag-47199.herokuapp.com/
  | 
  https://git.heroku.com/peaceful-crag-47199.git复制代码

• 将上一步返回的git远程仓库添加到我们的本地git配置中去

  git remote add heroku https://git.heroku.com/peaceful-crag-47199.git复制代码

• 以后每次我们push代码到这个git仓库时，heroku会完成自动部署，在push代码后可以看到控制台返回部署的log

  git push heroku master复制代码

• 如果部署过程中出现了任何问题，可以用heroku logs查看日志
• 在工程目录下运行heroku open，打开刚才部署的应用