1. 程式人生 > >CentOs nginx部署nuxt ssr服務端渲染

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