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

7

准备环境

使用的是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项目


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

xianweics · 2017年08月01日

这个方法可以发布成功,但把服务器的地址都抛出来(打开控制台-》sources下的top)里面部分路径是服务器的真实地址。这样存在安全问题,求解怎么代为其他代理路径。

回复

1

能发截图吗?都抛出来什么意思?

starkwang 作者 · 2017年08月01日
0

这个 发不了截图

xianweics · 2017年08月01日
naice · 2017年10月15日

怎么配置打包的静态文件

location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){
    root /www/blog/production/current/.nuxt/dist;
  }

.nuxt/dist 根本没有这个文件夹 ,不然 访问 真的很卡很卡

回复

0

generate 才有这个目录吧

markjour · 9月5日
载入中...