1、前言

最近打算業(yè)余時(shí)間搭個(gè)網(wǎng)站，選擇的技術(shù)棧為node+mongodb+Nuxt.js(基于vue，用于創(chuàng)建服務(wù)端渲染 (SSR) 應(yīng)用)，以下不會(huì)教科書式講解，只是提供整體思路、參考資料以及關(guān)鍵性操作。

2、阿里云部署

概括步驟：服務(wù)器環(huán)境配置->本地sublime text 安裝sftp插件->本地項(xiàng)目打包->sftp上傳->服務(wù)器安裝pm2->啟動(dòng)項(xiàng)目->完成。
以下為詳細(xì)介紹:

（1）須知：

本人操作電腦為Mac，購買的是云服務(wù)器（阿里云ECS Linux CentOS 版），購買成功后會(huì)有個(gè)密碼，之后連接此服務(wù)器需要用到，此服務(wù)器公網(wǎng)ip可以在阿里云后臺(tái)看到。

（2）部署前準(zhǔn)備

購買成功后，可以打開終端，輸入ssh root@實(shí)例的公網(wǎng) IP回車，輸入連接密碼，即可連接阿里云，看到紅框部分證明連接成功：

隨后，跟著這份官網(wǎng)文檔走一遍，給你的阿里云服務(wù)器安裝node之類的環(huán)境：https://help.aliyun.com/document_detail/50775.html
新手請務(wù)必按照上邊的文檔走一遍，直到你訪問你的ip時(shí)輸入了那個(gè)優(yōu)秀的HelloWorld。

3、部署Nuxt.js項(xiàng)目

（1）效果展示

之前的文檔只是教我們怎么配置服務(wù)器的環(huán)境以及怎么建個(gè)HelloWorld驗(yàn)證環(huán)境，沒教我們怎么上傳本地項(xiàng)目。
摸索了一下，終于成功了，先上一張圖，證明已經(jīng)部署成功，啊哈哈哈…
鏈接：http://www.ecmascripter.com/

（2）正式部署

與SPA項(xiàng)目不同，Nuxt.js項(xiàng)目是服務(wù)端渲染的項(xiàng)目，并不是像SPA那樣把打包出來的dist扔到服務(wù)器即可。
以下操作對(duì)新手來說可能會(huì)有點(diǎn)懵，但跟著走下來之后是一直可以用的，希望有需要的要來點(diǎn)耐心走完...
首先，進(jìn)入項(xiàng)目根目錄，執(zhí)行npm run build構(gòu)建，隨后：

①：安裝sublime text sftp插件

使用編輯器安裝sftp插件原因在于避免shell命令行操作的繁瑣，而且更改了代碼之后直接保存就可以上傳，不建議使用vs code的sftp插件（遇到很多不知名的坑，后來用sublime text的sftp插件，可以使用vscode開發(fā)，sublime上傳），sublime text安裝sftp插件的方法網(wǎng)上有了，就不復(fù)制粘貼了，可以參考：https://www.cnblogs.com/lswq/p/5881279.html
安裝好sftp插件以后，重啟sublime text，右擊項(xiàng)目根目錄，點(diǎn)擊map to remote，隨后會(huì)自動(dòng)生成一個(gè)sftp-config.json文件，配置紅框部分：

需要改為保存即自動(dòng)上傳的話，需要將upload_on_save選項(xiàng)改為true，此項(xiàng)目不推薦，因?yàn)楹芏辔募鋵?shí)不用上傳。

②：需要上傳的文件

.nuxt server // 本人有服務(wù)端，沒有請忽略此文件夾 .babelrc // 本人有將require改為import，因此有配置babel，沒有請忽略此文件 package.json nuxt.config.json

以上文件右擊，上傳即可，如圖：

點(diǎn)擊后可以看到sublime text底部的上傳進(jìn)度：

③：驗(yàn)證

如何驗(yàn)證是不是真的上傳成功了？
方法一：使用filezilla查看

方法二：使用終端連接服務(wù)器查看

④：運(yùn)行項(xiàng)目

本人使用pm2守護(hù)程序，以保證項(xiàng)目長時(shí)間運(yùn)行，linux下pm2的安裝網(wǎng)上有很多好的文章，搜索一下就有了，安裝完成后，運(yùn)行以下命令：
pm2 start npm --name "你喜歡的名字" -- run start
即可通過ip或者配置好的域名訪問你的網(wǎng)站。
比如：
http://www.ecmascripter.com/
或
47.52.246.127

⑤：ps

pm2有很多命令，建議搜索大致了解一下，比如以下命令用于列出pm2當(dāng)前管理的程序，可查看狀態(tài)：

（3）域名解析

這個(gè)比較簡單，只是大概介紹下，步驟：
1：阿里云注冊域名->到域名管理后臺(tái)點(diǎn)擊解析->添加記錄到阿里云公網(wǎng)ip
2：阿里云服務(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)即可訪問。

總結(jié)

以上是生活随笔為你收集整理的Node项目部署到阿里云服务器(ECS)，以Nuxt.js服务端渲染项目为例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。