React+NodeJS+Express 环境搭建与部署

---

1 链接

个人博客: alex-my.xyz

CSDN: blog.csdn.net/alex_my

前面 2-8 章都是将本地开发设置
第 10 章 是部署到外网服务器上

2 Mac安装node.js和npm

• Mac下通过brew安装

  brew install node

  当前官网推荐版本为 v6.11.0 LTS，直接使用brew安装的版本为v6.3.1。

  我这里使用这种方法。

• 下载安装包安装
  Node.js 中文网 下载速度快,但不一定是最新的,当前v8.1.0。

  Node 官网 最新版本v8.1.1。

  使用源码的安装方式的见 10 部署到Linux

• 现在的node.js已经集成了npm。

3 替换为cnpm

国内使用npm速度较慢，可以使用淘宝定制的cnpm。

npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm config set registry https://registry.npm.taobao.org

4 使用create-react-app快速构建开发环境

cnpm install -g create-react-appcreate-react-app my-learncd my-learn

安装后会出现:

npm start    Starts the development server.  npm run build    Bundles the app into static files for production.  npm test    Starts the test runner.

等待一小段时候后可以看见Compiled successfully!
启动后会自动打开浏览器 http://localhost:3000

5 使用npm init创建项目

• 按照网上所说，使用cnpm init初始化一个项目。会生成package.json文件。
• 不过我这台mac下使用该命令会在version阶段卡死，我这边使用的是 cnpm init -y
• 然后执行cnpm install babel-cli --save-dev和cnpm install
• 这样会得到node_modules文件夹和package.json文件
• 我这里后面学习时使用的还是基于create-react-app创建的工程，小项目直接使用webstorm创建工程。

6 配置webstorm

• 创建工程，Node.js Express APP
  
  • Template 选 EJS
  • css 选 SASS
• 进入Languages & Frameworks - JavaScript - Libraries。
• 点击Download…。
• 弹出框刚弹出来的时候会显示 ‘Fetching a list of libraires …’。
• 等待一段时间后，出现一个列表，选择node进行下载。
• 进入Languages & Frameworks - Node.js and NPM，在Coding Assistance中选择Enable。

7 安装nodemon

• 为了避免每次修改文件都要重新手动启动，可以安装一个nodemon
• cnpm install nodemon –save
• 将原来的 node app.js 替换为 nodemon app.js
• 对于使用了Express 4.xx框架的，应该执行 nodemon ./bin/www，否则打不开网页的。但是只执行这个命令，却达不到自动更新的目的。还要另开终端执行webpack –watch, 这样，又变的没意义了。

8 使用webpack

• 安装

  npm install webpack --save -g

• 在根目录下创建一个文件: webpack.config.js, 内容如下

  let path=require("path");module.exports={    entry:  "./public/javascripts/index.jsx",    output:        {            path: path.join(__dirname,"./public/out"),            filename: "bundle.js",            publicPath: "./public/out/"        },    module:        {            loaders: [                {                    test: /\.js$/,                    loader: "babel-loader",                    query:                        {                            presets: ['react','es2015']                        }                },                {                    test: /\.jsx$/,                    loader: 'babel-loader',                    query:                        {                            presets: ['react', 'es2015']                        }                },                {                    test: /\.css$/,                    loader: "style-loader'!css-loader"                },                {                    test: /\.(jpg|png|otf)$/,                    loader: "url?limit=8192"                },                {                    test: /\.scss$/,                    loader: "style-loader!css-loader!sass-loader"                }            ]        }};

  • 配置文件解释以及index.jsx，请自行搜索，根据项目不同内容也不同。

• 打包
  进入 webpack.config.js所在目录
  执行

  webpack --watch     // 监听变动并自动打包webpack -p          // 压缩混淆脚本，这个非常非常重要！webpack -d          // 生成map映射文件，告知哪些模块被最终打包到哪里了

9 部署神器pm2

• 常用命令参考

  命令 说明 pm2 start app.js 启动应用 pm2 list 列出所有应用 pm2 monit 查看资源消耗 pm2 describe [app/id] 查看某一个应用的状态 pm2 logs 查看所有日志 pm2 restart [app/id] 重启应用 pm2 stop [app/id/all] 停止应用 pm2 web 访问 url:9615

• pm2-web

  • 安装npm install -g pm2-web。
  • 默认可以直接运行pm2-web, 会使用默认的配置，然后在终端中会告诉你地址和端口，比如0.0.0.0:9000。终端也会输出一份默认配置。

  • 也可以自己指定配置，比如新建一个文件pm2-web-config.json

    "www": {    "host": "localhost",    "address": "0.0.0.0",    "port": 8080}

  • 指定配置运行: pm2-web --config pm2-web-config.json

10 部署到Linux

