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