阿里雲部署nuxt專案

Nuxt官方發表於2018-04-26
阿里UX

購買伺服器

目前市面上的雲伺服器有很多可供選擇,比如:騰訊雲、阿里雲、華為雲等等五花八門,大家可自行選擇,使用套路都差不多,本文以阿里雲ECS為例。

配置: 系統:centos_7

建立nuxt專案

為啥選擇nuxt專案、nuxt的優缺點、以及如何建立nuxt專案不是本文的中心,可以看本人的另一篇文章vue+nuxt+sass+node+express+MongoDB 實現的文章釋出系統 。此次要部署的專案以此為例,有需要原始碼的也可去本人Github去clone。

部署專案

登入阿里雲ECS

進入到阿里雲控制檯,建立伺服器例項之後點選右邊的"遠端連結"進入到登入介面

阿里雲ECS

輸入賬號密碼, 如果忘記了可以重新設定

具體可以參考 阿里雲官網文件

阿里雲官網文件

安裝node、npm

1.開始安裝Node.js，先進入/root資料夾(安裝在/root目錄下,也可以指定到自定義目錄下)，這個資料夾通常用來存放軟體原始碼:

cd /root
複製程式碼

2.從 Node.js的站點 中獲取壓縮檔原始碼, 我選擇的版本為v9.10.0(可以直接複製下面程式碼,修改自己需要的版本就可以)：

wget https://nodejs.org/dist/v9.10.0/node-v9.10.0-linux-x64.tar.xz
複製程式碼

3.解壓縮原始檔，並且進入到壓縮後的資料夾中:

tar xvf node-v9.10.0-linux-x64.tar.xz
複製程式碼

4.建立軟連線,全域性才可以使用node和npm:

ln -s /root/node-v9.10.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v9.10.0-linux-x64/bin/npm /usr/local/bin/npm
複製程式碼

5.現在已經安裝了Node.js, 可以開始部署應用程式, 首先要使用Node.js的模組管理器npm安裝pm2.

npm install pm2 -g
複製程式碼

6.建立pm2的軟連線

ln -s /root/node-v9.10.0-linux-x64/bin/pm2 /usr/local/bin/pm2
複製程式碼

安裝mongodb

1.安裝說明：

安裝軟體：mongodb-linux-x86_64-2.4.9.tgz

下載地址： http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.4.9.tgz

上傳位置：/root

軟體安裝位置：/root/mongodb

資料存放位置：/var/mongodb/data日誌存放位置：/var/mongodb/logs
複製程式碼

2.進入資料夾/root,下載mongodb原始碼：

cd /root
wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.4.9.tgz
複製程式碼

3.解壓安裝包，重新命名資料夾為mongodb

tar zxvf mongodb-linux-x86_64-2.4.9.tgz
mv mongodb-linux-x86_64-2.4.9 mongodb
複製程式碼

4.在var資料夾裡建立mongodb資料夾，並分別建立資料夾data用於存放資料，logs用於存放日誌

mkdir /var/mongodb
mkdir /var/mongodb/data
mkdir /var/mongodb/logs
複製程式碼

5.開啟rc.local檔案，新增CentOS開機啟動項：

1. vim /etc/rc.d/rc.local 預設進去是普通模式，不能寫入;

2. 輸入i命令，注意：”i”, 不是”:i”, 然後就可以寫了;

3. 然後按esc,回到普通模式，輸入:w,儲存，:q退出，回到控制檯。
複製程式碼

6.將mongodb啟動命令追加到本檔案中，讓mongodb開機自啟動：

/root/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork
複製程式碼

7.啟動mongodb

/root/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork
複製程式碼

8.看到如下資訊說明已經安裝完成併成功啟動:

forked process: 11221
all output going to: /var/mongodb/logs/log.log
child process started successfully, parent exiting
複製程式碼

上傳專案程式碼

1.可以安裝任意一款 ftp上傳工具,此處推薦FileZilla,連結

阿里雲官網文件

程式碼前期準備

1.在本地執行命令:npm run build 生成 .nuxt目錄

2.配置package.json檔案新增

"config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": 80
    }
  }

複製程式碼

3.在/home下建立app資料夾,將上一步生成的.nuxt檔案和package.json、server等檔案上傳到該資料夾

阿里雲官網文件

啟動專案

 1.npm install 安裝依賴包檔案

 2. cd app/server資料夾下 "pm2 start listrouter.js 啟動服務介面

 3. cd app/目錄下 "pm2 start npm --name "mynuxt" -- start 啟動前端
複製程式碼

至此,程式碼部署完畢, 瀏覽器輸入 "你的外網IP:埠號"(80埠可以不寫) 就可啟動專案了。點選檢視demo

如果,啟動80埠被佔

阿里雲官網文件

1. 首先sudo netstat -apn | grep 80 檢視那些程式佔了埠;

2. kill 25141
複製程式碼

總結

第一次用阿里雲,有許多還不太會,初級入門的可以看看,大佬可以忽略。需要了解更多資訊，可以檢視我的部落格

相關文章