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

蔚落 2022-06-05 04:57 340阅读 0赞

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

# 0-选购阿里云 ECS 服务器 #

*  操作系统： Ubuntu 14.04 64位

# 1-创建普通用户 #

### 登录方式 ###

*  [ 使用阿里云管理终端连接 ECS 实例][_ ECS]
    
     *  实际操作过程中，发现这种方式速度慢，易卡死。
 *  [本地通过 SSH 登录][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 密钥对][SSH 1]时生成的私钥。
 *  `-i identity_file` 从指定文件中读取传输时使用的密钥文件，此参数直接传递给ssh。
 *  47.104.105.87 是服务器公网IP。  
    
    
     *  可以 `scp -i ./haoqicat.pem -r build/* root@duopingshidai.com: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 的版本，用新版，[参考][Link 2]。

修改 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

至此，后端部署也完成了

[Link 1]: https://github.com/BeijiYang/onestep
[_ ECS]: https://help.aliyun.com/document_detail/25433.html?spm=5176.doc25434.2.5.H0YXuG
[SSH]: https://help.aliyun.com/document_detail/51798.html?spm=5176.doc25434.2.4.pxa5q0#linux
[SSH 1]: https://help.aliyun.com/document_detail/51796.html?spm=5176.doc51798.2.10.jBHXkp
[Link 2]: https://github.com/hoppula/refire-forum/issues/18