准备环境

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

直接监听

对应的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项目