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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

鱼儿小猫 2017-06-30 14:40:00 浏览4982
展开阅读全文


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.org
npm config set registry https://registry.npm.taobao.org

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

cnpm install -g create-react-app
create-react-app my-learn
cd 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-devcnpm 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.bz2
    tar -jxvf gcc-4.8.5.tar.bz2
    cd gcc-4.8.5
    ./contrib/download_prerequisites
    cd ..
    mkdir gcc-build-4.8.5
    cd 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.7
    mv /usr/bin/g++ /usr/bin/g++-4.4.7
    ln -s /usr/local/bin/gcc /usr/bin/gcc
    ln -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

  • 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.tgz
    tar -zxvf mongodb-linux-x86_64-rhel62-3.4.5.tgz
    // 默认数据路径 /data/db
    mkdir /data
    mkdir /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 : 'git@github.com: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 : 'git@github.com: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 nameid │ mode    │ pid  │ status │ restart │ uptime │ cpu  │ mem       │ watching │
      ├────────────┼────┼─────────┼──────┼────────┼─────────┼────────┼──────┼───────────┼──────────┤
      │ react-note │ 0  │ cluster │ 1570 │ online │ 00s     │ 86%  │ 23.3 MB   │ disabled │
      │ react-note │ 1  │ cluster │ 1571 │ online │ 00s     │ 95%  │ 22.6 MB   │ disabled │
      │ react-note │ 2  │ cluster │ 1576 │ online │ 00s     │ 100% │ 22.6 MB   │ disabled │
      │ react-note │ 3  │ cluster │ 1582 │ online │ 00s     │ 94%  │ 23.2 MB   │ disabled │
      └────────────┴────┴─────────┴──────┴────────┴─────────┴────────┴──────┴───────────┴──────────┘
       Use `pm2 show <id|name>` to get more details about an app
        ○ hook test
        ○ successfully deployed origin/master
      --> Success
      

网友评论

登录后评论
0/500
评论
鱼儿小猫
+ 关注