1. 遠(yuǎn)程 SSH 連接 server

基于 server CentOS 8.0 64位，本機(jī) MacOS，推薦使用 FinalShell 或者 CyberDuck 連接。

連接成功，會(huì)有以上的信息。

然后需要安裝的環(huán)境如下：

• nginx

• node

• npm

• yarn（可選項(xiàng)，如使用 npm 可以不用安裝 yarn）安裝參考

• pm2

2. nginx

2.1 安裝依賴環(huán)境

依次執(zhí)行：

yum -y install gcc-c++
yum -y install pcre pcre-devel
yum -y install zlib zlib-devel
yum -y install openssl openssl-devel

2.2 添加用戶、組、創(chuàng)建目錄

groupadd nginx
useradd -g nginx -d /home/nginx nginx
passwd nginx

mkdir /var/run/nginx
mkdir /var/temp 
mkdir /var/temp/nginx

2.3 下載并解壓nginx

版本號(hào)可以按喜好替換

cd /opt
wget http://nginx.org/download/nginx-1.16.0.tar.gz
tar -zxvf nginx-1.16.0.tar.gz 

2.4 進(jìn)入解壓文件夾并指定安裝路徑

cd nginx-1.16.0
./configure --user=nginx --group=nginx --prefix=/usr/local/nginx --pid-path=/var/run/nginx/nginx.pid --lock-path=/var/lock/nginx.lock --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --with-http_stub_status_module --with-http_ssl_module --with-http_sub_module --with-http_gzip_static_module --http-client-body-temp-path=/var/temp/nginx/client --http-proxy-temp-path=/var/temp/nginx/proxy --http-fastcgi-temp-path=/var/temp/nginx/fastcgi --http-uwsgi-temp-path=/var/temp/nginx/uwsgi --http-scgi-temp-path=/var/temp/nginx/scgi

make && make install

2.5 設(shè)置用戶權(quán)限及開機(jī)啟動(dòng)

  ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/nginx
  cd /etc/rc.d
  sed -i '13a /usr/local/nginx/sbin/nginx' /etc/rc.d/rc.local 
  chmod u+x rc.local

瀏覽器打開 server ip:

如果不是以上頁(yè)面，而是 CentOS 頁(yè)面，說明阿里云的服務(wù)在開啟，這時(shí)需要執(zhí)行 lsof命令查找進(jìn)程并一一 kill，然后執(zhí)行 nginx 命令再刷新頁(yè)面。頁(yè)面啟動(dòng)正常就可以進(jìn)行下一步了。

3. node

3.1 下載Node.js安裝包

wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz

3.2 解壓安裝包

tar xvf node-v6.9.5-linux-x64.tar.xz

3.3 創(chuàng)建軟鏈接

ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm

3.4 查看版本

node -v
npm -v

3.5 測(cè)試

新建項(xiàng)目文件 example.js

cd ~
touch example.js

修改文件，使用 FinalShell 直接打開 example.js 編輯添加如下代碼：

const http = require('http');
const hostname = '0.0.0.0';
const port = 3000;
const server = http.createServer((req, res) => { 
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World\n');
}); 

server.listen(port, hostname, () => { 
    console.log(`Server running at http://${hostname}:${port}/`);
});

運(yùn)行：

node ~/example.js &

登錄ECS管理控制臺(tái)，并在ECS實(shí)例安全組的入方向添加規(guī)則， 放行項(xiàng)目中配置的端口（本示例中端口號(hào)為3000）。

訪問 http://<ECS實(shí)例公網(wǎng)IP地址>:3000

更多細(xì)節(jié)請(qǐng)移步 部署Node.js環(huán)境

4. pm2

npm install -g pm2 這里安裝之后需要指定軟連接

ln -s /your-server-node_path/bin/pm2 /usr/local/bin/pm2

項(xiàng)目 yarn build 打包，將 .nuxt static package.json nuxt.config.js 等文件/文件夾 copy 至服務(wù)器的文件夾 /usr/local/nginx/my-nuxt（此處的項(xiàng)目名稱要和下面啟動(dòng)項(xiàng)目名稱對(duì)應(yīng)），然后在該目錄下執(zhí)行

yarn install -production

• 進(jìn)程守衛(wèi)

package.json 文件中需要添加以下配置：

 "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "PORT=3000 nuxt start",  // 這里添加 PORT=3000
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "test": "jest"
  },

修改 /usr/local/nginx/conf/nginx.conf 文件：

# 添加這段配置
upstream nodenuxt {
        server ip_address:3000;
        keepalive 64;
}

# server 配置
server {
        listen 80;
        location / {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_cache_bypass $http_upgrade;
            proxy_pass http://nodenuxt; #反向代理
        }
    }

# yarn
pm2 start yarn --name "my-nuxt" -- start

# npm
pm2 start npm --name "my-nuxt" -- run start

如果訪問不到，可以使用 pm2 logs 命令查看下然后按照提示解決。

5. 綁定域名 & 備案

首先要實(shí)名認(rèn)證，然后等待 2-3 個(gè)工作日后填寫備案信息，接下來添加域名解析：

• 阿里云注冊(cè)域名->到域名管理后臺(tái)點(diǎn)擊解析->添加記錄到阿里云公網(wǎng)ip
• 阿里云服務(wù)器后臺(tái)點(diǎn)擊實(shí)例->點(diǎn)擊更多找到網(wǎng)絡(luò)和安全組->點(diǎn)擊添加安全組配置->添加規(guī)則，端口號(hào)對(duì)應(yīng)項(xiàng)目設(shè)置端口，本人為默認(rèn)端口80，目的是輸入域名不加端口號(hào)即可訪問。

6. SFTP 連接

SSH File Transfer Protocol，也稱 Secret File Transfer Protocol，安全文件傳送協(xié)議。使用該協(xié)議可以實(shí)現(xiàn)本地向遠(yuǎn)程服務(wù)器推送工程文件。

以 VS Code 為例：

6.1 安裝插件

插件市場(chǎng)搜索 sftp 安裝完成調(diào)出配置命令，Windows 系統(tǒng)快捷鍵 CTRL + SHIFT + P，Mac CMD + SHIFT + P，輸入 SFTP:config 按回車：

根目錄會(huì)生成這個(gè)文件。

6.2 配置 sftp.json

{
  "name": "My Server",   
  "host": "localhost",  // 改為遠(yuǎn)程 server ip
  "protocol": "sftp",   
  "port": 22,
  "username": "username",  // 改為遠(yuǎn)程 server 登錄用戶名，通常是 root
  "password": "******",  // 服務(wù)器登錄密碼
  "remotePath": "/",   // server 上項(xiàng)目目錄地址，比如我的項(xiàng)目是 /usr/local/nginx/ziyu
  "uploadOnSave": true  // 刪除這個(gè)配置或者 改為 false，否則每次保存就自動(dòng)上傳有點(diǎn)麻煩
}

6.3 上傳文件或文件夾：

文件上傳右鍵點(diǎn)擊 upload：

文件夾上傳右鍵點(diǎn)擊 Sync Local -> Remote

參考文章：
Node項(xiàng)目部署到阿里云服務(wù)器(ECS)，以Nuxt.js服務(wù)端渲染項(xiàng)目為例
VS code配置SFTP連接