Nuxt通过build打包部署到线上

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.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

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进程
pm2 restart [name] //重启进程

iis发布网站

配置Application Request Routing Cache

如果你的iis没有Application Request Routing Cache
需要进行安装->安装地址
在这里插入图片描述
右键点击Application Request Routing Cache选择打开功能
选择Prox
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

URL重写

选中你的网站
在这里插入图片描述
在这里插入图片描述
添加一条空白规则
在这里插入图片描述
只需添加这三处地方即可

名称:(可随意填写)
模式: ^(.*)
重写URL(L):http://127.0.0.1:3000/{R:1}

在这里插入图片描述
确认,重新启动,网站就可以打开了

iis配置拓展
https://blog.csdn.net/qq_24821757/article/details/113250704
https://blog.csdn.net/cplvfx/article/details/113940057

如果打开网站出现“/”应用程序中的服务器错误及解决方法
需要配置web.config
在后面追加

  <system.web>
      <customErrors mode="Off"/>
      <httpRuntime requestPathInvalidCharacters="" />
  </system.web>

参考:https://blog.csdn.net/AK852369/article/details/118890927

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Linux 上部署 Nuxt.js 应用程序需要以下步骤: 1. 通过 SSH 连接到你的 Linux 服务器。 2. 安装 Node.js 和 NPM。你可以在终端中运行以下命令来安装 Node.js 和 NPM: ``` sudo apt-get update sudo apt-get install nodejs npm ``` 3. 检查 Node.js 和 NPM 的版本是否正确。你可以使用以下命令检查版本: ``` node -v npm -v ``` 4. 将你的 Nuxt.js 应用程序上传到服务器上。你可以使用 FTP 或 SCP 等工具将应用程序上传到服务器上。 5. 在服务器上安装 PM2 进程管理器。你可以使用以下命令安装 PM2: ``` npm install pm2 -g ``` 6. 在服务器上构建你的 Nuxt.js 应用程序。你可以在终端中运行以下命令: ``` npm run build ``` 这个命令将会在你的项目目录下的 `.nuxt` 目录中生成一个可执行的应用程序。 7. 启动你的 Nuxt.js 应用程序。你可以在终端中运行以下命令: ``` pm2 start npm --name "my-app" -- start ``` 这个命令将会使用 PM2 进程管理器启动你的应用程序,并将其命名为 "my-app"。 8. 配置 Nginx 反向代理。你可以在 Nginx 的配置文件中添加以下内容: ``` server { listen 80; server_name example.com; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } ``` 这个配置将会将所有的请求转发到本地的 3000 端口上,这是由 PM2 进程管理器启动的 Nuxt.js 应用程序的默认端口。 9. 重启 Nginx 服务器。你可以在终端中运行以下命令: ``` sudo service nginx restart ``` 这个命令将会重新启动 Nginx 服务器,并使新的配置生效。 现在你的 Nuxt.js 应用程序已经成功部署到了 Linux 服务器上,并且可以通过浏览器来访问了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值