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
-
安装
-- -
-
在根目录下创建一个文件: 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
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
wget https:
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
make -j4
make install
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
- 如果报错
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 : [
{
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
网友评论