-
- 链接
- Mac安装nodejs和npm
- 替换为cnpm
- 使用create-react-app快速构建开发环境
- 使用npm init创建项目
- 配置webstorm
- 安装nodemon
- 使用webpack
- 部署神器pm2
- 部署到Linux
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',{
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
- 因为安装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:
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
请优先参考阿里云这里提供的方案,非常棒。 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
- 如果报错
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
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|