nuxt.js項目部署全過程(ubuntu+nginx+node+pm2)

從選伺服器，功能變數名稱，到配置伺服器，安裝環境，打包上傳，pm2進程守護一條龍。 ...

全篇比較啰嗦，可以酌情選擇對自己有幫助的看。

1.購買一個伺服器

有伺服器的可以自行跳過哈。

有閑置電腦的話也可以，具體的可以自己找找看，我這篇主要說網上的雲伺服器。

不過這幾天阿裡雲有活動，大學生免費送半年ECS伺服器，前提是原來沒有ECS伺服器，如果原來有輕量應用伺服器的話也是可以再領的(正好到期了，不用續費了哈哈哈)，

活動網址：https://developer.aliyun.com/adc/student/

如果不是學生的話，只能自己購買了，購買的話基本是傻瓜式的，不解釋了。可以自己從任何地方買。

阿裡雲ECS伺服器購買：https://www.aliyun.com/product/ecs

系統的話本篇是Ubuntu 16.04.6 ,centos也行，大同小異都是Linux。不過如果你是初學者，最好和我使用一樣的，因為因為發行版本不同而導致的差異可能導致運行某些東西失敗，找問題要找好久。windows server不推薦了，企業用的多，小伺服器跑windows server比較費勁。

具體區別：https://www.linuxprobe.com/ubuntu-comparison-centos.html

1.1購買功能變數名稱

功能變數名稱可買可不買，就是方便記憶你的網址，沒有什麼實質的用處。

我選擇的萬網，地址給你們，自己看著挑，反正不是很貴。

萬網:https://wanwang.aliyun.com/

也是阿裡系的，所以和阿裡雲的主機配置起來相對方便一點。購買好了在你的DNS功能變數名稱解析的網站上將你的功能變數名稱綁定相應的伺服器ip即可實現輸入功能變數名稱對接ip。

dns功能變數名稱解析服務：https://dns.console.aliyun.com/

2.伺服器配置

2.1 連接伺服器

首先如果你購買了雲伺服器的話裝完系統的話，需要用本地機器進行連接。

首先打開你的終端或者cmd之類的，用ssh命令連接你的伺服器。

$ ssh [email protected]

123.123.123.123就是你的伺服器的公網Ip,怎麼找呢？

阿裡雲舉例首先登陸，然後找到控制台，如果你之前用過ECS伺服器的話，在你最近使用過的產品下會有一個 雲服務ECS的標簽，點擊它你就可以看到你的雲伺服器實例。在ip地址欄就有他的公網ip和私網Ip了。

那麼有人就會問了，公網Ip和私網ip有什麼區別呢？大體來說就是你要是通過互聯網來訪問某台主機，只能用公網ip，私網只能用於區域網內。

等待片刻會讓你輸入password，直接輸入在你配置伺服器時候的密碼即可，輸入時並不會顯示你輸入的啥，錶面上是沒動靜的，所以你只管輸入就行了，輸入完了回車，即可進入伺服器

2.2 ssh設置

當然你可以選擇新建用戶，然後直接用這個用戶登錄(ssh 你的用戶@公網ip ，之前用root登錄是因為現在伺服器里只有root用戶)，可能涉及到一些安全問題，不過作為個人伺服器不設置也行，所以不敘述了。

如果對安全有需要的同志們看一下阮一峰的那篇博客

:http://www.ruanyifeng.com/blog/2014/03/server_setup.html

不過每次輸入密碼真的挺麻煩的，所以可以用SSH秘鑰來免登陸，這裡只敘述mac系統的，windows的不太瞭解。如果你不嫌麻煩同時對安全性沒有什麼要求的話這一步一樣可以忽略。

首先你可以在本機終端中輸入ssh-keygen命令來生成公鑰和私鑰
```
$ ssh-keygen -C "你想在這輸什麼都行，這就是一段描述，一般套路是你的郵箱" 
```
你要是不喜歡的話甚至也可以不加-C，你在別的教程里看的-t rsa也可以不加，因為不加也是生成rsa格式的。
接下來讓你輸入文件名，這步可以不輸入，不輸入之後預設的文件名是id_rsa和id_rsa.pub
接下來讓你輸入密碼，同樣可以不輸入。
接下來你就會看到，你的用戶目錄里會出現.ssh的文件夾（預設隱藏了，需要command+shift+句號鍵才可以顯示），然後你會看到這個文件夾里有id_rsa和id_rsa.pub
登錄伺服器，然後在你的用戶目錄里新建一個.ssh的文件夾，然後新建一個authorized_keys的文件，預設你現在正在用root用戶。
```
$ cd /root
$ mkdir .ssh
$ vim authorized_keys
```
然後進入vim的界面，還記得你的id_rsa.pub嗎？在本地主機，你隨便用什麼打開他(例如sublime)，把這個文件的內容複製，然後粘貼到伺服器的vim里，然後嗯ESC鍵退出編輯模式，然後用大寫的ZZ可以保存退出文件，或者你也可以輸入:wq來保存退出文件。

講的比較通俗，你也可以用ssh-copy-id或者cat ~/.ssh/id_rsa.pub | ssh [email protected] 'mkdir -p .ssh && cat - >> ~/.ssh/authorized_keys'這樣看起來比較高端的操作來執行，但是我估計會用的不會看我這篇博客。

然後，重啟SSHD。

$ sudo service ssh restart
或者
$ sudo /etc/init.d/ssh restart

