Nuxt通过nginx打包部署到线上

2021年09月10日 12:02

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

target: 'server', //build打包用server，generate用static 默认 server
复制代码

generate打包

这是静态部署，比较简单

npm run generate
复制代码

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

项目nuxt.config.js配置的server（反向代理）

  server: {
    port: 3000,
    host: '0.0.0.0',
    timing: false
  },
复制代码

build打包

npm run build
复制代码

1| .nuxt
2| static
3| nuxt.config.js
4| package.json

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

npm install
npm run start
复制代码

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

nginx反向代理
nginx下载地址:nginx.org/en/download…

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

服务器修改nginx.conf配置反向代理配置

    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 start //启动进程
复制代码

pm2常规命令

pm2 delete id  //删除指定id的pm2进程 
pm2 delete all //删除全部进程
pm2 list       //查看所有pm2进程
pm2 restart [name] //重启进程
复制代码

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

module.exports = {
  apps: [
    {
      name: 'haoshunjiah5',//自定义的pm2中name唯一值
      exec_mode: 'cluster',
      instances: 'max', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start'
    }
  ]
}
复制代码

现在就已经全部完成，能够访问了

如果打开网站出现“/”应用程序中的服务器错误及其它页面打不开
需要在服务器目录新建web.config文件

添加下面这个

  <system.web>
      <customErrors mode="Off"/>
      <httpRuntime requestPathInvalidCharacters="" />
  </system.web>
复制代码

如果是通过iis部署网站
推荐查阅这些文章
blog.csdn.net/qq_24821757… blog.csdn.net/cplvfx/arti…
如果你的iis没有Application Request Routing Cache
需要进行安装->安装地址:www.iis.net/downloads/m…