在阿里云 ECS 服务器部署 React + Express 项目

项目开发了一部分，准备先上线看看效果，就进行了部署。
以下是文档记录。

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/* [email protected]:sites/haoqicat/

nginx 配置

还是到 /etc/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

至此，后端部署也完成了