接下來退出你的伺服器，輸入exit或者logout或者直接關閉終端都可以。
接下來再用ssh命令登錄你的伺服器，你會發現不用輸密碼了。

2.3 配置環境

用apt-get install安裝常用的工具，具體不解釋了，可以都選擇裝，想深入瞭解的可以百度一下下麵都是些什麼東西。

$ sudo apt-get install vim openssl build-essential libssl-dev wget curl git

接下來用wget安裝nvm，nvm是node.js一個node版本管理工具，可以安裝也可以切換來切換去的

nvm ls-remote：列出所有可以安裝的node版本號
nvm install v12.16.1：安裝指定版本號的node
nvm use v12.16.1：切換node的版本，這個是全局的
nvm current：當前node版本
nvm ls：列出所有已經安裝的node版本

所以可以先用nvm ls-remote來檢查一下最新的版本，推薦安裝最新的LTS版本，然後用nvm install v12.16.1來進行安裝，因為用的國外的網，下載可能有些慢，需要耐心等待。
然後你就可以用熟悉的npm安裝各種各樣的工具了，直接按照下麵的裝就好了。
```
$ npm i pm2 webpack vue-cli -g
```
接下來就是安裝nginx
```
$ sudo apt-get install nginx 
```
ngnix是啥玩意待會再說，你先安你的。
如果你的項目包含後端代碼，再打包好了需要安裝mongdb,redis或者mysql的之類的資料庫服務的話，可以自行去百度。這裡不再贅述了。

3.nginx配置

3.1簡述原理

簡述一下nginx的原理，如果你直接通過瀏覽器訪問你的公網Ip或者功能變數名稱的話，不會出現任何東西，因為你什麼東西都沒往上擱。

如果你放了個vue項目，在伺服器上跑，你知道如果這個項目在本地上跑，你可以通過127.0.0.1:3000或者localhost:3000來訪問你這個項目。

但是如果你把項目放到伺服器上跑，我怎麼通過127.0.0.1這個地址來訪問伺服器呢？答案是不能，因為這是個迴環ip地址，只能指到本機，而本機沒有運行這個項目。

那麼我怎麼來訪問伺服器上的項目呢？所以nginx就來了，他能通過反向代理，將你輸入的123.123.123.123:80地址指向他本機運行的127.0.0.1:3000。這樣你只需要在瀏覽器上輸入123.123.123.123，然後就會出現你剛剛在伺服器上跑的vue項目。

3.2配置開始

我們進入/etc/nginx/sites-enabled/中,用vim編輯default文件

$ cd /etc/nginx/sites-enabled/
$ vim default

然後你把你能看到的不帶#號註釋的都刪掉，換成我下麵的東西，然後你就可以執行你的預設3000埠的代碼了，其他的配置項很多，我只給你能簡單運行的代碼哈，其他的自行查閱文檔或者看別的博客，我就不展開了。

nginx 中文文檔：https://www.nginx.cn/doc/

upstream nuxt{
        server localhost:3000;

}
server {
        listen 80;
        server_name _;

       location / {
            proxy_pass http://nuxt;
        }
    }

然後執行sudo nginx -t看是否語法或者配置有無硬傷，然後如果顯示successful的話，就執行sudo nginx -s reload 重啟nginx服務。這樣最簡單的代理就完事了。

4.打包上傳運行項目

4.1打包上傳

首先如果你的nuxt.js項目包含後端的話，而且你請求的地址是類似this.$axios.post("/message/upload",{})這樣的話，要先把plugin目錄下的axios.js 配置一下，保證在伺服器上運行的時候發送的地址正確。

export default function({ $axios, redirect }) {
  $axios.setBaseURL("http://公網ip");
}

並且保證在nuxt.config.js上有標註用到這個pulgin

module.exports ={
  
  // ...
  
  plugins: ["@/plugins/element-ui", "@/plugins/axios"]
  
  // ...
  
}

然後我們運行npm run build然後會自動給我們打包好相應的文件，我們需要複製到伺服器的是

.nuxt
package-lock.json // 如果有的話
package.json
nuxt.config.json
static
server // 如果你的項目中有後端的話

然後按道理將他們複製進伺服器的/www/項目名文件夾內

複製步驟可以通過forklift這樣的客戶端或者sftp，lrzsz命令來操作。

不贅述了，給個博客自行研究

三種方式實現Linux的文件上傳下載:https://blog.csdn.net/weixin_37490221/article/details/80844825

我的操作方法就是直接下載一個forklift，然後通過command+k來進行與伺服器sftp鏈接，一拖一拽就行了。比較方便。

然後進入我們剛纔在伺服器新建的/www/項目名中，執行npm install安裝依賴即可。然後我們待會啟動項目。

4.2 pm2 守護進程

伺服器嘛，當然要一直跑，如果偶遇崩潰啥的在上面跑進程的就中斷了，所以需要pm2這樣的程式來守護你所執行的進程，如果遇到崩潰可以自動重新進行重啟。而且這個玩意可以再不用配置的情況下啟動多進程，同時運行註入mongdb,redis和你的web應用。

剛纔再配置環境時已經安裝了pm2，我們還是進入我們剛纔在伺服器新建的/www/項目名中,執行

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

另附一些常用的pm2操作

查看所用已啟動進程：

$ pm2 list

重啟某一個進程：

$ pm2 restart XXX

停止某一個進程：

$ pm2 stop XXX

刪除某一個進程：

$ pm2 delete XXX

然後我們就能愉快地打開瀏覽器訪問我們的網站了。