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.org4 使用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 x64wget 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
- 在项目根目录输入 pm2 ecosystem, 自动生成文件
