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; } 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项目

喜欢()
评论 (1)
Top