nuxt.js專案部署全程序(ubuntu+nginx+node+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用戶)，可能涉及到一些安全問題，不過作為個人服務器不設定也行，所以不敘述了，

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

<Linux服務器的初步配置流程>:http://www.ruanyifeng.com/blog/2014/03/server_setup.html

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

1. 首先你可以在本機終端中輸入ssh-keygen命令來生成公鑰和私鑰

   $ ssh-keygen -C "你想在這輸什么都行，這就是一段描述，一般套路是你的郵箱" 
   

   你要是不喜歡的話甚至也可以不加-C ，你在別的教程里看的-t rsa也可以不加，因為不加也是生成rsa格式的，

2. 接下來讓你輸入檔案名，這步可以不輸入，不輸入之后默認的檔案名是id_rsa和id_rsa.pub

3. 接下來讓你輸入密碼，同樣可以不輸入，

4. 接下來你就會看到，你的用戶目錄里會出現.ssh的檔案夾（默認隱藏了，需要command+shift+句號鍵 才可以顯示），然后你會看到這個檔案夾里有id_rsa和id_rsa.pub

5. 登錄服務器，然后在你的用戶目錄里新建一個.ssh的檔案夾，然后新建一個authorized_keys的檔案，默認你現在正在用root用戶，

   $ cd /root
   $ mkdir .ssh
   $ vim authorized_keys
   

6. 然后進入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'這樣看起來比較高端的操作來執行，但是我估計會用的不會看我這篇博客，

7. 然后，重啟SSHD，

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

8. 接下來退出你的服務器，輸入exit或者logout或者直接關閉終端都可以，

9. 接下來再用ssh命令登錄你的服務器，你會發現不用輸密碼了，

2.3 配置環境

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

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

2. 接下來用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來進行安裝，因為用的國外的網，下載可能有些慢，需要耐心等待，

3. 然后你就可以用熟悉的npm安裝各種各樣的工具了，直接按照下面的裝就好了，

   $ npm i pm2 webpack vue-cli -g
   

4. 接下來就是安裝nginx

   $ sudo apt-get install nginx 
   

   ngnix是啥玩意待會再說，你先安你的，

5. 如果你的專案包含后端代碼，再打包好了需要安裝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

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

標籤：JavaScript

上一篇：webpack筆記

下一篇：JavaScript基礎