在阿里云 ECS 服务器部署 React + Express 项目
2017-11-17 21:49
1021 查看
项目开发了一部分,准备先上线看看效果,就进行了部署。
以下是文档记录。
实际操作过程中,发现这种方式速度慢,易卡死。
本地通过 SSH 登录
参考文档配置好秘钥后,用起来速度飞快。
注:如果使用阿里云管理终端登录,跳过第一条命令
如果出现这样的报错
Unable to locate package git
需要先执行
安装完成后,需要重启,或者执行下面这条配置
我输入它后,终端卡死了,所以只好重启之。
新建一个
每次修改完 nginx 配置,都要重新加载配置文件,才能使之生效。
如果遇到操作失败的报错
Restarting nginx nginx [fail]
可以通过这一条命令排查原因
或者更具体的
把里面用到的 server-api 的链接都改为
本地进入项目
这样项目根目录下的
注:
47.104.105.87 是服务器公网IP。
可以
新建
现在,浏览器访问 duopingshidai.com ,已经可以看到静态页面了。
进入 api/
然后装包
如果遇到这样的报错
npm ERR! TypeError: Cannot read property ‘latest’ of undefined
检查一下 node 和 npm 的版本,用新版,参考。
修改 config 文件
然后填入 mongoDB 、jwt 、短信服务等配置信息。
这时候,启动
后端 API 服务就生效了。但它不能长久运行,因此用 PM2 启动后端代码。
安装 PM2 包:
让 PM2 根据系统信息,自动生成启动脚本
创建 JSON 配置文件
将其作为参数传递给
至此,后端部署也完成了
以下是文档记录。
0-选购阿里云 ECS 服务器
操作系统: Ubuntu 14.04 64位1-创建普通用户
登录方式
使用阿里云管理终端连接 ECS 实例实际操作过程中,发现这种方式速度慢,易卡死。
本地通过 SSH 登录
参考文档配置好秘钥后,用起来速度飞快。
创建普通用户
创建一个名为cat的普通用户。注:如果使用阿里云管理终端登录,跳过第一条命令
# login as root, and create a new user for all the tasks ssh root@the_ip_of_this_server adduser cat --ingroup sudo su cat # go to /home/cat cd
安装 node 和其他工具软件
echo "安装辅助工具" sudo apt-get -y install git curl tmux
如果出现这样的报错
Unable to locate package git
需要先执行
sudo apt-get update
echo "安装 NVM" curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash
安装完成后,需要重启,或者执行下面这条配置
export NVM_DIR="$HOME/.nvm"
我输入它后,终端卡死了,所以只好重启之。
echo ”查看最近的 node 版本" nvm ls-remote
echo "安装最新版 node“ nvm install v9.2.0
nginx 服务器及其配置
安装
echo "现在开始安装 nginx 服务器" sudo apt-get install -y nginx
echo "安装 mongodb" sudo apt-get install -y mongodb
echo "export NODE_ENV=production 这样 npm 装包会忽略 devDependency" export NODE_ENV=production
配置域名
到/etc/nginx/sites-enabled目录下, 删除默认文件
cd /etc/nginx/sites-enabled sudo rm default
新建一个
duopingshidai.conf配置文件,对应前端展示页面的网址
server { listen 80; server_name api.duopingshidai.com; location / { proxy_pass http://localhost:3001; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Host $http_x_forwarded_host; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_read_timeout 3m; proxy_send_timeout 3m; } }
每次修改完 nginx 配置,都要重新加载配置文件,才能使之生效。
sudo service nginx reload
如果遇到操作失败的报错
Restarting nginx nginx [fail]
可以通过这一条命令排查原因
nginx -t
或者更具体的
nginx -c /etc/nginx/nginx.conf -t
部署客户端 react 项目
本地
首先修改config.js文件。
把里面用到的 server-api 的链接都改为
http://api.duopingshidai.com
本地进入项目
npm run build
这样项目根目录下的
build/文件夹中就是编译输出,配置文件也就会被编译到里面了。
上传
上传到服务器scp -i ./haoqicat.pem -r build/* root@47.104.105.87:/home/cat/sites/haoqicat/
注:
haoqicat.pem是为阿里云 ECS 服务器绑定 SSH 密钥对时生成的私钥。
-i identity_file从指定文件中读取传输时使用的密钥文件,此参数直接传递给ssh。
47.104.105.87 是服务器公网IP。
可以
scp -i ./haoqicat.pem -r build/* root@duopingshidai.com:sites/haoqicat/
nginx 配置
还是到/et 4000 c/nginx/site-enabled/
新建
duopingshidai.conf
server { listen 80; server_name duopingshidai.com; gzip on; root /home/cat/sites/haoqicat/; location / { try_files $uri /index.html; } }
root就是访问的资源的目录,打包后生成的 bulid/ 就上传到了这里
现在,浏览器访问 duopingshidai.com ,已经可以看到静态页面了。
部署服务端 express 项目
在服务器上,把代码从 GitHub 拉过来git clone https://github.com/BeijiYang/onestep.git
进入 api/
然后装包
npm i
如果遇到这样的报错
npm ERR! TypeError: Cannot read property ‘latest’ of undefined
检查一下 node 和 npm 的版本,用新版,参考。
修改 config 文件
cp config.default.js config.js
然后填入 mongoDB 、jwt 、短信服务等配置信息。
这时候,启动
node index.js
后端 API 服务就生效了。但它不能长久运行,因此用 PM2 启动后端代码。
安装 PM2 包:
npm install -g pm2
让 PM2 根据系统信息,自动生成启动脚本
pm2 startup
创建 JSON 配置文件
vi app.json
{ "apps": [{ "name": "api", "script": "api/index.js" }] }
将其作为参数传递给
pm2 start命令
pm2 start app.json
至此,后端部署也完成了
相关文章推荐
- 阿里云ECS服务器(CentOs)Tomcat部署JavaWeb项目教程
- 阿里云ECS服务器Linux环境下配置php服务器(三)--项目部署篇
- 将项目部署到阿里云服务器ECS总结
- 阿里云ECS服务器上部署项目
- 阿里云服务器部署php的laravel项目,在阿里云买ECS 搭建 Linux+Nginx+Mysql+PHP环境的
- 记录web项目部署到阿里云服务器步骤
- 学习笔记:阿里云ECS部署web项目的常见问题及解决方法
- 如何把JavaWeb项目部署到阿里云服务器并用公网ip访问
- 如何将基于Struts2的JavaWeb项目部署到阿里云服务器上
- 阿里云ECS服务器部署django
- 配置阿里云ESC服务器部署项目
- 部署非maven项目到阿里云服务器的流程、出现的错误
- 阿里云服务器并在上面部署了一个项目
- 无法通过公网访问阿里云服务器下的tomcat部署的项目
- 阿里云服务器部署Javaweb项目(二)
- 在阿里云ECS上部署 Django+MySQL+uWSGI+Nginx 项目的基本流程
- 阿里云服务器部署JavaWeb项目步骤
- vue、react等单页面项目部署到服务器的方法及vue和react的区别
- javaWeb项目部署到阿里云服务器步骤
- 阿里云服务器ECS部署应用教程