• linux 升级gcc

  • 因为安装node.js的时候有一个警告 C++ compiler too old, need g++ 4.8 or clang++ 3.4.2 (CXX=g++)
  • 系统自带的是 4.4.7, 如果你的是4.8的，可以忽略了。
  • 进入 https://mirrors.tuna.tsinghua.edu.cn/gnu/gcc，拷贝链接
  • 选择了4.8。

  wget https://mirrors.tuna.tsinghua.edu.cn/gnu/gcc/gcc-4.8.5/gcc-4.8.5.tar.bz2tar -jxvf gcc-4.8.5.tar.bz2cd gcc-4.8.5./contrib/download_prerequisitescd ..mkdir gcc-build-4.8.5cd gcc-build-4.8.5/../gcc-4.8.5/configure --enable-checking=release --enable-languages=c,c++ --disable-multilib// 多核CPU可以带上 -j N 参数, N=核数make -j4// root权限make install// 修改 /usr/bin中的mv /usr/bin/gcc /usr/bin/gcc-4.4.7mv /usr/bin/g++ /usr/bin/g++-4.4.7ln -s /usr/local/bin/gcc /usr/bin/gccln -s /usr/local/bin/g++ /usr/bin/g++// 修改库cp /usr/local/lib64/libstdc++.so.6.0.19 /usr/lib64/ln -s libstdc++.so.6.0.19 libstdc++.so.6

• linux 安装node.js

  • 请优先参考阿里云这里提供的方案,非常棒。

    https://help.aliyun.com/document_detail/50775.html?spm=5176.doc25426.6.655.kn1mB7

  • 如果yum install nodejs可以安装，就不用看后面的源码安装了
  • 进入http://nodejs.cn/download/ (国内节点)选择源代码，拷贝链接
    

    wget https://npm.taobao.org/mirrors/node/v8.1.2/node-v8.1.2.tar.gztar -zxvf node-v8.1.2.tar.gz./configuremake -j4make install

• linux 安装 pm2

  npm install pm2 -g

• linux 安装 mongodb

  进入 https://www.mongodb.com/download-center?jmp=homepage#community 拷贝链接
  这里选择 RHEL 6 Linux 64-bit x64

  wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel62-3.4.5.tgztar -zxvf mongodb-linux-x86_64-rhel62-3.4.5.tgz// 默认数据路径 /data/dbmkdir /datamkdir /data/db# 以守护进程方式运行./mongod --fork --dbpath /data/db  --logpath /var/log/mongodb.log

  • 如果报错 ERROR: child process failed, exited with error number 1
  • #define EPERM 1 /* Operation not permitted */
  • 请更换数据库dbpath的地址

• github上创建工程，并且将项目提交

• github 项目的 Settings - Deploy keys - Add deploy, 添加linux的公钥。

• 将github加入到服务器的known_hosts

  ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts

• 本地项目中配置pm2

  • 在项目根目录输入 pm2 ecosystem, 自动生成文件 ecosystem.config.js

  • ecosystem.config.js配置如下

    module.exports = {  /**   * Application configuration section   * http://pm2.keymetrics.io/docs/usage/application-declaration/   */  apps : [    // First application    {      name      : 'react-note',      script    : './bin/www',      instances : 4,      exec_mode : 'cluster',      max_memory_restart: "300M",      env: {        COMMON_VARIABLE: 'true'      },      env_production : {        NODE_ENV: 'production'      }    },  ],  /**   * Deployment section   * http://pm2.keymetrics.io/docs/usage/deployment/   */  deploy : {    production : {      user : 'root',                        # 也可以useradd另建用户      host : '121.201.x.x',                 # 服务器地址      ref  : 'origin/master',      repo : '[e-mail]:xx/xx.git',    # github上的项目地址      path : '/data/nodejs/production',     # 服务器上放项目的目录      'post-deploy' : 'npm install && pm2 startOrRestart ecosystem.config.js --env production'    },    dev : {      user : 'alex',      host : '127.0.0.1',      ref  : 'origin/master',      repo : '[e-mail]:alex-my/react-note.git',      path : '/Code/nodejs/dev',      'post-deploy' : 'npm install && pm2 startOrRestart ecosystem.config.js --env dev',      env  : {        NODE_ENV: 'dev'      }    }  }};

  • 本地执行以下命令，用于部署设置

    pm2 deploy ecosystem.config.js production setup

    这需要等待一段时间，如果怀疑卡死的，请到服务器上的安装目录，我这里是/data/nodejs/production，进入后执行 du -sh * ,看到文件夹不断变大，就知道不是卡死了。

  • 需要注意的是，对应的ssh端口是默认的22。

  • 部署设置完毕后，执行以下命令进行部署

    pm2 deploy ecosystem.config.js production

  • 执行成功后，输出:

    ┌────────────┬────┬─────────┬──────┬────────┬─────────┬────────┬──────┬───────────┬──────────┐│ App name   │ id │ mode    │ pid  │ status │ restart │ uptime │ cpu  │ mem       │ watching │├────────────┼────┼─────────┼──────┼────────┼─────────┼────────┼──────┼───────────┼──────────┤│ react-note │ 0  │ cluster │ 1570 │ online │ 0       │ 0s     │ 86%  │ 23.3 MB   │ disabled ││ react-note │ 1  │ cluster │ 1571 │ online │ 0       │ 0s     │ 95%  │ 22.6 MB   │ disabled ││ react-note │ 2  │ cluster │ 1576 │ online │ 0       │ 0s     │ 100% │ 22.6 MB   │ disabled ││ react-note │ 3  │ cluster │ 1582 │ online │ 0       │ 0s     │ 94%  │ 23.2 MB   │ disabled │└────────────┴────┴─────────┴──────┴────────┴─────────┴────────┴──────┴───────────┴──────────┘ Use `pm2 show <id|name>` to get more details about an app  ○ hook test  ○ successfully deployed origin/master--> Success