【nuxtjs指南】nuxt js 利用nginx反向代理如何優雅的部署

準備環境

使用的是nuxt-express模板 在Linux 選的是Ubuntu系統

安裝vue cli

npm i vue-cli -D

下載項目

vue init nuxt/express sexpress

部署方式：

第一步先構建

npm run build

第二步啓動

pm2 start ./build/main.js

此時是映射到127.0.0.1:3000
此時去訪問主機的外網ip是訪問不到的，由於映射的是內網ip，因而有些同窗就把express監聽的ip去掉直接監聽80端口，就能夠直接用域名訪問了，固然這樣作最簡單直接了。

通常做爲開發者本身就買一臺vps，土豪就不說了，當又想部署一個網站怎麼辦呢？

優雅的部署方式

前面的步驟同樣
npm run build
pm2 start build/main.js

此時能夠是3000 端口
而後使用nginx 做爲反向代理把這個端口專門映射到一個域名上

nginx反向代理的操做方式

這有個坑，不須要爲nuxt指定靜態文件的nginx規則，坑了我好久

nginx反向配置以下

upstream shudong {
        server 127.0.0.1:3000;
}

server{
        listen 80;

        server_name shudong.wang;
        index index.html index.htm index.php default.html default.htm default.php;
        location / {
                proxy_set_header X-Real-Ip $remote_addr;
                proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Nginx-Proxy true;
                proxy_pass http://shudong;
                proxy_redirect off;
                #try_files $uri $uri/ /index.html;  ##使用docker環境下這個不須要
        } 
        location ~ /\.
        {
            deny all;
        }

        access_log  /home/wwwlogs/blog.shudong.wang.log;
    }

上面配置就這麼簡單

修改完配置須要重啓nginx

service reload nginx

最後一步

我上面的域名是 shudong.wang

把個人這個域名解析到這個主機的外網ip就可使用這個域名訪問了

若是還想在搭建一個node服務 或 nuxt 或其餘項目

直接監聽
項目一 ：127.0.0.1:3001

對應的nginx配置

upstream shudong {
        server 127.0.0.1:3001;
}
server{...}

以此類推

下面貼一個正常配置的完整版本 有註釋說明坑的地方

upstream shudong {
        server 127.0.0.1:3001;
}

server{
        listen 80;
        #listen [::]:80;
        server_name shudong.wang;
        index index.html index.htm index.php default.html default.htm default.php;
        #root  /home/wwwroot/shudong.wang;  #在nuxt 動態不須要配置,靜態的能夠指定

        include other.conf;
        #error_page   404   /404.html;
        include enable-php.conf;


        #下面這個解析圖片的nuxt千萬不要加
        #location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ 
        #{
        #    expires      30d;
        #}

        location / {
                proxy_set_header X-Real-Ip $remote_addr;
                proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;

                proxy_set_header X-Nginx-Proxy true;
                proxy_pass http://shudong;
                proxy_redirect off;
                try_files $uri $uri/ /index.html;
        }
    
        #下面這個解析js的千萬不要加
        #location ~ .*\.(js|css)?$
        #{
        #    expires      12h;
        #}

        location ~ /\.
        {
            deny all;
        }

        access_log  /home/wwwlogs/blog.shudong.wang.log;
    }

tips:服務器上面的代碼可使用 git webhook，本地push遠程自動拉取

後續會寫利用docker部署nuxt項目