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

傅阿苏

2023-12-01

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-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.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
- 请优先参考阿里云这里提供的方案,非常棒。
  
  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.gz
tar -zxvf node-v8.1.2.tar.gz
./configure
make -j4
make 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.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 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

程序员常用的在线工具
 程序员常看的技术网站