【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项目