部署nuxt ssr服務器渲染應用

原文個人博客：部署nuxt ssr服務器渲染應用

個人服務器是centos 7，如下步驟以個人服務器爲例

第一步：安裝node

我採用手動安裝的，本身好把控，好控制版本。首先去找到對應的node版本,下載地址傳送門： nodejs.org/dist

找到對應的node版本，下載

wget https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.gz
複製代碼

下載完成後，解壓安裝：

tar -zxvf node-v14.16.0-linux-x64.tar.gz
複製代碼

移動到usr/local/nodejs 下

mv node-v14.16.0-linux-x64 /usr/local/nodejs
複製代碼

配置環境變量,在/etc/profile文件內添加，若是是其餘服務器，請自行查如何配置環境變量

vim /etc/profile

export NODEJS_HOME=/usr/local/nodejs
export PATH=${NODEJS_HOME}/bin:${PATH}

. /etc/profile
複製代碼

輸入node -v 檢查是否安裝成功

第二步：安裝yarn，也可使用npm

直接腳本安裝

curl -o- -L https://yarnpkg.com/install.sh | bash
複製代碼

配置阿里雲淘寶鏡像

yarn config set registry https://registry.npm.taobao.org
複製代碼

輸入yarn -v檢查是否安裝成功

第三步：打包項目，傳到服務器

1.修改package.json 打包命令，咱們每一個項目確定都是要自定義端口的，否則多個項目確定有端口衝突，config內是服務端將運行的端口

注意：這裏有個坑，host 寫成127.0.0.1 沒法訪問

本地運行打包命令

yarn build
複製代碼

打包完後，將.nuxt , static,nuxt.config.js,package.json傳到服務器上

第四步：在服務上安裝package裏的依賴

cd 到你的文件目錄,安裝完依賴，執行yarn 安裝依賴

yarn
複製代碼

而後輸入yarn start啓動服務,

yarn start
複製代碼

這時頁面就能正常運行了，此時輸入你服務器的ip地址和剛剛配置的端口ip:port就能夠訪問頁面啦。 不過這個時候，咱們的項目運行依賴終端，不能關閉終端，因此咱們要使用pm2守護進程。

第五步：配置pm2守護進程

首先安裝pm2

npm install -g pm2
複製代碼

檢查是否安裝成功

pm2 -v
複製代碼

這裏列出一些經常使用的pm2 命令

pm2 守護的進程

pm2 list 
複製代碼

中止守護進程

pm2 stop app_name 
複製代碼

刪除守護進程

pm2 delete app_name 
複製代碼

打開項目的package.json ，配置一個pm2命令

pm2 start yarn --interpreter bash --name oitboy-front -- start
複製代碼

而後傳到服務器上，執行命令

yarn pm2
複製代碼

此時pm2就在爲咱們守護進程了！

ps:上傳服務能夠再配置一個push命令

yarn build  && rm -rf myblog-front-app && mkdir myblog-front-app &&  cp -r .nuxt/ myblog-front-app/.nuxt && cp -r static/ myblog-front-app/static && cp  package.json myblog-front-app && cp nuxt.config.js myblog-front-app && scp -r myblog-front-app root@服務器地址:/home/vue/
複製代碼

整個操做大概是:

1. 打包編譯
2. 本地刪以前的緩存文件myblog-front-app
3. 當前文件夾建立一個myblog-front-app存儲要上傳的文件
4. 複製.nuxt 文件夾下全部文件到myblog-front-app/.nuxt
5. 複製static 文件下全部文件到myblog-front-app/static
6. 複製 package.json 到myblog-front-app/
7. 複製 nuxt.config.js 到myblog-front-app/
8. 上傳本地 myblog-front-app全部文件到 遠程地址 /home/vue/

而後每次打包上傳，咱們就能夠直接yarn push 輸入服務器密碼就行了

第六步：配置nginx反向代理

首先確定是，安裝Nginx，網上不少教程，這裏就不特別說明了。

nginx 啓動時會加載/etc/nginx/conf.d/下的配置，咱們只須要在這個文件夾下單獨配置本身的配置就行

建立一個本身的配置

vim /etc/nginx/conf.d/myapp.conf
複製代碼

配置以下：

upstream nodenuxt {
    server 127.0.0.1:3001; #nuxt項目 監聽端口
    keepalive 64;
}
server {
    listen 80;
    server_name oitboy.com;
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://nodenuxt; #反向代理
    }
}
複製代碼

而後重啓Nginx

nginx -s reload
複製代碼

此時就能夠輸入你的域名訪問你的項目了（固然你得提早解析域名到你的服務器上）。