CentOs nginx部署nuxt ssr服務端渲染
一、初始化服務安裝基本環境工具
yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim
二、安裝node/npm 1、到local磁碟下
cd /usr/local
2、安裝nodejs
wget https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.gz
3、解壓
tar -zxvf node-v8.9.1-linux-x64.tar.gz -C /usr/local
4、更換名字
mv /usr/local/node-v8.9.1-linux-x64/ /usr/local/node8.9.1
5、軟連線指向node npm
ln -s /usr/local/node8.9.1/bin/node /usr/local/bin/node
ln -s /usr/local/node8.9.1/bin/npm /usr/local/bin/npm
三、安裝VUE 1、CD到專案目錄
2、安裝VUE腳手架
npm install -g vue-cli
安裝完後 vue -V 如果出現 bash: vue: command not found 需要修改環境變數,步驟如下:
npm root -g
得出/usr/local/node/lib/node_modules,檢查是否正確的路徑。
若存在問題可重新指定:
npm config set prefix /usr/local
可根據全域性路徑設定$PATH 直接執行命令
export PATH=$PATH:/usr/local/node
執行並修改 vi /etc/profile,在檔案末尾加上如下兩行(DEMO)程式碼
PATH=$PATH:/usr/local/node
export PATH
執行
source /etc/profile
檢視結果
echo $PATH
得出 /usr/local/node/lib/node_modules:/usr/local/node/bin 再從新安裝VUE
npm install --global vue-cli
3、建立vue軟連線
ln -s /usr/local/node8.9.1/bin/npm /usr/local/bin/npm
4、初始化nuxt專案
vue init nuxt/starter
5、安裝依賴包
npm install
6、把nuxt自帶的nuxt命令放到專案目錄下
ln -s 專案路徑/node_modules/nuxt/bin/nuxt 專案路徑/nuxt
7、服務端打包
npm run build
四、安裝nginx 1、修改nginx最新安裝源
vim /etc/yum.repos.d/nginx.repo
新增以下程式碼:
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/版本號/$basearch/
gpgcheck=0
enabled=1
2、執行安裝
yum install nginx
安裝完後 nginx -v 看是否安裝成功,安裝成功後啟動nginx
nginx
(啟動 nginx,停止 nginx -s quit 或 nginx -s stop),啟動後瀏覽器輸入伺服器IP即可看到nginx歡迎介面。
3、修改nginx反向代理
cd /etc/nginx/conf.d
4、修改配置檔案反向代理至nuxt預設埠3000埠
vim default.conf
...
location / {
proxy_pass http://localhost:3000;
# root /usr/share/nginx/html;
# index index.html index.htm;
}
...
儲存再重啟nginx,此時瀏覽器從新輸入伺服器IP看到的就是nuxt的歡迎介面,則表示nginx反向代理成功。
五、安裝PM2 1、安裝pm2 node程序管理器
npm install -g pm2
2、建立PM2軟連線
ln -s /usr/local/node8.9.1/bin/pm2 /usr/local/bin/pm2
3、使用PM2啟動專案
pm2 start npm --name "專案名稱" -- run start
使用PM2啟動專案前注意cd到專案目錄並執行npm run build在使用PM2的命令啟動下。
4、PM2常用命令
#檢視程序:
pm2 list
#或者(0為程序id)
pm2 show 0
#開啟
pm2 start 0
#停止
pm2 stop 0
#過載
pm2 reload 0
#刪除/解除安裝
pm2 delete 0
#顯示後臺日誌
pm2 logs 0