Nuxt通过build打包部署到线上

明知山

发布于 2021-07-23 16:18:57

7K0

发布于 2021-07-23 16:18:57

文章被收录于专栏：前端开发随笔

nuxt有两种打包方式 nuxt.config.js文件需要对不同打包方式进行配置

target: 'server', //build打包用server，generate用static 默认 server

generate打包

这是静态部署，比较简单

npm run generate

生成dist文件夹，直接放到服务器就可以访问但是如果后台修改数据，前端还是显示之前打包的数据

build打包

npm run build

.nuxt
static
nuxt.config.js
package.json

把这四个文件放到远程服务器中的文件夹里在远程服务器中安装node cmd这个文件夹，执行

npm install
npm run start

就能生成个本地链接进行访问

nginx反向代理

nginx下载地址

修改nginx.conf配置反向代理 listen 后台去开设的端口为86，默认为80,因为被占用了 server_name 放你的代理的域名，不要带http:// proxy_pass 为你node启动的服务器地址，需要保持连接状态

项目nuxt.config.js配置的server

  server: {
    port: 3000,
    host: '0.0.0.0',
    timing: false
  },

    upstream nodenuxt {
        server 0.0.0.0:3000;
        keepalive 64;
    }
    
   server {
        listen   86;
        server_name  xxx.com;
        location / {
            proxy_pass   http://nodenuxt;
        }
    }

必须要在nginx.exe的目录下，打开cmd，启动nginx

start nginx  //启动nginx

nginx常规命令如下

start nginx      //启动nginx
nginx -s stop    //停止/关闭nginx
nginx -s reload  //重新启动nginx
nginx -t         //检验nginx书写问题 
taskkill /f /t /im nginx.exe  //清除所有nginx进程

就可以IP地址或域名携带86端口号访问了

nginx外网访问不了的情况

如果需要域名能够在外网进行访问，需要配置服务器的防火墙打开控制面板\系统和安全\Windows Defender 防火墙路径下的允许应用通过Windows Defender 防火墙进行通信 点击允许其他应用，浏览指定nginx.exe文件，然后添加

pm2守护进程

npm install pm2 -g

pm2可以关闭了node服务窗口，还可以继续访问链接服务在服务器项目的根目录新建ecosystem.config.js文件

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      exec_mode: 'cluster',
      instances: 'max', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start'
    }
  ]
}

项目目录下执行

pm2 start

status为online就成功了参考了nuxt官方pm2操作 pm2常规命令

pm2 delete id  //删除指定id的pm2进程 
pm2 delete all //删除全部进程
pm2 list       //查看所有pm2进程

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/07/20 ，如有侵权请联系 cloudcommunity@tencent.com 删除

nginx

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度