在阿里雲 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

至此，後端部署也完成了